v-on

要對模板中的元素添加 Event Listener，Vue 提供 v-on 指令可以針對 元素 綁定 Event Listener，並在事件發生時調用 handler 執行。除此之外，對於 普通的元素 v-on 只能監聽 原生 DOM 事件，對於 自定義組件元素 則可以監聽自定義事件、原生 DOM 事件

自定義事件 會於 組件 篇提及，目前集中於對 普通的元素 監聽 原生 DOM 事件 的討論。

v-on 使用方法

v-on 基本寫法為 v-on.事件類型修飾符="事件觸發時運行的程式碼" ，其中事件類型修飾符代表要監聽的事件類型，而後方 "" 則需填入觸發時運行的程式碼，觸發時運行程式碼可填入以下三種類型：

1. function
2. Inline Statement
3. Object

1. function(Method Event Handlers)

在 function 寫法，監聽 原生事件 時，Event（原生 DOM Event，一個物件。 規範定義）會作為 function 預設的唯一參數提供使用。

透過以下簡單的 console.log(event) 可以查看該事件，於需要原生 DOM Event 時可用。

<main>
  <button v-on:click="add">
    buttom
  </button>
  <span>count: {{ count }}</span>
</main>

const vm = new Vue({
  el: "main",
  data: {
    count: 0
  },
  methods: {
    add(event) {
      console.log(event);
    }
  }
});`

範例

上方介紹完基本的 v-on，接著便使用 v-on 建立簡單的事件監聽吧，這裡的情境為，一旦按鈕觸發點擊，count 便加上一：

<main>
  <button v-on:click="add">
    buttom
  </button>
  <span>count: {{ count }}</span>
</main>

const vm = new Vue({
  el: "main",
  data: {
    count: 0
  },
  methods: {
    add() {
      this.count++;
    }
  }
});

以上為使用 function 的方法，一旦發生 click 事件，該 function 便被觸發執行。

2. Inline statement

使用 Inline statement，與使用 function 只有 原生 DOM Event 作為唯一參數不同，可以定義除 event 外的其他 參數，若是需要使用 原生 DOM Event 則可以傳入 $event（Vue 定義，代表 原生 DOM Event 的特殊 variable）。

以下為使用 Inline statement 透過 $event 訪問 原生 DOM 事件。（這次用 codepen，所以就無法打印過大的事件物件，於是只打印事件名稱 XD）

3. Object

使用 Object 方法，可以一次註冊多個事件監聽。

可以同時對按鈕添加 click、mouseenter，當點擊時 count 加一，mouseenter 滑鼠移入時顏色變換。

<main>
  <button v-on="{ click:add, mouseenter: changeColor }">
    buttom
  </button>
  <span :style="{ color }">count: {{ count }}</span>
</main>

const vm = new Vue({
  el: "main",
  data: {
    count: 0,
    color: "#000"
  },
  methods: {
    add() {
      this.count++;
    },
    changeColor() {
      this.color = this.color === "#19caad" ? "#000" : "#19caad";
    }
  }
});

若是文中有任何錯誤、錯字、想討論的內容，歡迎各位大大不吝鞭笞指正、交流分享，筆者不慎感激 ✦ ✦ ✦

▶︎ 筆者 github：https://github.com/YUN-RU-TSENG
▶︎ 老王賣瓜之筆者另一篇鐵人：每天來點 CSS Specification

▶︎ 倘若不斷向深處扎根，似乎就能茁壯成長 - RM

參考資料：

1. Vuejs.org 2.x