可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
html：
<div> <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> <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> <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); } }
4 事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive
<!--阻止单击事件继续传播--> <a v-on:click.stop="doThis"></a> <!--提交事件不再重载页面--> <form v-on:submit.prevent="onSubmit"></form> <!--串联修饰符--> <a v-on:click.stop.prevent="doThat"></a> <!--只有修饰符--> <form v-on:submit.prevent></form> <!--添加事件监听器时使用事件捕获模式--> <!--即元素自身触发的事件先在此处理，然后才交由内部元素--> <div v-on:click.capture="doThis">...</div> <!--在 event.target 为当前元素自身时触发处理函数--> <!--即事件不是从内部元素触发的--> <div v-on:click.self="doThat">...</div>
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
2.1.4 新增
<!--点击事件只会触发一次--> <a v-on:click.once="doThis"></a>
不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
2.3.0 新增
Vue 还对应 选项提供了 .passive 修饰符。
<!--滚动事件的默认行为将会被立即触发（不会等待 onScroll 事件完成）--> <!--包含 event.preventDefault() 的情况--> <div v-on:scroll.passive="onScroll">...</div>
这个 .passive 修饰符尤其能够提升移动端的性能。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
5 按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!--keyCode 为 13 时调用 vm.submit()--> <input v-on:keyup.13="submit">
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!--使用按键别名--> <input v-on:keyup.enter="submit"> <!--使用缩写语法--> <input @keyup.enter="submit">
全部的按键别名：
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
可以通过全局 config.keyCodes 对象：
//自定义按键的修饰符别名 Vue.config.keyCodes.f1 = 112;
自动匹配按键修饰符
2.5.0 新增
你也可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符：
<input @keyup.page-down="onPageDown">
在上面的例子中，处理函数仅在 $event.key === 'PageDown' 时被调用。
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，它们的内置别名应该是首选。
6 系统修饰键
2.1.0 新增
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta