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：事件只触发一次
- 4.capture:使用事件的捕捉模式
- 5.self：只有event.target是当前操作的元素时才触发事件
- 6.passive：事件的默认行为为立即执行，无需等待事件 回调执行完毕
- 7.native：应用与子组件的原始事件 <student @click.native=“demo”>
键盘事件
@keyup@keydown
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在Vue项目中,自定义文件上传组件能够提升用户交互体验和界面控制,样式可根据需求定制,在其他组件中引用时,可以进一步扩展功能,如文件类型限制和上传进度条,本文给大家介绍Vue 中自定义文件上传组件的实现代码,感兴趣的朋友跟随小编一起看看吧2024-11-11
在 Vue 中,深度监听是指监听一个对象或数组的嵌套属性（深层结构）的变化,而不仅仅是监听顶层属性的引用变化,本文给大家介绍了如何在Vue中实现深度监听,并通过代码示例介绍的非常详细,需要的朋友可以参考下2025-03-03
vue 2.5.1 源码学习 之Vue.extend 和 data的合并策略
这篇文章主要介绍了Vue.extend 和 data的合并策略 ，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-06-06
最近项目要用到百度地图api,好久没用到地图,就百度了一番,但是找了好几篇文章,发现都没办法成功实现,现将方法记录如下,下面这篇文章主要给大家介绍了关于前端vue3项目中百度地图的使用api以及操作实例,需要的朋友可以参考下2023-05-05
本文主要介绍了vue清空数组的几个方式，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-12-12
这篇文章主要介绍了Vue响应式原理，响应式就是当对象本身（对象的增删值）或者对象属性（重新赋值）发生了改变的时候，就会运行一些函数，最常见的示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
最新评论