Vue Event Handling

事件監聽

使用 v-on 指令監聽 DOM 事件。

範例

點擊 Add 1 按鈕，在觸發 click 時執行 counter + 1

1
2
3
4
5
6
7
8
9
10
11

<div id="example-1">
  <button v-on:click="counter += 1">Add 1</button>
  <p>The button above has been clicked {{ counter }} times.</p>
</div>

var example1 = new Vue({
  el: '#example-1',
  data: {
    counter: 0
  }
})

事件處理方法

多數的事件處理(event handlers)邏輯更為複雜，不好直接寫在 v-on 指令裡，而是讓 v-on 接收一個被調用的方法名稱。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<div id="example-2">
  <button v-on:click="greet">Greet</button>
</div>

var example2 = new Vue({
  el: '#example-2',
  data: {
    name: 'Vue.js'
  },
  // 在 methods 物件裡定義方法
  methods: {
    // 方法名稱為 greet
    greet: function (event) {
      // this 在方法裡指向當前 Vue 實體
      alert('Hello ' + this.name + '!')
      // event 是原生 DOM 事件
      if (event) {
        alert(event.target.tagName)
      }
    }
  }
})

// 也可以用 JavaScript 直接調用方法
example2.greet() // 'Hello Vue.js!'

行內處理方法

除了直接綁定一個方法名稱，也能在行內的 JavaScript 陳述式裡使用方法。

1
2
3
4
5
6
7
8
9
10
11
12
13

<div id="example-3">
  <button v-on:click="say('hi')">Say hi</button>
  <button v-on:click="say('what')">Say what</button>
</div>

new Vue({
  el: '#example-3',
  methods: {
    say: function (message) {
      alert(message)
    }
  }
})

點擊不同的按鈕時，會因陳述式的不同而有不同的結果。

事件修飾符

修飾符為 . 後的後綴，表示一個指令的特殊綁定。

• .stop (停止觸發上層 DOM 元素事件。)
• .prevent (避免瀏覽器預設行為。)
• .capture (不管觸發事件的目標是否是下層， 設定 capture 的事件一定會先觸發。)
• .self (只有觸發此 DOM 元素本身才會觸發 self 事件。)
• .once (此事件只觸發一次。)
• .passive (無視 prevent 功能。)

※ 括號內文字參考自 Peter Chen：https://ithelp.ithome.com.tw/articles/10206828

範例方法

以下範例的方法皆為

1
2
3
4
5

methods: {
  test: function (e) {
    alert(e)
  }
}

.stop

相當於調用 event.stopPropagation()，能夠阻止事件冒泡。

正常情況下會先顯示 child 然後顯示 parent

1
2
3
4

<div @click="test('parent')">
  I am parent.
  <div @click="test('child')">I am child.</div>
</div>

使用 .stop 則只會顯示 child

1
2
3
4

<div @click="test('parent')">
  I am still parent.
  <div @click.stop="test('child')">I am child with stop modifier.</div>
</div>

.prevent

相當於 event.preventDefault()，能夠阻止預設行為。

點擊 a 標籤前往連結頁面

1

<a href="https://www.google.com/">To Google</a>

使用 .prevent 則不觸發頁面跳轉

1
2

<a href="https://www.google.com/" 
  @click.prevent="test('stop a')">a with prevent modifier</a>

.capture

使用 .capture 的事件會優先觸發。

正常順序應該是 child -> parent -> Grandparent

1
2
3
4
5
6
7
8
9

<div @click="test('Grandparent')">
  Grandparent
  <div @click="test('parent')">
    parent
    <div @click="test('child')">
      child
    </div>
  </div>
</div>

在 Grandparent 上使用了 capture 修飾符後，順序變為 Grandparent -> child -> parent，Grandparent 被優先觸發，但 child 與 parent 仍是正常順序

1
2
3
4
5
6
7
8
9

<div @click.capture="test('Grandparent')">
  Grandparent with capture
  <div @click="test('parent')">
    parent
    <div @click="test('child')">
      child
    </div>
  </div>
</div>

.self

只在 event.target 是元素本身時才會觸發。

點擊 child 時，會先觸發 child 再觸發 parent

1
2
3
4

<div @click="test('parent')">
  parent
  <div @click="test('child')">child</div>
</div>

加上 self 後，點擊 child 時，只觸發 child

1
2
3
4

<div @click.self="test('parent')">
  parent with self modifier
  <div @click="test('child')">child</div>
</div>

.once

使用 .once 只會觸發一次。

只要點擊就會顯示 not once，不論次數

1

<div @click="test('not once')">not once</div>

只有第一次點擊時會顯示 once

1

<div @click.once="test('once')">once</div>

.passive

作用為無視 event.preventDefault() 功能。

即使加上 prevent 也還是會跳轉連結頁面

1
2

<a @click.passive.prevent="test('跳轉')" 
    href="https://www.google.com">To Google</a>

注意使用修飾符的順序，前會先於後，因此 v-on:click.prevent.self 會阻止所有點擊，而 v-on:click.self.prevent 只會阻止對元素自身的點擊。

按鍵修飾符

鍵盤事件的專門修飾符。

• .enter
• .tab
• .delete (both “Delete” and “Backspace” keys)
• .esc
• .space
• .up
• .down
• .left
• .right

只有在 按鍵是 Enter 時調用 vm.submit()

1

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

滑鼠修飾符

僅在特定的滑鼠按鈕觸發事件。

• .left
• .right
• .middle