Vue组件之极简的地址选择器的实现-创新互联-成都创新互联网站建设

关于创新互联

多方位宣传企业产品与服务 突出企业形象

公司简介 公司的服务 荣誉资质 新闻动态 联系我们

Vue组件之极简的地址选择器的实现-创新互联

一、前言

创新互联服务项目包括达孜网站建设、达孜网站制作、达孜网页制作以及达孜网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,达孜网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到达孜省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

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

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 // 不是响应性的

文章标题:Vue组件之极简的地址选择器的实现-创新互联
转载注明:http://kswsj.cn/article/cesdos.html

其他资讯