Vue组件之极简的地址选择器的实现-创新互联
一、前言
创新互联服务项目包括达孜网站建设、达孜网站制作、达孜网页制作以及达孜网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,达孜网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到达孜省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!本文用Vue完成一个极简的地点选择器,我们接下来带大家实现这个。当然其中也有一些值得学习与注意的地方。话不多说,我们先上demo图。因为每个人的需要不一样,我这边就不在实现更多的功能,所以留有更大的空间供大家增删改。
GitHub地址:Vue-location_Select
二、需要学习的地方
(1)数据更新Vue无法监控
首先要说一下的就是这个点,我们在Vue中有个好处就是可以不用操作dom,直接操作数据。但是这其实也有Vue无法监控的数据。如数组和对象。当然这里只是指一小部分操作而已,大部分操作都是没毛病的。接下来说说哪些数据操作Vue无法监控
1、数组
由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
- 当你利用索引直接设置一个项时,例如:
vm.items[indexOfItem] = newValue
- 当你修改数组的长度时,例如:
vm.items.length = newLength
意思就是下面的情况都不能监控到,因此这样改变数组是不会刷新视图的
var vm = new Vue({ data: { items: ['a', 'b', 'c'] } }) vm.items[1] = 'x' // 不是响应性的, vm.items.length = 2 // 不是响应性的
网页题目:Vue组件之极简的地址选择器的实现-创新互联
URL分享:http://pwwzsj.com/article/cesdos.html