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路由跳转携带参数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-10-10
Vue项目报错:Uncaught SyntaxError: Unexpected token '＜&a
最近在做vue项目时,需要引入一个第三方的js文件,在index.html中通过以下方式引入JS文件编译后就报了这个问题,这篇文章主要给大家介绍了关于Vue项目报错:Uncaught SyntaxError: Unexpected token '＜'的解决方法,需要的朋友可以参考下2022-08-08
vuex 多模块时 模块内部的mutation和action的调用方式
这篇文章主要介绍了vuex 多模块时 模块内部的mutation和action的调用方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了vue实现点击出现操作弹出框的示例，帮助大家更好的理解和使用vue，感兴趣的朋友可以了解下2020-11-11
Vue 解决通过this.$refs来获取DOM或者组件报错问题
这篇文章主要介绍了Vue 解决通过this.$refs来获取DOM或者组件报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了在Vue项目中使用d3.js的实例代码，非常不错，具有参考借鉴价值价值,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了element-ui中el-table不显示数据的问题解决,这是最近在做列表首页时遇到的一个问题,文中通过图文介绍的非常详细,需要的朋友可以参考下2023-07-07
vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程
在微信小程序中,可以很简单的分享一个页面,比微信H5简单多了,下面这篇文章主要给大家介绍了关于vue实现将自己网站(h5链接)分享到微信中形成小卡片的超详细教程,需要的朋友可以参考下2023-02-02
使用el-table组件拖拽时, 想使用自定义样式进行拖拽, 想去掉外边框, 并在表头加入竖杠样式,本文给大家介绍Element Plus 去掉表格外边框的实现代码,感兴趣的朋友一起看看吧2025-04-04
vue中使用sass及解决sass-loader版本过高导致的编译错误问题
这篇文章主要介绍了vue中使用sass及解决sass-loader版本过高导致的编译错误问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
最新评论