事件處理 v-on

綁定事件監聽器，綁定的事件類型是由參數指定。表示式可以是一個方法的名字或一個行內語句或鍵值對的物件(key、value)，如果沒有修飾符也可以省略(p.s 物件表示式是不支援修飾符)。

語法: v-on:監聽事件.修飾符="表示式"
縮寫: @監聽事件.修飾符="表示式"

前天有提到的，v-on也可以使用動態事件。
v-on:[event]="doSomething"

在監聽原生DOM事件時，表示式的method只能以事件為唯一的參數。
v-on:click="submit"

如果使用內聯語句，語法可以使用一個$event 屬性當作參數。
v-on:click="submit('helloWorld', $event)"

v-on用在HTML樣板元素上時，只能監聽原生DOM事件。
用在自定義元件上時，可以監聽子元件觸發的自定義事件，$emit('my-event', XXX)。
<my-component @my-event="handleEvent"></my-component>
如果要監聽根元素的原生事件，可以使用.native修飾符。
v-on:click.native="doSomething"

使用物件表示式
v-on="{ mousedown: doMouseDown, mouseup: doMouseUp }"

事件修飾符大全:

1. stop 修飾符告訴v-on阻止事件繼續傳播(阻止事件冒泡)，調用event.stopPropagation()。
2. prevent 修飾符告訴v-on對於觸發事件時調用event.preventDefault()，阻止該元素所有默認行為。
3. capture 添加事件監聽器時使用 capture 模，內部元素觸發的事件先在此處理，然後才交由內部元素進行處理。
4. self 當事件是從監聽器綁定的元素本身觸發時才會觸發。
5. {keyCode | keyAlias} 當事件是從特定鍵觸發時才觸發。
6. native 監聽元件根元素的原生事件。
7. once 事件只觸發一次。
8. passive 立即觸發元素的默認行為，以{ passive: true }模式添加偵聽器。
9. left 當點擊鼠標左鍵時觸發。
10. right 當點擊鼠標右鍵時觸發。
11. middle 當點擊鼠標中鍵時觸發。

修飾符可以串聯使用:

<a v-on:click.stop.prevent="doSomething"></a>

可以只有監聽的事件、修飾符，沒有表示式:

<form v-on:submit.prevent></form>

使用修飾符，順序要特別注意:
v-on:click.prevent.self ==>>防止所有點擊
v-on:click.self.prevent ==>>防止自身點擊

注意，不要串聯使用.passive與.prevent，兩者本相矛盾。

按鍵修飾符: 可以參考KeyboardEvent，把按鍵有效鍵名改成橫線連接符(kebab-case),例如:
v-on:keyup.page-down="onPageDownClick"
或用鍵盤鍵名代碼:
v-on:keyup.13="onKeyupEnter"

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang