事件處理
監聽事件
可以用 v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。
示例：
事件處理方法
然後許多事件處理邏輯會更復雜，所以直接把 JavaScript 代碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要調用的方法名稱。
示例：
當然，也可以通過 JavaScript 直接調用：
vm.greet() // =>> 'Hello Vue.js'
內聯處理器中的方法
除了直接綁定到一個方法中，也可以在內聯 JavaScript 語句中調用方法：
有時也需要在內聯語句處理器中訪問原始的 DOM 事件。可以用特殊變量 $event 把它傳入方法：
事件修飾符
在事件處理程序中調用 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"></a>
<!-- 修飾符可以串聯 -->
<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 還對應 addEventListener 中的 passive 選項提供了 .passive 修飾符。
<!-- 滾動事件的默認行爲（即滾動行爲）將會立即觸發 -->
<!-- 而不會等待 "onScroll" 完成 -->
<!-- 這其中包含 "event.preventDefault()" 的情況 -->
<div v-on:scroll.passive="OnScroll">...</div>
這個 .passive 修飾符尤其能夠提升移動端的性能。
不要把 .passive 和 .prevent 一起使用，因爲 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住， .passive 會告訴瀏覽器你不想阻止事件的默認行爲。
按鍵修飾符
在監聽鍵盤事件時，我們經常需要檢查詳情的按鍵。 Vue 允許爲 v-on 在監聽鍵盤事件時添加按鍵修飾符：
<!-- 只有在 'key' 是 'Enter' 時調用 vm.submit() -->
<input v-on:click.keyup.enter="submit">
你可以直接將 KeyboardEvent.key 暴露的任意有效鍵名轉換爲 kebab-case 來修飾符。
<input v-on:keyup.page-down="onPageDown">
在上述示例中，處理函數只會在 $event.key 等於 PageDown 時被調用。
按鍵碼
keyCode 的事件用法已經被廢棄了並可能不會被最新的瀏覽器支持。
使用 keyCode 特性也是允許的：
<input v-on:keyup.13="submit">
爲了在必須要的情況下支持舊瀏覽器， Vue提供了絕大多數常用的按鍵碼的別名：
.enter
.tab
.delete(捕獲“刪除”和“退格”)
.esc
.space
.up
.down
.left
.right
有一些按鍵(.esc 以及有所的方向鍵) 在 IE9中有不同的 key 值，如果你想支持 IE9，這些內置的別名應該是首選。
還可以通過全局 config.keyCodes 對象自定義按鍵修飾符別名：
// 可以使用 v-on:keyup.f1
Vue.config.keyCodes.f1 = 112
系統修飾符
可以用如下修飾符來實現僅在按下相應鍵時才觸發鼠標或鍵盤事件的監聽器。
.ctrl
.alt
.shift
.meta
注意：在 Mac 系統鍵盤上，meta 對應 command 鍵 (⌘)。在 Windows 系統鍵盤 meta 對應 Windows 徽標鍵 (⊞)。在 Sun 操作系統鍵盤上，meta 對應實心寶石鍵 (◆)。在其他特定鍵盤上，尤其在 MIT 和 Lisp 機器的鍵盤、以及其後繼產品，比如 Knight 鍵盤、space-cadet 鍵盤，meta 被標記爲“META”。在 Symbolics 鍵盤上，meta 被標記爲“META”或者“Meta”。
例如：
<!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div @click.ctrl="doSomething">Do something</div>
請注意修飾鍵與常規按鍵不同，在和 keyup 事件一起用時，事件觸發時修飾鍵必須處於按下狀態。換句話說，只有在按住 ctrl 的情況下釋放其它按鍵，才能觸發 keyup.ctrl。而單單釋放 ctrl 也不會觸發事件。如果你想要這樣的行爲，請爲 ctrl 換用 keyCode：keyup.17。
.exact 修飾符
.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。
<!-- 即使 Alt 或 Shift 被一同按下時也會觸發 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的時候才觸發 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 沒有任何系統修飾符被按下的時候才觸發 -->
<button @click.exact="onClick">A</button>
鼠標按鈕修飾符
2.2.0 新增
.left.right.middle
這些修飾符會限制處理函數僅響應特定的鼠標按鈕。
爲什麼在HTML中監聽事件？
你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但不必擔心，因爲所有的 Vue.js 事件處理方法和表達式都嚴格綁定在當前視圖的 ViewModel 上，它不會導致任何維護上的困難。實際上，使用 v-on 有幾個好處：
-
掃一眼 HTML 模板便能輕鬆定位在 JavaScript 代碼裏對應的方法。
-
因爲你無須在 JavaScript 裏手動綁定事件，你的 ViewModel 代碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易於測試。
-
當一個 ViewModel 被銷燬時，所有的事件處理器都會自動被刪除。你無須擔心如何清理它們。