Vue事件符.capture的含义及用法说明
作者:木木木华
这篇文章主要介绍了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
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。