# 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;
    }
  }
});

:::danger
方法中的 `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 : 觸發事件時想要叫用的方法名稱

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

<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](https://vuejs.org/v2/api/#methods)
* [Vue.js - Event Handling](https://vuejs.org/v2/guide/events.html)
* [Vue.js - v-on](https://cn.vuejs.org/v2/api/index.html#v-on)
* [Vue.js Core 30天屠龍記(第16天): 事件處理](https://ithelp.ithome.com.tw/articles/10206798)
* [Day10 - [Directives] 事件處理(Event Handling)](https://ithelp.ithome.com.tw/articles/10194631)
* [用範例理解 Vue.js #12：Event Handling(v-on)](https://ithelp.ithome.com.tw/articles/10192961)
* [Vue.js: Methods 與事件處理 (Event Handling)](https://cythilya.github.io/2017/04/17/vue-methods-and-event-handling/)
* [【JavaScript 核心】陳述式與表達式](https://ithelp.ithome.com.tw/articles/10214107)