Vue組件-極簡的地址選擇器

時間 2019-12-05

標籤 vue 組件地址選擇器简体版

原文原文鏈接

1、前言

本文用Vue完成一個極簡的地點選擇器，咱們接下來帶你們實現這個。固然其中也有一些值得學習與注意的地方。話很少說，咱們先上demo圖。由於每一個人的須要不同，我這邊就不在實現更多的功能，因此留有更大的空間供你們增刪改。css

2、須要學習的地方

（1）數據更新Vue沒法監控

首先要說一下的就是這個點，咱們在Vue中有個好處就是能夠不用操做dom，直接操做數據。可是這其實也有Vue沒法監控的數據。如數組和對象。固然這裏只是指一小部分操做而已，大部分操做都是沒毛病的。接下來講說哪些數據操做Vue沒法監控css3

一、數組

因爲 JavaScript 的限制，Vue 不能檢測如下變更的數組：git

當你利用索引直接設置一個項時，例如：vm.items[indexOfItem] = newValue
當你修改數組的長度時，例如：vm.items.length = newLength

意思就是下面的狀況都不能監控到，所以這樣改變數組是不會刷新視圖的github

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是響應性的,
vm.items.length = 2 // 不是響應性的

實際上要解決這二者的方法也簡單:ajax

//解決第一類問題

vm.$set(vm.items, indexOfItem, newValue)

//爲了解決第二類問題，你可使用 splice：

vm.items.splice(newLength)

這樣就可使得Vue監控到數組操做的變化。固然還有如下的操做Vue也能夠監控到的json

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

2.對象

因爲 JavaScript 的限制，Vue不能檢測對象屬性的添加或刪除！ 這個是重點，若是動態的添加對象屬性的話，那麼請注意你添加對象屬性的方式是否爲$set，否則的話視圖頗有可能不更新。segmentfault

var vm = new Vue({
  data: {
    userProfile: {
      name: 'Anika'
    }
  }
})

vm.userProfile.age = 27;    //看着沒問題，實際上Vue沒法監控

所以解決辦法也是老辦法，用
vm.$set(vm.userProfile, 'age', 27);數組

使用Object.assign()添加多個屬性也要注意一下用法dom

//錯誤
Object.assign(vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

//正確
vm.userProfile = Object.assign({}, vm.userProfile, {
  age: 27,
  favoriteColor: 'Vue Green'
})

（2）V-for的用法

1.遍歷數組

這裏直接擼碼，一看就懂

v-for = "(val,index) in arr" 
//獲得的就是值和數組下標

//習慣性用法
<div v-for="(val,index) in arr" :key="index">
</div>

2.遍歷對象

v-for = "(val,key,index) in object" 
//獲得的就是鍵值對還有下標

//習慣性用法
<div v-for = "(val,key,index) in object" :key="index">
</div>

CSS3樣式

固然這裏就很少說了。這個直接給出傳送門：css3用scale實現下劃線動畫

實現極簡地點選擇

這裏就放主要的代碼吧，雖然總代碼也很少

html部分

<div class="siteBox" id="siteBox"  v-if="isShow">
    <header>
        <ul class="classify">
            <li :class="{active:isClassify===key}" v-for="(arr,key,index) in this.locationName" :key="index" @click="isClassify=key">
                <a class="classify-a" href="#">{{key}}</a>
            </li>
        </ul>
    </header>
    <main class="site-name">
        <dl v-for="value of isClassify">
            <dt>{{value}}</dt>
            <div class="list-dd">
                <dd v-for="(val,index) in locationName[isClassify][value]" :key="index" @click="site=val;isShow=false">
                    <a class="list-a" href="#">{{val}}</a>
                </dd>
            </div>
        </dl>
    </main>
</div>

methods:{
    getData(){
        let xhr = new XMLHttpRequest();                     //原生ajax
        xhr.open('get','http://127.0.0.1:3001/read');       //請求mock
        xhr.send();
        xhr.onreadystatechange = ()=> {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let locationN = JSON.parse(xhr.responseText);       //獲取數據，地點json
                for (let key of Object.keys(locationN)) {           //遍歷取出數據，取得鍵值
                    for(let key2 of Object.keys(this.locationName)){        //遍歷data中locationName，爲了分類
                        let pattern = new RegExp("["+key2.toString()+"]");      
                        if(pattern.test(key)){                              //正則匹配，若是找到就進入對應的分類對象中
                            
                            //判斷該類中是否存在該字母這地名集合，如A，B，C
                            if (Array.isArray(this.locationName[key2][key.charAt(0)])) {
                                //若是存在則直接推入地名
                                this.locationName[key2][key.charAt(0)].push(locationN[key]);
                                
                                //沒有則先建立再推入地名
                            } else {
                                this.$set(this.locationName[key2],key.charAt(0),[]);
                                this.locationName[key2][key.charAt(0)].push(locationN[key]);
                            }
                            break;
                        }
                    }
                }
            }
        }
    },
}