vue面试系列(4) vue常用事件修饰符

学至分享

于 2020-04-30 09:43:55 发布

阅读量285

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue面试题文章标签： vue 前端

本文链接：https://blog.youkuaiyun.com/SBTOC/article/details/105854468

11 篇文章

订阅专栏

本文详细介绍了Vue中常用的事件修饰符，包括.stop用于阻止事件冒泡，.prevent防止默认行为，.capture在捕获阶段触发，.self仅当事件在当前元素上触发时执行，.once确保事件只触发一次，以及.passive优化滚动性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>

<!-- 防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播） -->
<a v-on:click.stop="doThis"></a>

<!-- 与事件冒泡的方向相反，事件捕获由外到内,捕获事件：
		嵌套两三层父子关系，然后所有都有点击事件，
		点击子节点，就会触发从外至内 父节点-》子节点的点击事件 -->
<a v-on:click.stop="doThis"></a>

<!-- 只在当前元素自身触发处理函数 -->
<a v-on:click.stop="doThis"></a>

<!-- 事件只触发一次 -->
<a v-on:click.stop="doThis"></a>

<!-- Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符 -->
<a v-on:click.stop="doThis"></a>