VUE3 click點擊事件及修飾符詳解
只綁定一個點擊事件
<button @click="greet">單個點擊事件</button>
methods:{ greet(){ console.log('單個點擊事件') } }
一個標簽內(nèi)綁定多個點擊事件方法
<button @click="one($event), two($event)">多個點擊事件</button>
methods:{ one(e){ console.log(e) }, two(e){ console.log(e) } }
事件修飾符
.stop 阻止單擊事件繼續(xù)冒泡(適用于出現(xiàn)嵌套點擊事件時)
<div @click="box('我是大box')" style="width:500px; background:red"> <button @click.stop="doThis('我是內(nèi)嵌點擊事件按')">單個點擊事件</button> </div>
methods:{ doThis(val){ console.log(val) }, box(val){ console.log(val) } }
.prevent 阻止默認事件
<form action=""> <!-- 默認提交事件 --> <!-- <input type="submit" value="提交"> --> <!-- 阻止默認事件 --> <input type="submit" value="提交" @click.prevent="submitCLICK('prevent阻止默認事件')"> </form>
methods:{ submitCLICK(val){ console.log(val) } }
.capture 即內(nèi)部元素觸發(fā)的事件先在此處理,然后才交由內(nèi)部元素進行處理
<form action=""> <input type="submit" value="提交" @click.capture="submitCLICK('capture先在此處理')"> </form>
methods:{ submitCLICK(val){ console.log(val) } }
.once點擊事件將只會觸發(fā)一次
<button @click.once="ononce('點擊事件將只會觸發(fā)一次')">點擊事件將只會觸發(fā)一次</button>
methods:{ ononce(val){ console.log(val) } }
.passive用在移動端的scroll事件,來提高瀏覽器響應(yīng)速度,提升用戶體驗
<!-- 滾動事件的默認行為 (即滾動行為) 將會立即觸發(fā), --> <div @scroll.passive="onScroll">...</div>
修飾符串聯(lián)使用(按循序執(zhí)行)
// 按循序執(zhí)行先執(zhí)行阻止冒泡事件在執(zhí)行阻止默認事件 <a @click.stop.prevent="doThat"></a>
TIP
不要把 .passive 和 .prevent(阻止默認事件) 一起使用,因為 .prevent 將會被忽略,同時瀏覽器可能會向你展示一個警告。
請記住,.passive 會告訴瀏覽器你不想阻止事件的默認行為。
按鍵修飾符
Vue 為最常用的鍵提供了別名:
.enter
.tab
.delete
(捕獲“刪除”和“退格”鍵).esc
.space
.up
.down
.left
.right
<!-- 只有在 `key` 是 `Enter` 時調(diào)用 `vm.submit()` 按enter鍵執(zhí)行 --> <input @keyup.enter="submit" /> <!-- 按delete 鍵執(zhí)行 --> <input @keyup.delete="submit" />
系統(tǒng)修飾鍵
.ctrl
.alt
.shift
.meta
<!-- Alt + Enter 時觸發(fā)--> <input @keyup.alt.enter="clear" /> <!-- Ctrl + Click 按住加點擊時觸發(fā)--> <div @click.ctrl="doSomething">Do something</div>
總結(jié)
以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue3整合SpringSecurity加JWT實現(xiàn)登錄認證
本文主要介紹了vue3整合SpringSecurity加JWT實現(xiàn)登錄認證,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-04-04Vue2.0實現(xiàn)調(diào)用攝像頭進行拍照功能 exif.js實現(xiàn)圖片上傳功能
這篇文章主要為大家詳細介紹了Vue2.0實現(xiàn)調(diào)用攝像頭進行拍照功能,以及圖片上傳功能引用exif.js,具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-04-04DeepSeek?助力?Vue?開發(fā)絲滑的表單驗證Form?Validation功能
文章介紹了如何使用Vue3的組合式API創(chuàng)建一個表單驗證組件,并提供了詳細的代碼示例,組件支持雙向綁定、自定義驗證規(guī)則、樣式和布局等功能,還涵蓋了組件的調(diào)用示例、路由配置和頁面展示入口2025-02-02Vue+ElementUI技巧之自定義表單項label的文字提示方法
這篇文章主要給大家介紹了關(guān)于Vue+ElementUI技巧之自定義表單項label文字提示的相關(guān)資料,文中通過圖文以及代碼示例介紹的非常詳細,對大家的學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-02-02vue路由傳參的基本實現(xiàn)方式小結(jié)【三種方式】
這篇文章主要介紹了vue路由傳參的基本實現(xiàn)方式,結(jié)合實例形式總結(jié)分析了vue.js路由傳參的三種實現(xiàn)方式,包括params顯示傳參、不顯示參數(shù)以及query顯示參數(shù)傳參,需要的朋友可以參考下2020-02-02