[toc]
你可以使用 v-on 指令來綁定并監聽 DOM 事件。綁定的內容可以是一個當前實例上的方法 (后面無需跟括號) 或一個內聯表達式。如果提供的是一個方法，則原生的 DOM event 會被作為第一個參數傳入，同時這個 event 會帶有 targetVM 屬性，指向觸發該事件的相應的 ViewModel：
~~~
<div id="demo">
<a v-on="click: onClick">觸發一個方法函數</a>
<a v-on="click: n++">觸發一個表達式</a>
</div>
new Vue({
el: '#demo',
data: {
n: 0
},
methods: {
onClick: function (e) {
console.log(e.target.tagName) // "A"
console.log(e.targetVM === this) // true
}
}
})
~~~
## 執行表達式
當在 v-repeat 里使用 v-on 時，targetVM 顯得很有用，因為 v-repeat 會創建大量子 ViewModel。但是，通過執行表達式的方式，把代表當前 ViewModel 數據對象的別名傳進去，會更方便直觀一些：
~~~
<ul id="list">
<li v-repeat="item in items" v-on="click: toggle(item)">
{{item.text}}
</li>
</ul>
new Vue({
el: '#list',
data: {
items: [
{ text: 'one', done: true },
{ text: 'two', done: false }
]
},
methods: {
toggle: function (item) {
item.done = !item.done
}
}
})
~~~
當你想要在表達式中訪問原來的 DOM event，你可以傳遞一個 $event 參數進去：
~~~
<button v-on="click: submit('hello!', $event)">Submit</button>
/* ... */
{
methods: {
submit: function (msg, e) {
e.stopPropagation()
}
}
}
/* ... */
~~~
## key 過濾器
當監聽鍵盤事件時，我們常常需要判斷常用的 key code。Vue.js 提供了一個特殊的只能用在 v-on 指令的過濾器：key。它接收一個表示 key code 的參數并完成判斷：
~~~
<!-- 只有當 keyCode 等于 13 時才調用方法 -->
<input v-on="keyup:submit | key 13">
~~~
它也預置了一些常用的按鍵名：
~~~
<!-- 效果同上 -->
<input v-on="keyup:submit | key 'enter'">
~~~
查看 API 參考：key 過濾器的全部預設參數。
## 為什么要在 HTML 中寫監聽器？
你可能會注意到整個事件監聽的方式違背了 “separation of concern” 的傳統理念。不必擔心，因為所有的 Vue.js 時間處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護困難。實際上，使用 v-on 還有更多好處：
它便于在 HTML 模板中輕松定位 JS 代碼里的對應方法實現。
因為你無須在 JS 里手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦。這會更易于測試。
當一個 ViewModel 被銷毀時，所有的事件監聽都會被自動移除。你無須擔心如何自行清理它們。
