在js若要對元素進行一些互動的處理，通常會用到event binding

像是 element.addEventListener

Event Binding

而在vue做這件事時，可以使用 v-on: 來做event binding

如果要對一個 div 元素加上click事件，可以有以下寫法

Pure Javascript

// 加入事件處理
element.addEventListener('click', ClickHandler) 
// 移除事件處理
element.removeEventListener('click', ClickHandler)

Jquery

$(element).on('click', ClickHandler)

Vue

<div v-on:click="ClickHandler">
</div>

更精簡的寫法

<div @click="ClickHandler">
    v-on: 可以簡寫成 @
</div>

vue透過直接在元素上綁定對應，有以下好處:

  1. 不用把要綁定的元素找出來

  2. 在SPA應用中不需要自行移除event

    在SPA中，有時使用了 addEventListener 卻沒有移除的話

    那就有可能會因為多次瀏覽特定頁面，導致網頁的事件綁定變得非常多

  3. 直接在元素上綁定，讓事件對應的元素更直觀

    不過當綁定的事件比較多時，這也有可能反而變成了缺點就是了

Some Tricks

在使用v-on綁定keyboard event時，有一些小技巧可以用

tabindex="0"

對div元素，或者說是非input類型的元素，要綁定keyboard event時

可以使用 tabindex="0" 來讓事件被驅動

<div 
    @keydown.down="SomeHandler">
    當按下 down 時，"不會"觸發 SomeHandler
</div>

<div tabindex="0" 
    @keydown.down="SomeHandler">
    當按下 down 時，"會"觸發 SomeHandler
</div>

exact

代表鍵盤上輸入的key必須完全一致

<div tabindex="0" 
    @keydown.down="SomeHandler">
    當按下 shift+down 時，"會"觸發 SomeHandler
</div>

<div tabindex="0"
    @keydown.exact.down="SomeHandler">
    當按下 shift+down 時，"不會"觸發 SomeHandler
</div>

native

對自定義 Component 綁定事件時，加上native可以讓事件被驅動

<CustomComponent 
    tabindex="0" 
    @keydown.down="SomeHandler" />
    SomeHandler "可能不會"被驅動

<CustomComponent
    tabindex="0"
    @keydown.native.down="SomeHandler" />
    SomeHandler "會"被驅動