1.基础指令
1.0 v-text v-html
更新DOM对象节点内容
语法:
v-text="vue数据变量"
v-html="vue数据变量"
v-text不解析html结构,v-html可以解析html结构
两者都会覆盖插值表达式
1.1v-show和v-if
用于显示隐藏
语法:
v-show="vue变量" display:none(频繁切换时使用)
v-if="vue变量" 从DOM树移除,有性能问题 还可以接v-else使用
1.2 v-for
列表渲染,循环生成数据
语法:
v-for=“(value ,index)in arr ” :key="index/id"
可以遍历数组,对象,和数字(基本不用)
2.diff算法
2.0 触发v-for数据检测
会改变原数组的方法会被v-for检测到:
数组变更方法, 就会导致v-for更新, 页面更新
数组非变更方法, 返回新数组, 就不会导致v-for更新, 可采用覆盖数组或this.$set()
会触发v-for检测:reverse() sort() push() unshift() pop() shift() splice()
不会触发v-for检测: concat() filter() slice()
注意: vue不能监测到数组里赋值的动作而更新, 可使用Vue.set() 或者this.$s