對Vue中事件處理的分析

這篇文章跟大家分享了關於Vue中事件處理的分析，有需要的朋友可以參考一下。

目標：

1. 熟練事件監聽的方式，熟悉事件處理方式以及各類事件修飾符

2. 理解在html中監聽事件的意義

監聽事件(v-on)

1. 類似普通的on,例如v-on:click或@click就相當於普通的onclick, v-on調用的是vue實例methods裡面的方法.

2. v-on不只可以調用methods的方法, 也可以執行一些js表達式

3. 傳入特殊變數$event就可以存取到元素的DOM事件

事件修飾符

1. 修飾符
   .stop // 阻止事件傳播
   .prevent // 阻止預設行為
   .capture // 使用事件擷取模式(先自身處理,再交由內部元素處理)
   .self // 當event.target是當前元素本身時觸發(其他元素引起的不會生效)
   .once // 只能觸發一次
   .passive // 讓預設行為立即觸發

2. 修飾符加在事件名稱後面,而且可以串聯,也可以只有修飾符

例如: <a href="http://www.baidu.com" @click.prevent.stop>去百度</a>

按鍵事件修飾符

1.鍵盤事件
@keydown // 鍵盤按下事件
@keyup // 鍵盤放開事件

2.修飾符(按鍵別名)
.enter
.tab
.delete (捕獲「刪除」與「退格」鍵)
.esc
.space
.up
.down
.left
.right

除此之外,可以透過全域config.keyCodes 物件自訂按鍵修飾符別名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

3.系統控制組合修飾
.ctrl
.alt
.shift
.meta

 <!-- Alt + C -->
<input @keyup.alt.67="clear">
<!-- Ctrl + Click -->
<p @click.ctrl="doSomething">Do something</p>

為什麼在HTML中監聽事件

實質上所有的Vue.js 事件處理方法和表達式都嚴格綁定在目前視圖的ViewModel 上
而使用v-on有以下好處:

1. 方便查看模版綁定的事件以及能輕鬆定位js程式碼裡面對應的方法

2. 無需js手動綁定事件,和dom解耦,易於測試

3. 當一個ViewModel被銷毀時, 所有的事件處理器都會自動被刪除,不用清除.

相關推薦：

Vue中class與style綁定以及條件與清單渲染的分析

對Vue的模板語法,計算屬性,偵聽器的分析

以上是對Vue中事件處理的分析的詳細內容。更多資訊請關注PHP中文網其他相關文章！