- {{value}}
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 // 不是响应性的 实际上要解决这两者的方法也简单: //解决第一类问题 vm.$set(vm.items, indexOfItem, newValue) //为了解决第二类问题,你可以使用 splice: vm.items.splice(newLength) 这样就可以使得Vue监控到数组操作的变化。当然还有以下的操作Vue也可以监控到的 push() pop() shift() unshift() splice() sort() 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" //得到的就是值和数组下标 //习惯性用法