1.修饰符(modifiers)
事件修饰符
<!-- 阻止单击事件继续传播 -->
<a @click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form @submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a @click.stop.prevent="doThis"></a>
<!-- 只有修饰符 -->
<form @submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<div @click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<div @click.self="doThis">...</div>
<!-- 点击事件将只会触发一次 -->
<a @click.once="doThis"></a>
<!-- 让移动端的滑动效果更加流畅 -->
<div v-on:scroll.passive="onScroll">...</div>
表单修饰符
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg" >
<!-- 自动将用户的输入值转为数值类型 -->
<input v-model.number="age" type="number">
2.watch和computed
watch的两种写法
// Method 1
watch:{
data(newVal,oldVal){
// 监听属性,属性发生改变即执行函数
}
}
// Method 2
watch:{
data:{
handler(newVal,oldVal){
// 监听属性,属性发生改变即执行函数
},
immediate: true, // 立即执行handler函数
deep: true // 深度监控
}
}
computed两种写法
// Method 1
computed{
data(){
// 定义的时候像个方法,用起来像个属性
}
}
// Method 2
computed{
data(){
get(){
// 获取值
},
set(val){
// 对计算属性设置值,这个值可以做些其他操作
}
}
两者区别
1.watch监听的属性必须在data中声明,而computed属性不能在data中声明
2.watch监听的属性发生变化才会执行对应代码,而computed是根据依赖属性的变化从而重新计算,若依赖属性没有发生变化,则直接从缓存中读取数据,不会重新进行渲染
3.watch里面可以有异步操作,而computed中是不允许的
网友评论