Vue学习01-v-on事件修饰符

本文深入探讨Vue.js中v-on事件修饰符的使用方法,包括.stop、.prevent、.self、.once、.native及按键修饰符,帮助开发者更好地控制DOM事件的传播和响应。

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

v-on事件修饰符:

.stop:阻止标签的向外冒泡行为

如div内部有个button,但是div和button都有点击事件。此时只希望点击按钮时触发按钮点击事件,不触发div点击事件,那么v-on:click就可以成功避免点击按钮时冒泡到外部div的行为。

.prevent :阻止标签的默认行为

如阻止a标签向href跳转

.self : 只触发标签自身的事件

如div只触发自己的点击事件,不管内部别人的点击事件

.once:让指定的标签事件只触发一次

.native:自定义组件时使用,该事件才能被监听到

如我自定义了< sms >组件,< sms @click=“btn”>这样的写法是监听不到的。必须使用< sms
@click.native=“btn”>该点击事件才能被监听到。

按键修饰符:与键盘的按键事件绑定在一起

@keyup.enter:该标签敲击回车键才触发事件

@keyup.tab:该标签获得tab建的时候被触发,而不是自身按tab键触发

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值