一、媒介
本文用Vue完成一個極簡的所在挑選器，我們接下來帶人人完成這個。固然个中也有一些值得進修與注重的處所。話不多說，我們先上demo圖。因為每個人的須要不一樣，我這邊就不在完成更多的功用，所以留有更大的空間供人人增編削。
GitHub地點：Vue-location_Select
二、須要進修的處所
（1）數據更新Vue沒法監控
起首要說一下的就是這個點，我們在Vue中有個優點就是能夠不必操縱dom，直接操縱數據。然則這實在也有Vue沒法監控的數據。如數組和對象。固然這裏只是指一小部份操縱罷了，大部份操縱都是沒缺點的。接下來說說哪些數據操縱Vue沒法監控
1、數組
因為 JavaScript 的限定，Vue 不能檢測以下更改的數組：
- 當你應用索引直接設置一個項時，比方：
vm.items[indexOfItem] = newValue - 當你修正數組的長度時，比方：
vm.items.length = newLength
意義就是下面的狀況都不能監控到，因而如許轉變數組是不會革新視圖的
var vm = new Vue({
data: {
items: ['a', 'b', 'c']
}
})
vm.items[1] = 'x' // 不是相應性的,
vm.items.length = 2 // 不是相應性的實際上要處理這兩者的要領也簡樸:
//處理第一類題目
vm.$set(vm.items, indexOfItem, newValue)
//為了處理第二類題目，你能夠運用 splice：
vm.items.splice(newLength)如許就能夠使得Vue監控到數組操縱的變化。固然另有以下的操縱Vue也能夠監控到的
push()pop()shift()unshift()splice()sort()reverse()
2.對象
因為 JavaScript 的限定，Vue不能檢測對象屬性的增加或刪除！ 這個是重點，假如動態的增加對象屬性的話，那末請注重你增加對象屬性的體式格局是不是為$set，不然的話視圖很有可能不更新。
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
vm.userProfile.age = 27; //看着沒題目，實際上Vue沒法監控因而處理辦法也是老辦法，用vm.$set(vm.userProfile, 'age', 27);
運用Object.assign()增加多個屬性也要注重一下用法
//毛病
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>- js
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;
}
}
}
}
}
},
}后話
到這裏，我們就已完成了該Vue組件，假如想細看代碼或許運用的話，請點擊Vue-location_Select，固然假如喜好就不要慳吝你的star哦！
