vue 事件绑定 处理-

1，可以用v-on：来监听事件 1.1 直接在html中写简单的逻辑代码

增加 1

这个按钮被点击了 {{ counter }} 次。

1.2 绑定一个函数

Greet

var example2 = new Vue({
el: ‘#example-2’,
data: {
name: ‘Vue.js’
},
// 在 methods 对象中定义方法
methods: {
greet: function (event) {
// this 在方法里指当前 Vue 实例
alert(‘Hello ’ + this.name + ‘!’)
// event 是原生 DOM 事件

if (event) {
alert(event.target.tagName)
}
}
}
})

1.3 可以直接在html中传入参数

Say hi Say what

new Vue({
el: ‘#example-3’,
methods: {
say: function (message) {
alert(message)
}
}
})

1.4 想要传入event？可以这样子

Submit

methods: {

warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) event.preventDefault()
alert(message)
}
}

1.5 事件修饰符
常用的比如stopPropagation(),event.preventDefault()，可以这样子来

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在 methods 中轻松实现这点，但更好的方式是：methods 只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了 事件修饰符。通过由点 (.) 表示的指令后缀来调用修饰符。

• .stop
• .prevent
• .capture
• .self

• .once

•