真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

Vue組件之極簡的地址選擇器的實(shí)現(xiàn)

一、前言

我們是2013年開創(chuàng)至今的成都網(wǎng)站建設(shè)公司,提供網(wǎng)站建設(shè),電商網(wǎng)站設(shè)計(jì)開發(fā),外貿(mào)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)頁設(shè)計(jì),重慶小程序開發(fā)、等服務(wù)。為客戶創(chuàng)造有價(jià)值的品牌營銷體驗(yàn)，讓互聯(lián)網(wǎng)提升企業(yè)的競爭力！

本文用Vue完成一個(gè)極簡的地點(diǎn)選擇器，我們接下來帶大家實(shí)現(xiàn)這個(gè)。當(dāng)然其中也有一些值得學(xué)習(xí)與注意的地方。話不多說，我們先上demo圖。因?yàn)槊總€(gè)人的需要不一樣，我這邊就不在實(shí)現(xiàn)更多的功能，所以留有更大的空間供大家增刪改。

GitHub地址：Vue-location_Select

二、需要學(xué)習(xí)的地方

（1）數(shù)據(jù)更新Vue無法監(jiān)控

首先要說一下的就是這個(gè)點(diǎn)，我們在Vue中有個(gè)好處就是可以不用操作dom，直接操作數(shù)據(jù)。但是這其實(shí)也有Vue無法監(jiān)控的數(shù)據(jù)。如數(shù)組和對象。當(dāng)然這里只是指一小部分操作而已，大部分操作都是沒毛病的。接下來說說哪些數(shù)據(jù)操作Vue無法監(jiān)控

1、數(shù)組

由于 JavaScript 的限制，Vue 不能檢測以下變動的數(shù)組：

當(dāng)你利用索引直接設(shè)置一個(gè)項(xiàng)時(shí)，例如：vm.items[indexOfItem] = newValue
當(dāng)你修改數(shù)組的長度時(shí)，例如：vm.items.length = newLength

意思就是下面的情況都不能監(jiān)控到，因此這樣改變數(shù)組是不會刷新視圖的

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

實(shí)際上要解決這兩者的方法也簡單:

//解決第一類問題

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

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

vm.items.splice(newLength)

這樣就可以使得Vue監(jiān)控到數(shù)組操作的變化。當(dāng)然還有以下的操作Vue也可以監(jiān)控到的

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

2.對象

由于 JavaScript 的限制，Vue不能檢測對象屬性的添加或刪除！這個(gè)是重點(diǎn)，如果動態(tài)的添加對象屬性的話，那么請注意你添加對象屬性的方式是否為$set，不然的話視圖很有可能不更新。

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

vm.userProfile.age = 27;  //看著沒問題，實(shí)際上Vue無法監(jiān)控

因此解決辦法也是老辦法，用vm.$set(vm.userProfile, 'age', 27);

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

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

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

（2）V-for的用法

1.遍歷數(shù)組

這里直接擼碼，一看就懂

v-for = "(val,index) in arr" 
//得到的就是值和數(shù)組下標(biāo)

//習(xí)慣性用法

2.遍歷對象

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

//習(xí)慣性用法

CSS3樣式

當(dāng)然這里就不多說了。這個(gè)直接給出傳送門：css3用scale實(shí)現(xiàn)下劃線動畫

實(shí)現(xiàn)極簡地點(diǎn)選擇

這里就放主要的代碼吧，雖然總代碼也不多

html部分


  
    
      
        {{key}}
      
    
  
  
    
      {{value}}
      
        
          {{val}}

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);    //獲取數(shù)據(jù)，地點(diǎn)json
        for (let key of Object.keys(locationN)) {      //遍歷取出數(shù)據(jù)，取得鍵值
          for(let key2 of Object.keys(this.locationName)){    //遍歷data中l(wèi)ocationName，為了分類
            let pattern = new RegExp("["+key2.toString()+"]");   
            if(pattern.test(key)){               //正則匹配，如果找到就進(jìn)入對應(yīng)的分類對象中
              
              //判斷該類中是否存在該字母這地名集合，如A，B，C
              if (Array.isArray(this.locationName[key2][key.charAt(0)])) {
                //如果存在則直接推入地名
                this.locationName[key2][key.charAt(0)].push(locationN[key]);
                
                //沒有則先創(chuàng)建再推入地名
              } else {
                this.$set(this.locationName[key2],key.charAt(0),[]);
                this.locationName[key2][key.charAt(0)].push(locationN[key]);
              }
              break;
            }
          }
        }
      }
    }
  },
}

后話

到這里，我們就已經(jīng)實(shí)現(xiàn)了該Vue組件，如果想細(xì)看代碼或者使用的話，請點(diǎn)擊Vue-location_Select，當(dāng)然如果喜歡就不要吝嗇你的star哦！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

當(dāng)前標(biāo)題：Vue組件之極簡的地址選擇器的實(shí)現(xiàn)
當(dāng)前網(wǎng)址：http://weahome.cn/article/jgehpg.html