欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue组件之极简的地址选择器的实现

程序员文章站 2022-06-23 21:54:41
一、前言 本文用vue完成一个极简的地点选择器,我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说,我们先上demo图。因为每个人的需要不一样,...

一、前言

本文用vue完成一个极简的地点选择器,我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说,我们先上demo图。因为每个人的需要不一样,我这边就不在实现更多的功能,所以留有更大的空间供大家增删改。

Vue组件之极简的地址选择器的实现

github地址:vue-location_select

二、需要学习的地方

(1)数据更新vue无法监控

首先要说一下的就是这个点,我们在vue中有个好处就是可以不用操作dom,直接操作数据。但是这其实也有vue无法监控的数据。如数组和对象。当然这里只是指一小部分操作而已,大部分操作都是没毛病的。接下来说说哪些数据操作vue无法监控

1、数组

由于 javascript 的限制,vue 不能检测以下变动的数组:

  1. 当你利用索引直接设置一个项时,例如:vm.items[indexofitem] = newvalue
  2. 当你修改数组的长度时,例如: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也可以监控到的

  1. push()
  2. pop()
  3. shift()
  4. unshift()
  5. splice()
  6. sort()
  7. 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样式

当然这里就不多说了。这个直接给出传送门:

实现极简地点选择

这里就放主要的代码吧,虽然总代码也不多

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="#" rel="external nofollow" rel="external nofollow" >{{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="#" rel="external nofollow" rel="external nofollow" >{{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哦!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。