Vue.js 學習旅程Mile 9 – Event Handling 事件處理篇-1：methods & v-on

tags: w3HexSchool Vue Javascript

methods

在 Vue Instance 中的選項物件屬性中，可設定 methods 這個屬性用來定義方法，執行一些動作。

methods 屬性中的每個 key 是一個方法的名稱，而 value 就是方法的函數。

我們常使用指令 v-on 來綁定 HTML DOM 元素的事件監聽器，以觸發要執行的方法。

範例：

<div id="app">
  <button v-on:click="addCount">addCount</button>
  <p>{{ count }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    addCount: function() {
      this.count += 1;
    }
  }
});

方法中的 this 會指向 Vue Instance，所以不能使用會將 this 指向上層內容的箭頭函式 arrow function 來定義 methods

v-on

• 縮寫：@
• 表達式：Function、Inline Statement、Object
• 參數：event
• 修飾符
  • .stop : 呼叫 event.stopPropagation()，停止觸發上層 DOM 元素事件
  • .prevent : 呼叫 event.preventDefault()，避免瀏覽器預設行為
  • .capture : 不管觸發事件的目標是否是下層， 設定 capture 的事件一定會先觸發
  • .self : 僅觸發自己範圍的事件，不包含子層
  • .{keyCode | keyAlias} : 只在按下鍵盤任一鍵值才會觸發事件
  • .native : 監聽元件根元素的原生事件
  • .once : 此事件只觸發一次
  • .left : 只在點擊滑鼠左鍵才會觸發事件
  • .right : 只在點擊滑鼠右鍵才會觸發事件
  • .middle : 只在點擊滑鼠中鍵才會觸發事件
  • .passive : 以 { passive : true } 的模式添加事件監聽器，無視 prevent 功能
• 用法：綁定事件監聽器。事件類型由參數指定。表達式可以是一個方法的名字或一個行內陳述式，如果沒有修飾符也可以省略。

關於修飾符的詳細用法，會在之後的篇章有完整介紹。

接下來針對 v-on 的表達方式用法做介紹：

使用表達式 Expression

• 表達式 ( Expression )：又可稱為表示式、運算式，經常透過一些符號結合上下語句並運算及回傳結果。
• 陳述式 ( Statement )：用於命令執行指定的一系列操作，不會回傳結果。

<div id="app">
  <button @click="count += 1">點我+1</button>
  <p>{{ count }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    count: 0
  }
});

使用事件名稱 Method Name

當使用事件名稱綁定時，方法中的第一個參數會是原生的 DOM 事件物件，所以可以使用這個物件來操作叫用此事件的元素

<div id="app">
  <div>
    <button @click="aPlus1AndbMinus">a+ and b-</button>
    {{a}}:{{b}}
  </div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    a: 1,
    b: 10
  },
  methods: {
    aPlus1AndbMinus: function(event) {
      this.a += 1;
      this.b -= 1;

      console.log(`You clicked ${event.target.tagName}`);
    }
  }
});

使用行內陳述式 Inline Statement

方法內可以傳入參數，而當需要原生的 DOM 事件物件時，可以用 $event 變數當作參數傳入方法中使用。

<div id="app">
  <div>
    <button @click="clickWhat('hi', $event)">hi</button>
    <button @click="clickWhat('yo', $event)">yo</button>
    You click {{what}} {{tag}}
  </div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    what: '',
    tag: '',
  },
  methods: {
    clickWhat: function(what, event) {
      this.what = what;
      this.tag = event.target.tagName;
    }
  }
});

使用物件 Object { key : value }

• key : 欲綁定的事件名稱
• value : 觸發事件時想要叫用的方法名稱

物件的設定方式不能使用縮寫 @ 和任何的修飾符

<div id="app">
  <div>
    <button v-on="{ mousedown: showDown, mouseup: showUp }">click me</button>
    {{doWhat}}
  </div>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    doWhat: ''
  },
  methods: {
    showUp: function(event) {
      this.doWhat = `up ${event.target.tagName}`;
    },
    showDown: function(event) {
      this.doWhat = `down ${event.target.tagName}`;
    }
  }
});

只使用修飾符 Modifiers

<form @submit.prevent>
  <button type="submit">submit</button>
</form>

在沒有 @submit.prevent 的情況下，頁面會閃一下，這時頁面已送出表單並重新載入了，而加上 @submit.prevent 後畫面不會重新載入

參考資料

• Vue.js - methods
• Vue.js - Event Handling
• Vue.js - v-on
• Vue.js Core 30天屠龍記(第16天): 事件處理
• Day10 - [Directives] 事件處理(Event Handling)
• 用範例理解 Vue.js #12：Event Handling(v-on)
• Vue.js: Methods 與事件處理 (Event Handling)
• 【JavaScript 核心】陳述式與表達式