1.深度监视:
1.1.vue中的watch默认不监测对象内部值的改变(一层)
1.2.配置deep:true可以监测对象内部值改变(多层)
备注:
(1)vue自身可以监测对象内部值的改变,但vue提供的watch默认不可以
(2)使用watch时根据数据的具体结构,决定是否采用深度监视
2.computed和watch之间的区别:
2.1.computed能完成的功能,watch都可以完成
2.2.watch能完成的功能,computed不一定能完成,例如:watch可以进行异步操作
两个重要的小原则:
(1)所被vue管理的函数,最好写成普通函数,这样this的指向才是vm 或 组件实例对象
(2)所有不被vue所管理的函数(定时器的回调函数、ajax的回调函数、promise的回调函数等),最好写成箭头函数,这样this指向的才是vm 或 组件实例对象
3.绑定样式:
3.1.class样式
写法:class="xxx" xxx可以是字符串、对象、数组
字符串写法适用于:类名不确定,要动态获取
对象写法适用于:要绑定多个样式,个数不确定,名字也不确定
数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用
3.2.style样式
:style="{fontSize: xxx}" 其中xxx是动态赋值
:style="[a,b]" 其中a,b是样式对象
4.条件渲染:
4.1.v-if
写法:
(1)v-if="表达式"
(2)v-else-if="表达式"
(3)v-else="表达式"
适用于:切换频率较低的场景
特点:不展示的DOM元素直接被移除
注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被“打断”
4.2.v-show
写法:v-show="表达式"
适用于:切换频率较高的场景
特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉
4.3.备注:使用v-if时,元素可能无法被获取,而使用v-show一定可以获取到
5.v-for指令:
5.1.用于展示列表数据
5.2.语法:v-for="(item,index) in xxx" :key="yyy"
5.3.可遍历:数组、对象、字符串(用的很少)、指定次数(用的很少)