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 相关文章推荐
可拖动窗口,附带鼠标控制渐变透明,开启关闭功能
Jun 26 Javascript
js AspxButton的客户端操作
Jun 26 Javascript
javascript学习笔记(十四) window对象使用介绍
Jun 20 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
javascript 表格内容排序 简单操作示例代码
Jan 03 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
深入理解js函数的作用域与this指向
May 28 Javascript
微信小程序 http请求详细介绍
Oct 09 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
Sep 04 Javascript
配置eslint规范项目代码风格
Mar 11 Javascript
vue2.x数组劫持原理的实现
Apr 19 Javascript
在react-antd中弹出层form内容传递给父组件的操作
Oct 24 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 register_globals 值为on与off的理解
2013/09/26 PHP
WordPress中对访客评论功能的一些优化方法
2015/11/24 PHP
PHP基于cookie实现统计在线人数功能示例
2019/01/16 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
原生js实现半透明遮罩层效果具体代码
2013/06/06 Javascript
Node.js(安装,启动,测试)
2014/06/09 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
js实现鼠标感应向下滑动隐藏菜单的方法
2015/02/20 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
2016/07/04 Javascript
基于vue-cli vue-router搭建底部导航栏移动前端项目
2018/02/28 Javascript
[jQuery] 事件和动画详解
2019/03/05 jQuery
通过js示例讲解时间复杂度与空间复杂度
2019/08/06 Javascript
简介二分查找算法与相关的Python实现示例
2015/08/26 Python
Tensorflow卷积神经网络实例进阶
2018/05/24 Python
Python3操作MongoDB增册改查等方法详解
2020/02/10 Python
python编程进阶之类和对象用法实例分析
2020/02/21 Python
Pytorch上下采样函数--interpolate用法
2020/07/07 Python
PyCharm2020最新激活码+激活码补丁(亲测最新版PyCharm2020.2激活成功)
2020/11/25 Python
玩具反斗城西班牙网上商城:ToysRUs西班牙
2017/01/19 全球购物
英国第一的市场和亚马逊替代品:OnBuy
2019/03/16 全球购物
什么是GWT的Module
2013/01/20 面试题
销售文员岗位职责
2013/11/29 职场文书
大学生创业计划书的格式要求
2013/12/29 职场文书
厨师个人自我鉴定范文
2014/04/19 职场文书
责任心演讲稿
2014/05/14 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
关于保护环境的建议书
2014/08/26 职场文书
普通话演讲稿
2014/09/03 职场文书
学校总务处领导班子民主生活会对照检查材料思想汇报
2014/09/27 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
国际贸易实训报告
2014/11/05 职场文书
2014年统计工作总结
2014/11/21 职场文书
寒山寺导游词
2015/02/03 职场文书
开学第一周值周总结
2015/07/16 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书