Vue事件符.capture的含義及用法說明
更新時(shí)間：2023年06月02日 14:21:24 作者：木木木華
這篇文章主要介紹了Vue事件符.capture的含義及用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
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 中自定義文件上傳組件的實(shí)現(xiàn)代碼
在Vue項(xiàng)目中,自定義文件上傳組件能夠提升用戶交互體驗(yàn)和界面控制,樣式可根據(jù)需求定制,在其他組件中引用時(shí),可以進(jìn)一步擴(kuò)展功能,如文件類型限制和上傳進(jìn)度條,本文給大家介紹Vue 中自定義文件上傳組件的實(shí)現(xiàn)代碼,感興趣的朋友跟隨小編一起看看吧2024-11-11
在Vue中實(shí)現(xiàn)深度監(jiān)聽的示例代碼
在 Vue 中,深度監(jiān)聽是指監(jiān)聽一個(gè)對象或數(shù)組的嵌套屬性（深層結(jié)構(gòu)）的變化,而不僅僅是監(jiān)聽頂層屬性的引用變化,本文給大家介紹了如何在Vue中實(shí)現(xiàn)深度監(jiān)聽,并通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2025-03-03
vue 2.5.1 源碼學(xué)習(xí) 之Vue.extend 和 data的合并策略
這篇文章主要介紹了Vue.extend 和 data的合并策略 ，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
前端vue3項(xiàng)目中百度地圖的使用api以及操作實(shí)例
最近項(xiàng)目要用到百度地圖api,好久沒用到地圖,就百度了一番,但是找了好幾篇文章,發(fā)現(xiàn)都沒辦法成功實(shí)現(xiàn),現(xiàn)將方法記錄如下,下面這篇文章主要給大家介紹了關(guān)于前端vue3項(xiàng)目中百度地圖的使用api以及操作實(shí)例,需要的朋友可以參考下2023-05-05
vue清空數(shù)組的幾個(gè)方式(小結(jié))
本文主要介紹了vue清空數(shù)組的幾個(gè)方式，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了Vue響應(yīng)式原理，響應(yīng)式就是當(dāng)對象本身（對象的增刪值）或者對象屬性（重新賦值）發(fā)生了改變的時(shí)候，就會(huì)運(yùn)行一些函數(shù)，最常見的示render函數(shù)2022-09-09
springboot?vue測試平臺前端項(xiàng)目查詢新增功能
這篇文章主要為大家介紹了springboot+vue測試平臺前端項(xiàng)目實(shí)現(xiàn)查詢新增功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-05-05
uniapp組件uni-file-picker中對上傳的圖片進(jìn)行壓縮至1兆以內(nèi)(推薦)
我在做uniapp項(xiàng)目時(shí)，用的uni-file-picker組件，這是我做的一個(gè)項(xiàng)目實(shí)例，主要是將圖片通過接口傳至后臺服務(wù)器，本文給大家分享uniapp組件uni-file-picker中對上傳的圖片進(jìn)行壓縮再上傳，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue中提示$index is not defined錯(cuò)誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯(cuò)誤的解決方式，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
使用vue官方提供的模板vue-cli搭建一個(gè)helloWorld案例分析
這篇文章主要介紹了用vue官方提供的模板vue-cli搭建一個(gè)helloWorld案例,需要的朋友可以參考下2018-01-01