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 相关文章推荐
锋利的jQuery 要点归纳(三) jQuery中的事件和动画(上:事件篇)
Mar 24 Javascript
js post方式传递提交的实现代码
May 31 Javascript
jQuery实现点击标题输入详细信息
Apr 16 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
js实现鼠标悬停图片上时滚动文字说明的方法
Feb 17 Javascript
javascript实现汉字转拼音代码分享
Apr 20 Javascript
js获取当前年月日-YYYYmmDD格式的实现代码
Jun 01 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
Mar 02 Javascript
javascript前端和后台进行数据交互方法示例
Aug 07 Javascript
JSONObject与JSONArray使用方法解析
Sep 28 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 5.0对象模型深度探索之属性和方法
2008/03/27 PHP
php简单创建zip压缩文件的方法
2016/04/30 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
PHP微信H5支付开发实例
2018/07/25 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
让焦点自动跳转
2006/07/01 Javascript
javascript 文章截取部分无损html显示实现代码
2010/05/04 Javascript
jquery UI Datepicker时间控件的使用及问题解决
2016/04/28 Javascript
jquery实现自定义图片裁剪功能【推荐】
2017/03/08 Javascript
JS使用正则表达式验证身份证号码
2017/06/23 Javascript
详解webpack 多页面/入口支持&amp;公共组件单独打包
2017/06/29 Javascript
JS判断用户用的哪个浏览器实例详解
2018/10/09 Javascript
详解如何使用webpack打包多页jquery项目
2019/02/01 jQuery
layer iframe 设置关闭按钮的方法
2019/09/12 Javascript
javscript 数组扁平化的实现
2020/02/03 Javascript
[01:09:50]VP vs Pain 2018国际邀请赛小组赛BO2 第二场
2018/08/20 DOTA
[42:34]VP vs VG 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
Python操作mysql数据库实现增删查改功能的方法
2018/01/15 Python
django用户登录和注销的实现方法
2018/07/16 Python
TensorFlow实现iris数据集线性回归
2018/09/07 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Django 反向生成url实例详解
2019/07/30 Python
Python实现串口通信(pyserial)过程解析
2019/09/25 Python
使用Python爬取Json数据的示例代码
2020/12/07 Python
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
新郎新娘婚礼答谢词
2014/01/11 职场文书
合作投资意向书
2014/04/01 职场文书
化工专业求职信
2014/07/01 职场文书
2014班子成员自我剖析材料思想汇报
2014/10/01 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
python urllib库的使用详解
2021/04/13 Python
简单谈谈Python面向对象的相关知识
2021/06/28 Python
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技