在 Vue 中,修饰符(Modifiers)常用于自定义指令(Directives)和事件监听(Event Listeners)中,以改变指令或事件监听器的默认行为。以下是一些 Vue 中常用的修饰符:
1. 事件监听修饰符
- .stop:阻止事件冒泡
- .prevent:阻止默认事件行为(如提交表单)
- .capture:使用事件捕获模式
- .self:只有事件在该元素本身(而不是子元素)触发时触发回调
- .once:事件只触发一次
- .passive:以- { passive: true }模式调用- addEventListener。这主要用于改善移动端滚动性能。
示例:
<button @click.stop="handleClick">点击我</button>
<form @submit.prevent="handleSubmit"><!-- 表单内容 -->
</form>
2. v-model 修饰符
- .lazy:将- input事件替换为- change事件,这意味着 v-model 不会在每次输入时都更新,而是在输入失去焦点或按下回车键时更新。
- .number:尝试将用户的输入值转换为数字。如果转换失败,则返回原始值。
- .trim:自动过滤用户输入的首尾空格。
示例:
<input v-model.lazy="message">
<input v-model.number="age" type="text">
<input v-model.trim="name">
3. 键盘事件修饰符
在监听键盘事件时,你可以使用以下修饰符来检测特定的键是否被按下:
- .enter
- .tab
- .delete(捕获“删除”和“退格”键)
- .esc
- .space
- .up、- .down、- .left、- .right
- .ctrl、- .alt、- .shift、- .meta
你可以将多个修饰符组合起来使用,如 @keyup.enter.ctrl。
示例:
<input @keyup.enter="submitForm">
<input @keydown.tab="switchTab">
4. 自定义指令修饰符
当你定义自定义指令时,你也可以在绑定指令时添加修饰符来改变其行为。这需要在自定义指令的定义中特别处理这些修饰符。
总结
Vue 的修饰符为开发者提供了在不需要编写额外代码的情况下改变事件或指令行为的能力,从而提高了开发效率和代码的可读性。