Vue.js的事件处理
监听事件
我们可以用 v-on 指令监听 DOM 事件来触发一些 JavaScript 代码。
Box">
{{msg}}
Box",data:{
msg:1
},})
结果
方法事件处理器
许多事件处理的逻辑都很复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。因此 v-on 可以接收一个定义的方法来调用。
Box">
{{msg}}
Box",// 在 `methods` 对象中定义方法
methods:{
jia:function(event){
console.log(event)
}
}
})
结果
内联处理器方法
Box">
{{msg}}
Box",methods:{
jia:function(x){
console.log(x)
}
}
})
结果
my day
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题， Vue.js 为 v-on 提供了 事件修饰符。通过由点(.)表示的指令后缀来调用修饰符。
- .stop
- .prevent
- .capture
- .self
- .once
