iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 12
0
自我挑戰組

每天來點 Vue.js 吧系列 第 12

Vue 事件處理

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 方法,可以一次註冊多個事件監聽。

可以同時對按鈕添加 clickmouseenter,當點擊時 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

上一篇
Vue Conditional Rendering 條件渲染
下一篇
v-for 列表渲染
系列文
每天來點 Vue.js 吧30

尚未有邦友留言

立即登入留言