在 Vue 中,修饰符是在事件处理程序后面使用的特殊后缀,用于修改事件行为的方式。Vue 中的事件修饰符可以简化事件处理程序的代码,增加事件的可读性和可维护性。
Vue 2.x 支持的事件修饰符包括:
.stop:阻止事件继续传播
.prevent:阻止默认行为
.capture:添加事件侦听器时使用事件捕获模式
.self:只当事件在该元素本身(比如不是子元素)触发时触发回调
.once:只触发一次回调
.passive:提升移动端性能,告诉浏览器不要阻止默认行为(比如滚动)
除了以上修饰符外,Vue 3.x 中还引入了一些新的事件修饰符,包括:
.stopPropagation:阻止事件继续传播
.preventDefault:阻止默认行为
.capture:添加事件侦听器时使用事件捕获模式
.self:只当事件在该元素本身(比如不是子元素)触发时触发回调
.once:只触发一次回调
.passive:提升移动端性能,告诉浏览器不要阻止默认行为(比如滚动)
.shift:只在按下 Shift 键的情况下触发事件回调
.ctrl:只在按下 Ctrl 键的情况下触发事件回调
.alt:只在按下 Alt 键的情况下触发事件回调
.meta:只在按下 Meta 键的情况下触发事件回调
使用事件修饰符时,只需要在事件名称后面加上修饰符即可。例如,阻止事件继续传播可以这样写:
<button @click.stop>阻止事件冒泡</button>
需要注意的是,修饰符的顺序很重要,不同的顺序可能会导致不同的行为。例如, 修饰符应该放在前面, 修饰符应该放在后面,否则可能会阻止不了事件的默认行为。
相关文章
关注千锋学习站小程序
随时随地免费学习课程
扫一扫快速进入
千锋移动端页面
扫码匿名提建议
直达CEO信箱