vue指令以及数组的更新检测

一、vue指令
是带有 v- 前缀的特殊属性

• v-bind 动态绑定属性 可以缩写v-bind:src => :src
  【注意】在:style里，key名需要采用驼峰式的写法，不然会报错的！
• v-if 动态创建/删除
• v-show 动态显示/隐藏
• v-on:click 绑定事件 可以缩写 v-on:click => @click
  v-on事件修饰符：
  （1） .stop 可以阻止事件的冒泡
  （2）.prevent 可以取消事件的默认行为
  （3）.once 只会触发一次
  （4）.self 只会自身触发
• v-for 遍历
  不仅可以用来遍历数组，还可以用来遍历对象。
  在vue中可以通过v-for来循环数据的通知循环dom，语法是item in/of items，接收第二个参数是索引 (item,index) of items。
  还可以遍历对象，第一个参数是value，第二个是key，第三个依然是索引，(value,key,index) in person。
• v-model 双向绑定表单
  v-model的原理： （1）给输入框绑定value属性 （2）绑定input事件（变量=输入框里面的值）
  v-model指令只能用在表单域（input/textarea/checkbox等）里面，不能用在例如div上面。
  v-model的修饰符：
  （1）.lazy 默认是同步更新，如果加了.lazy修饰符，等光标离开后才会进行同步的更新。
  （2）.number 这个值无法被parseFloat解析的时候，会原样返回。如果能够被解析，返回解析后的数值。
  （3） .trim 去掉首尾的空格
• v-cloak 防止表达式闪烁

二、数组更新检测

a. 使用以下方法操作数组，可以检测变动

• push() 数组的添加元素 返回数组的长度
• pop() 从后面删除一个元素 返回删除的元素
• unshift() 从数组的前面追加元素 返回数组的长度
• shift() 从前面删除一个元素 返回删除的元素
• splice() 数组的剪贴、删除、插入
• sort() 数组的排序
• reverse() 数组的反转

b. filter(), concat() 和 slice() ,map(),新数组替换旧数组

c. 不能检测以下变动的数组

​ 由于 JavaScript 的限制，Vue 不能检测以下数组的变动：

​ 1.当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue

​ 1-1.Vue.set(vm.items, indexOfItem, newValue)

​ Vue.set(vm.arr, 2, 30) //如果在实例中可以通过 this.$set(vm.arr, 2, 30)

​ 1-2 vm.items.splice(indexOfItem, 1, newValue)

​ 2.当你修改数组的长度时，例如：vm.items.length = newLength

​ vm.items.splice(newLength)
​