Vue事件符.capture的含義及用法說明
更新時間：2023年06月02日 14:21:24 作者：木木木華
這篇文章主要介紹了Vue事件符.capture的含義及用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
vue事件符.capture的含義用法
vue事件符的.capture用法，含義是捕獲。
先看一個4層結構的div盒子：div(最外層) > div(爺爺) > div(父親) > div(兒子)
點擊最里層兒子,則會冒泡打印輸出，輸出為：
現在給@click添加.capture修飾符
首先添加單個.capture給每層盒子
點擊“兒子”看效果
1.給父親加
輸出：
2. 給爺爺加
輸出：
3. 給最外層加
輸出：
首先添加多個.capture給每層盒子
點擊“兒子”看效果
1.給父親和爺爺加
輸出：
2. 給父親和最外層加
輸出：
3. 給父親、爺爺、最外層加
輸出：
3. 給每一層都加
輸出：
現在應該明白了吧
心得
- 冒泡是從里往外冒，捕獲是從外往里捕。
- 當捕獲存在時，先從外到里的捕獲，剩下的從里到外的冒泡輸出。
vue事件修飾符有哪些
vue事件修飾符
- 1.prevent：阻止默認事件
- 2.stop：阻止事件冒泡
- 3.once：事件只觸發(fā)一次
- 4.capture:使用事件的捕捉模式
- 5.self：只有event.target是當前操作的元素時才觸發(fā)事件
- 6.passive：事件的默認行為為立即執(zhí)行，無需等待事件 回調執(zhí)行完畢
- 7.native：應用與子組件的原始事件 <student @click.native=“demo”>
鍵盤事件
@keyup@keydown
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
在Vue項目中,自定義文件上傳組件能夠提升用戶交互體驗和界面控制,樣式可根據需求定制,在其他組件中引用時,可以進一步擴展功能,如文件類型限制和上傳進度條,本文給大家介紹Vue 中自定義文件上傳組件的實現代碼,感興趣的朋友跟隨小編一起看看吧2024-11-11
在 Vue 中,深度監(jiān)聽是指監(jiān)聽一個對象或數組的嵌套屬性（深層結構）的變化,而不僅僅是監(jiān)聽頂層屬性的引用變化,本文給大家介紹了如何在Vue中實現深度監(jiān)聽,并通過代碼示例介紹的非常詳細,需要的朋友可以參考下2025-03-03
vue 2.5.1 源碼學習 之Vue.extend 和 data的合并策略
這篇文章主要介紹了Vue.extend 和 data的合并策略 ，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
最近項目要用到百度地圖api,好久沒用到地圖,就百度了一番,但是找了好幾篇文章,發(fā)現都沒辦法成功實現,現將方法記錄如下,下面這篇文章主要給大家介紹了關于前端vue3項目中百度地圖的使用api以及操作實例,需要的朋友可以參考下2023-05-05
本文主要介紹了vue清空數組的幾個方式，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了Vue響應式原理，響應式就是當對象本身（對象的增刪值）或者對象屬性（重新賦值）發(fā)生了改變的時候，就會運行一些函數，最常見的示render函數2022-09-09
這篇文章主要為大家介紹了springboot+vue測試平臺前端項目實現查詢新增功能，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-05-05
uniapp組件uni-file-picker中對上傳的圖片進行壓縮至1兆以內(推薦)
我在做uniapp項目時，用的uni-file-picker組件，這是我做的一個項目實例，主要是將圖片通過接口傳至后臺服務器，本文給大家分享uniapp組件uni-file-picker中對上傳的圖片進行壓縮再上傳，感興趣的朋友跟隨小編一起看看吧2022-11-11
vue中提示$index is not defined錯誤的解決方式
這篇文章主要介紹了vue中提示$index is not defined錯誤的解決方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
使用vue官方提供的模板vue-cli搭建一個helloWorld案例分析
這篇文章主要介紹了用vue官方提供的模板vue-cli搭建一個helloWorld案例,需要的朋友可以參考下2018-01-01