4.1. 監聽事件的Vue處理
Vue提供了協助我們為標簽綁定時間的方法，當然我們可以直接用dom原生的方式去綁定事件。Vue提供的指令進行綁定也是非常方便，而且能讓ViewModel更簡潔，邏輯更徹底。所以還是推薦大家使用的。
Vue提供了v-on指令幫助我們進行事件的綁定。 基本的內聯事件處理方法[官方demo]：
<div id="example-1">
<!-- 為按鈕綁定點擊事件，執行counter += 1的任務。 -->
<button v-on:click="counter += 1">增加 1</button>
<p>這個按鈕被點擊了 {{ counter }} 次。</p>
</div>
<script>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
</script>
4.2. 事件處理方法集成到Vue對象
內聯的方式綁定的事件，只能處理簡單的事件的處理邏輯。復雜的情況還是封裝到js中最方便，也不容易出錯。 Vue對象中可以添加methods屬性，開發者可以把事件處理函數的邏輯放到methods中。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue入門之動態顯示表格</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{ number }}</p>
<input type="button" name="btnGetNumber" value="增加[綁定事件處理器]" v-on:click="getNumber">
<input type="button" name="btnGetNumber" value="增加[內聯方法調用]" v-on:click="getNumber()">
</div>
<script>
var app = new Vue({
el: '#app',
data: {
number: 1
},
methods: {
// 事件響應方法的邏輯代碼
getNumber: function (e) {
this.number += 1; // 不管是內聯方法調用，還是綁定事件處理器兩種方式執行事件響應方法的時候 this都是指向 app
}
}
});
</script>
</body>
</html>
4.3. 事件修飾符
官網上寫的非常好，這塊就直接用管網的吧。在事件處理程序中調用 event.preventDefault() 或 event.stopPropagation() 是非常常見的需求。盡管我們可以在 methods 中輕松實現這點，但更好的方式是：methods 只有純粹的數據邏輯，而不是去處理 DOM 事件細節。 為了解決這個問題， Vue.js 為 v-on 提供了 事件修飾符。通過由點(.)表示的指令后綴來調用修飾符。
- .stop
- .prevent
- .capture
- .self
- .once
<!-- 阻止單擊事件冒泡 --> <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> <!-- 只當事件在該元素本身（而不是子元素）觸發時觸發回調 --> <div v-on:click.self="doThat">...</div> <!-- the click event will be triggered at most once --> <a v-on:click.once="doThis"></a>
4.4. 按鍵修飾符
在監聽鍵盤事件時，我們經常需要監測常見的鍵值。 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
- .ctrl
- .alt
- .shift
- .meta
4.5. 事件綁定的簡寫
Vue中屬性的綁定的簡寫直接是: === 'v-bind:'
而事件的縮寫是直接變成@. 也就是說： v-on: === @ 看下面的例子：
<!-- 完整語法 -->
<a v-on:click="doSomething"></a>
<!-- 縮寫 -->
<a @click="doSomething"></a>
4.6. 事件綁定總結
Vue為了方便大家進行開發，提供了事件的相關的封裝，可以讓我們方便我們用Vue對事件進行開發，尤其是v-on指令的非常方便的跟Vue對象中methods進行配合進行復雜的事件處理，非常方便。另外事件的事件修飾符和按鍵修飾符也可以讓Vue事件這塊錦上添花。
Github地址：源碼下載
其他詳情請參考：http://aicoder.com/vue/preview/all.html
