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


Posted in Javascript onMay 31, 2018

一、前言

本文用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样式

当然这里就不多说了。这个直接给出传送门: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="#" 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哦!

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

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编
Jul 01 Javascript
JS 面向对象的5钟写法
Jul 31 Javascript
javascript appendChild,innerHTML,join性能比较代码
Aug 29 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
JavaScript高级程序设计 DOM学习笔记
Sep 10 Javascript
将input file的选择的文件清空的两种解决方案
Oct 21 Javascript
浅析Cookie中的Path与domain
Dec 18 Javascript
javascript中offset、client、scroll的属性总结
Aug 13 Javascript
webpack+vue.js实现组件化详解
Oct 12 Javascript
Jquery Easyui选项卡组件Tab使用详解(10)
Dec 18 Javascript
js实现3d悬浮效果
Feb 16 Javascript
AngualrJs清除定时器遇到的坑
Oct 13 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 #Javascript
Vue实现侧边菜单栏手风琴效果实例代码
May 31 #Javascript
Node.js笔记之process模块解读
May 31 #Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 #Javascript
用JS实现根据当前时间随机生成流水号或者订单号
May 31 #Javascript
Vue2 轮播图slide组件实例代码
May 31 #Javascript
vue2.0+vuex+localStorage代办事项应用实现详解
May 31 #Javascript
You might like
php查看session内容的函数
2008/08/27 PHP
php join函数应用
2011/05/04 PHP
PHP中IP地址与整型数字互相转换详解
2014/08/20 PHP
PHP中使用Session配合Javascript实现文件上传进度条功能
2014/10/15 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
微信接口生成带参数的二维码
2017/07/31 PHP
kindeditor 加入七牛云上传的实例讲解
2017/11/12 PHP
Ajax请求PHP后台接口返回信息的实例代码
2018/08/21 PHP
input:checkbox多选框实现单选效果跟radio一样
2014/06/16 Javascript
jQuery+css实现百度百科的页面导航效果
2014/12/16 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
如何高效率去掉js数组中的重复项
2016/04/12 Javascript
jQuery EasyUI 入门必看
2016/06/03 Javascript
javascript 中的try catch应用总结
2017/04/01 Javascript
ES6新增的math,Number方法
2017/08/06 Javascript
Express本地测试HTTPS的示例代码
2018/06/06 Javascript
回顾Javascript React基础
2019/06/15 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
2020/04/11 Javascript
浅谈python中的面向对象和类的基本语法
2016/06/13 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
Python----数据预处理代码实例
2019/03/20 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
加拿大休闲和工业服装和鞋类零售商:L’Équipeur
2018/01/12 全球购物
股份合作协议书
2014/04/12 职场文书
环保倡议书100字
2014/05/15 职场文书
影子教师研修方案
2014/06/14 职场文书
我爱祖国演讲稿
2014/09/02 职场文书
个人工作作风整改措施思想汇报
2014/10/13 职场文书
2015元旦晚会主持人开场白+结束语
2014/12/14 职场文书
2014年政教处工作总结
2014/12/20 职场文书
2015年教研工作总结
2015/05/23 职场文书
Golang全局变量加锁的问题解决
2021/05/08 Golang
如何理解及使用Python闭包
2021/06/01 Python
使用Django框架创建项目
2022/06/10 Python