一、计算属性computed
1.在computed属性对象中定义计算属性的方法
2.使用:{{方法名}}
3.通过getter/setter实现对属性数据的显示和监视
4.计算属性存在缓存, 多次读取只执行一次getter计算
5.一定有返回值,返回值就是计算属性要显示的内容
6.不能做异步操作
7.有缓存,只有依赖的值发生变化才会重新计算
computed: {
xxx() {
},
xxx: {
get() {},
set(val) {}
}
}
二、监视属性watch
1.监视一个已存在的属性,一旦属性发生变化,就会触发回调
2.没有返回值
3.可以进行异步操作
4.deep:true开启深度监视
5.immediate:true 页面加载立即监视
watch: {
xxx(newVal, oldVal) {},
xxx: {
handler(newVal, oldVal) {},
immediate: true
},
xxx: {
handler(newVal, oldVal) {},
deep: true
},
}
三、事件指令
1.@click="事件回调函数"
(1)如果没有传值,则直接调用
(2)如果传入参数,在函数形参上可以使用...args的方式拿到所有参数,如果没有传入事件对象,则在函数内部没有事件对象
(3)传入事件对象,$event
2. @click.prevent 阻止默认事件
@click.stop 阻止冒泡
3. @keyup.enter 和@keyup.13 是一样的