本文实例讲述了Vue 事件处理操作。分享给大家供大家参考，具体如下：
1 监听事件
可以用
v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。html：
<div id="app1">
<button v-on:click="counter +=1">递增</button>
<p>按钮已被点击 {{ counter }} 次。</p>
</div>js：
var app1 = new Vue({
el: "#app1",
data: {
counter: 0
}
});效果：
2 事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在
v-on 指令中是不可行的。因此v-on还可以接收一个需要调用的方法名称。html：
<div id="app2">
<button v-on:click="greet">问候</button>
</div>js：
var app2 = new Vue({
el: "#app2",
data: {
name: 'Deniro'
},
methods: {
greet: function (event) {
//这里的 this 指向的是当前 Vue 实例
console.log('你好 ' + this.name + '!');
if (event) {
console.log(event.target.tagName);
}
}
}
});效果：
也可以直接调用 Vue 实例定义的函数：
3 内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
html：
<div id="app3">
<button v-on:click="greet('你好')">问候</button>
</div>js：
var app3 = new Vue({
el: "#app3",
methods: {
greet: function (message) {
console.log(message);
}
}
});有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量
$event 把它传入方法：html：
<button v-on:click="warn('表单已被禁用',$event)">提交</button>js：
methods: {
...
warn: function (message,event) {
//访问原生对象
if(event){
event.preventDefault();
}
console.log(message);
