事件處理

• 監聽事件
  可以用 v-on 指令監聽 DOM 事件，並在觸發時執行一些 JavaScript 程式碼。

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})
 

事件處理方法

然而許多事件處理邏輯會更為複雜，所以直接把 JavaScript 程式碼寫在 v-on 指令中是不可行的。因此 v-on 還可以接收一個需要呼叫的方法名稱。

<div id="example-2">
  <!-- `greet` 是在下面定義的方法名 -->
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 `methods` 物件中定義方法
  methods: {
    greet: function (event) {
      // `this` 在方法裡指向當前 Vue 例項
      alert('Hello ' + this.name + '!')
      // `event` 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接呼叫方法
example2.greet() // => 'Hello Vue.js!'
 

內聯處理器中的方法

除了直接繫結到一個方法，也可以在內聯 JavaScript 語句中呼叫方法：

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})
 

有時也需要在內聯語句處理器中訪問原始的 DOM 事件。可以用特殊變數 $event 把它傳入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 現在我們可以訪問原生事件物件
    if (event) event.preventDefault()
    alert(message)
  }
}

事件修飾符

在事件處理程式中呼叫 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"></form>

<!-- 修飾符可以串聯 -->
<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 在監聽鍵盤事件時新增按鍵修飾符：

<!-- 只有在 `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

可以通過全域性 config.keyCodes 物件自定義按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

自動匹配按鍵修飾符

可直接將 KeyboardEvent.key 暴露的任意有效按鍵名轉換為 kebab-case 來作為修飾符：

<input @keyup.page-down="onPageDown">

在上面的例子中，處理函式僅在 $event.key === ‘PageDown’ 時被呼叫。

有一些按鍵 (.esc 以及所有的方向鍵) 在 IE9 中有不同的 key 值, 如果你想支援 IE9，它們的內建別名應該是首選。

系統修飾鍵

可以用如下修飾符來實現僅在按下相應按鍵時才觸發滑鼠或鍵盤事件的監聽器。

.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>

滑鼠按鈕修飾符

.left
.right
.middle

這些修飾符會限制處理函式僅響應特定的滑鼠按鈕。

為什麼在 HTML 中監聽事件?

你可能注意到這種事件監聽的方式違背了關注點分離 (separation of concern) 這個長期以來的優良傳統。但不必擔心，因為所有的 Vue.js 事件處理方法和表示式都嚴格繫結在當前檢視的 ViewModel 上，它不會導致任何維護上的困難。實際上，使用 v-on 有幾個好處：

掃一眼 HTML 模板便能輕鬆定位在 JavaScript 程式碼裡對應的方法。

因為你無須在 JavaScript 裡手動繫結事件，你的 ViewModel 程式碼可以是非常純粹的邏輯，和 DOM 完全解耦，更易於測試。

當一個 ViewModel 被銷燬時，所有的事件處理器都會自動被刪除。你無須擔心如何清理它們。