资料来于官方文档：
http://cn.vuejs.org/guide/events.html
本文是在官方文档的基础上，更加细致的说明，代码更多更全。
简单来说，更适合新手阅读
（二十二）方法处理器
①v-on的标准用法
用于监听DOM事件，典型的就是v-on:click，处理的方法放在methods属性里
会默认传一个参数，代码如下：
<button @click="test">点击</button>
methods: {
test: function (evt) {
console.log(evt);
}
}
这里的evt，是标准的鼠标点击事件，类似jquery的click事件的回调函数中的参数。
可以通过this来找到data属性里的值（或许也能找到其他几个），例如：
data: {
items: "test"
},
methods: {
test: function (evt) {
console.log(this.items);
console.log(evt);
}
}
这里的this.items，就是data的items这个变量；
②内联语句处理器
给v-on事件传一个固定参数
<button @click="test('a')">点击搜索age</button>
当这个时候，函数的第一个参数就不是鼠标点击事件了，而是字符串a
test: function
(mes) {
console.log(mes);
}
mes的值是’a’
$event
如果需要给他一个像上面一样的鼠标点击事件时，则使用$event作为参数（他和不传参数时的默认鼠标事件对象是相同的）；
使用Vue实例的变量
如果需要传一个data属性里的值，则直接放属性名
例如：
<div id="app">
<a href="http://www.baidu.com" @click="test(items,
$event)">点击搜索age</a>
</div>
<script>
var test = {name: "test"};
var vm = new Vue({
el: '#app',
data: {
items: "test"
},
methods: {
test: function (msg, evt) {
console.log(msg);
evt.preventDefault();//阻止默认动作，比如这里是页面跳转
}
}
})
</script>
输出：test和BUTTON
③事件修饰符（针对v-on）
|
修饰符 |
效果 |
备注 |
|
.prevent |
阻止html元素的默认事件 |
类似evt.preventDefault() |
|
.stop |
阻止事件冒泡 |
|
|
keyup.数字 |
当该数字表示的按键弹起时 |
有别名 |
|
keyup.enter |
回车 |
按下回车时 |
|
keyup.tab |
Tab按钮 |
tab切入该input时 |
|
keyup.delete |
del键 |
会导致原始的delete删除功能失效 |
|
keyup.esc |
esc键 |
按下esc时 |
|
keyup.space |
空格键 |
不会使空格功能失效（即按下空格时，既空格，又触发事件） |
|
keyup.up |
键盘方向键的上 |
上键同时会使光标到输入框的最左边 （焦点在输入框时才生效，按键弹起时生效，下同） |
|
keyup.down |
键盘方向键的下 |
到输入框的最后面 |
|
keyup.left |
方向左键 |
光标左移 |
|
keyup.right |
方向右键 |
光标右移 |
|
.self |
当前元素本身（非子元素）时触发事件 |
类似冒泡的时候找最顶层，一般用于click之类的鼠标事件(1.0.16之后) |
|
.capture |
按照capture模式来处理 |
简单来说，根据我推测，是根据捕获顺序触发冒泡（原本模式是后捕获先冒泡，这个正好相反）（1.0.16之后） |
对于.self来说，例如以下代码：
<div id="app">
<div @click.self="test" class="a">
<div class="b">
</div>
</div>
</div>
<script>
var test = {name: "test"};
var vm = new Vue({
el: '#app',
data: {
items: "test"
},
methods: {
test: function (evt) {
console.log(evt);
}
}
})
</script>
只有当点击到非div class=’b’的区域时，才会触发事件；
④自定义按键别名：
规范：
Vue.directive(“on”),keyCode.别名 = 按键码;
示例：
Vue.directive("on").keyCode.z = 122;
这个指键盘码为122（小写z）的别名命名为z，当按键键盘的z键时（无论大小写），都会触发事件。
注意，这个要写在实例声明之后（推测是要含有该按键的template被创建后才有效）