Vue學習筆記之事件處理

上一篇：Vue學習筆記之列表渲染

事件監聽

可以用v-on指令監聽DOM事件，但是大部分事件都比較複雜，因此，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!'

$event代表DOM的原始事件。

事件修飾符

修飾符是由點開頭的指令字尾來表示的。

• 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 只會阻止對元素自身的點選。
不要把.passive 和 .prevent 一起使用，因為 .prevent 將會被忽略，同時瀏覽器可能會向你展示一個警告。請記住，.passive 會告訴瀏覽器你不想阻止事件的預設行為。

按鍵修飾符

<!-- 同上 -->
<input v-on:keyup.enter="submit">

全部的按鍵別名：

• enter
• tab
• delete (捕獲“刪除”和“退格”鍵)
• esc
• space
• up
• down
• left
• right

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

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

.exact 修飾符允許你控制由精確的系統修飾符組合觸發的事件。

滑鼠按鈕修飾符

• left
• right
• middle

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