Vue事件符.capture的含義及用法說明
vue事件符.capture的含義用法
vue事件符的.capture用法，含義是捕獲。
先看一個(gè)4層結(jié)構(gòu)的div盒子：div(最外層) > div(爺爺) > div(父親) > div(兒子)
點(diǎn)擊最里層兒子,則會(huì)冒泡打印輸出，輸出為：
現(xiàn)在給@click添加.capture修飾符
首先添加單個(gè).capture給每層盒子
點(diǎn)擊“兒子”看效果
1.給父親加
輸出：
2. 給爺爺加
輸出：
3. 給最外層加
輸出：
首先添加多個(gè).capture給每層盒子
點(diǎn)擊“兒子”看效果
1.給父親和爺爺加
輸出：
2. 給父親和最外層加
輸出：
3. 給父親、爺爺、最外層加
輸出：
3. 給每一層都加
輸出：
現(xiàn)在應(yīng)該明白了吧
心得
- 冒泡是從里往外冒，捕獲是從外往里捕。
- 當(dāng)捕獲存在時(shí)，先從外到里的捕獲，剩下的從里到外的冒泡輸出。
vue事件修飾符有哪些
vue事件修飾符
- 1.prevent：阻止默認(rèn)事件
- 2.stop：阻止事件冒泡
- 3.once：事件只觸發(fā)一次
- 4.capture:使用事件的捕捉模式
- 5.self：只有event.target是當(dāng)前操作的元素時(shí)才觸發(fā)事件
- 6.passive：事件的默認(rèn)行為為立即執(zhí)行，無需等待事件 回調(diào)執(zhí)行完畢
- 7.native：應(yīng)用與子組件的原始事件 <student @click.native=“demo”>
鍵盤事件
@keyup@keydown
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue路由跳轉(zhuǎn)攜帶參數(shù)的方式總結(jié)
我們知道在vue中每個(gè)頁面都需要在路由中聲明,下面這篇文章主要給大家介紹了關(guān)于vue路由跳轉(zhuǎn)攜帶參數(shù)的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
Vue項(xiàng)目報(bào)錯(cuò):Uncaught?SyntaxError:?Unexpected?token?'＜&a
最近在做vue項(xiàng)目時(shí),需要引入一個(gè)第三方的js文件,在index.html中通過以下方式引入JS文件編譯后就報(bào)了這個(gè)問題,這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目報(bào)錯(cuò):Uncaught?SyntaxError:?Unexpected?token?'＜'的解決方法,需要的朋友可以參考下2022-08-08
vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式
這篇文章主要介紹了vuex 多模塊時(shí) 模塊內(nèi)部的mutation和action的調(diào)用方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
vue實(shí)現(xiàn)點(diǎn)擊出現(xiàn)操作彈出框的示例
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊出現(xiàn)操作彈出框的示例，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-11-11
Vue 解決通過this.$refs來獲取DOM或者組件報(bào)錯(cuò)問題
這篇文章主要介紹了Vue 解決通過this.$refs來獲取DOM或者組件報(bào)錯(cuò)問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
在Vue項(xiàng)目中使用d3.js的實(shí)例代碼
這篇文章主要介紹了在Vue項(xiàng)目中使用d3.js的實(shí)例代碼，非常不錯(cuò)，具有參考借鑒價(jià)值價(jià)值,需要的朋友可以參考下2018-05-05
element-ui中el-table不顯示數(shù)據(jù)的問題解決
這篇文章主要介紹了element-ui中el-table不顯示數(shù)據(jù)的問題解決,這是最近在做列表首頁時(shí)遇到的一個(gè)問題,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程
在微信小程序中,可以很簡單的分享一個(gè)頁面,比微信H5簡單多了,下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程,需要的朋友可以參考下2023-02-02
Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼
使用el-table組件拖拽時(shí),?想使用自定義樣式進(jìn)行拖拽,?想去掉外邊框,?并在表頭加入豎杠樣式,本文給大家介紹Element?Plus?去掉表格外邊框的實(shí)現(xiàn)代碼,感興趣的朋友一起看看吧2025-04-04
vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯(cuò)誤問題
這篇文章主要介紹了vue中使用sass及解決sass-loader版本過高導(dǎo)致的編譯錯(cuò)誤問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04