vue 中的 事件監(jiān)聽:v-on 以及事件修飾符詳解

在前端開發(fā)中,我們需要經(jīng)常和用于交互,這個時候,我們就必須監(jiān)聽用戶發(fā)生的時間,比如點(diǎn)擊、拖拽、鍵盤事件等等
在Vue中如何監(jiān)聽事件呢?使用v-on指令

基本使用

v-on1.png
v-on2.png
v-on3.png

v-on 傳參

注意

當(dāng)通過methods中定義方法,以供@click調(diào)用時,需要注意參數(shù)問題:

情況一:如果該方法不需要額外參數(shù),那么方法后的()可以不添加。但是注意:如果方法本身中有一個參數(shù),那么會默認(rèn)將原生事件event參數(shù)傳遞進(jìn)去

情況二:如果需要同時傳入某個參數(shù),同時需要event時,可以通過$event傳入事件


v-on傳參.png

v-on事件修飾符

使用 .stop 阻止冒泡
使用 .prevent 阻止默認(rèn)行為
使用 .capture 實現(xiàn)捕獲觸發(fā)事件的機(jī)制
使用 .self 實現(xiàn)只有點(diǎn)擊當(dāng)前元素時候,才會觸發(fā)事件處理函數(shù)
使用 .once 只觸發(fā)一次事件處理函數(shù)
使用 .native 監(jiān)聽組件根元素的原生事件
使用 .keyup.enter 鍵修飾符
使用 .keyup.13 鍵修飾符 鍵代碼

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容