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实现点击选中取消切换，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了在vue中实现给每个页面顶部设置title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了详解使用vue-cli脚手架初始化Vue项目下的项目结构，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
vue3 座位选座矩阵布局的实现方法(可点击选中拖拽调换位置)
由于公司项目需求需要做一个线上设置考场相关的座位布局用于给学生考机排号考试,实现教室考场座位布局的矩阵布局,可点击选中标记是否有座无座拖拽调换位置横向纵向排列,本文给大家分享实现代码,一起看看吧2023-11-11
这篇文章主要介绍了Vue监听某个元素以外的区域被点击问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
这篇文章主要介绍了Vue.js实现可配置的登录表单实例代码详解，文中给大家补充介绍了vue.js 全选与取消全选的实例代码,需要的朋友可以参考下2018-03-03
这篇文章主要给大家介绍了关于如何使用vue3简单实现WebSocket通信的相关资料,WebSocket是全双工网络通信通信协议,实现了客户端和服务器的平等对话,任何一方都可以主动发送数据,需要的朋友可以参考下2023-08-08
在Vue中我们可以使用ref属性来获取子组件的实例对象,这个功能非常方便,这篇文章主要给大家介绍了关于Vue获取子组件实例对象ref属性的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-06-06
本篇文章主要介绍了详解webpack编译多页面vue项目的配置问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
这篇文章主要介绍了Vue自定义验证之日期时间选择器详解，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-02-02
最新评论