Vue修饰符整理

大家好，欢迎来到IT知识分享网。

事件修饰符

.stop ： 阻止冒泡

.captrue： 事件捕获

.self ：触发事件对象为自己才触发

.prevent ：阻止默认行为

.once ：事件只触发一次

.passive ：优化移动端滚动行为

.native ： 表示为原生的事件（vue3 已移除）

.passive 修饰符说明：
移动端Scroll时会默认等待 onScroll 执行完成 才执行默认行为，所以当onScroll中存在耗时操作时滚动会出现卡顿，而使用 .passive 修饰符后将会立即执行默认行为

native修饰符（vue3 已移除）：
当你直接给子组件绑定事件时，例如click。此时vue会默认把它当成是自定义事件，所以点击也不会触发方法。解决办法：给click添加native修饰符，告诉vue这是一个原生事件

<Mycomponent @click.native="handleClick" ></Mycomponent> <!-- 给组件绑定事件 -->

按键修饰符

使用：事件.按键key（虽然 事件.按键keycode也是允许的， 但官方不推荐使用）

例如：

按键 w ：<input @keydown.w="handleKeydown" /></p>

为了在必要的情况下支持旧浏览器，Vue 提供了绝大多数常用的按键码的别名：

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

修饰符组合使用：

ctrl＋w 触发事件

<input @keydown.ctrl.w="handleKeydown" />

.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。

<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112

多按键触发：

// 定义自定义修饰符 按下f1或enter键触发
Vue.config.keyCodes.f1_or_enter = [13,112]

系统修饰键

可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta

请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。

鼠标按钮修饰符

这些修饰符会限制处理函数仅响应特定的鼠标按钮

.left ：鼠标左键
.right ：鼠标右键
.middle ：鼠标滚轮键