基本用法
以监听一个按钮的点击事件为例，设计一个计数器，每次点击都加1：
<div id = "app"> 点击次数：{{ counter }} <button @click="counter++">+1</button> </div>
<script>
new Vue({
el: '#app',
data:{
counter: 0
}
})
</script>
@click的表达式可以直接使用JavaScript语句，也可以是一个在Vue实例中methods选项内的函数名，比如再增加一个按钮，点击一次，计数器加10：
<div id = "app"> 点击次数：{{ counter }} <button @click="handleAdd()">+1</button> <button @click="handleAdd(10)">+10</button> </div>
<script>
new Vue({
el: '#app',
data:{
counter: 0
},
methods:{
handleAdd: function(count) {
count = count || 1;
//this指向当前Vue实例app
this.counter += count;
}
}
})
</script>
在methods中定义了我们需要的方法供@click调用，需要注意的是，@click调用的方法名后可以不加括号。此时，如果该方法有参数，默认会将原生事件对象event传入，可以尝试修改为@click="handleAdd"，然后在handleAdd内打印出count参数看看。在大部分业务场景中，如果方法不需要传入参数，为了简便可以不写括号。
这种在HTML元素上监听事件的设计看似将DOM与JavaScript紧耦合，违背分离的原理，实则刚好相反。因为通过HTML就可以知道调用的是哪个方法，将逻辑与DOM解耦，便于维护。最重要的是，当ViewModel销毁时，所有的事件处理器都会自动删除，无需自己清理。
Vue提供了一个特殊变量$event,用于访问原生DOM事件，例如下面的实例可以阻止链接打开：
<div id = "app"> <a href="http://www.apple.com" @click="handleClick('禁止打开',$event)">打开链接</a> </div>
<script>
new Vue({
el: '#app',
data:{
counter: 0
},
methods:{
handleAdd: function(message, event) {
event.preventDefault();
window.alert(message);
}
}
})
</script>
修饰符
在上例使用的event.preventDefault()也可以用Vue事件的修饰符来实现，在@绑定的事件后加小圆点"."，再跟一个后缀来使用修饰符。Vue支持以下修饰符：
♦ .stop
♦ .prevent
♦ .capture
♦ .self
♦ .once
具体的用法：
<!-- 阻止单击事件冒泡 --> <a @click.stop="handle"></a> <!-- 提交事件不再重载页面 --> <form @submit.prevent="handle"></form> <!-- 修饰符可以串联 --> <a @click.stop.prevent="handle"></a> <!-- 只有修饰符 --> <form @submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div @click.capture="handle">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div @click.self="handle">...</div> <!-- 只触发一次，组件同样适用 --> <div @click.once="handle">...</div>
在表单元素上监听键盘事件时，还可以使用按键修饰符，比如按下具体某个键时才调用方法：
<!-- 只有在keycode是13时调用vm.submit() --> <input @keyup.13="submit">
也可以自己配置具体按键：
Vue.config.keyCodes.f1 = 112; //全局定义后，就可以使用@keyup.f1
除了具体的某个keyCode外，Vue还提供了一些快捷名称，以下是全部的别名：
♦ .enter
♦ .tab
♦ .delete(捕获删除和退格键)
♦ .esc
♦ .space
♦ .up
♦ .down
♦ .left
♦ .right
这些按键修饰符也可以组合使用，或和鼠标一起配合使用：
♦ .ctrl
♦ .alt
♦ .shift
♦ .meta(Mac下是Command键，Windows下是窗口建)
<!-- Shift + S --> <input @keyup.shift.83="handleSave"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>
未完待续。。。