15、Vue 修饰符完全指南
目录
一、事件修饰符（Event Modifiers）
1. 基础事件修饰符
2. 修饰符链式调用
3. 实际应用示例
二、按键修饰符（Key Modifiers）
1. 基础按键修饰符
2. 系统修饰键
3. 鼠标按键修饰符
4. 实际应用示例
三、表单修饰符（v-model Modifiers）
1. 基础表单修饰符
2. 实际应用示例
四、自定义修饰符
Vue 2 中的自定义修饰符
Vue 3 中的自定义 v-model 修饰符
多个 v-model 的修饰符（Vue 3）
五、Vue 2 vs Vue 3 修饰符对比
1. 主要区别
2. 按键修饰符变化
3. native 修饰符变化
4. v-model 修饰符增强
5. 完整对比示例
六、面试回答模板
问题1：Vue 中有哪些修饰符？
问题2：.stop 和 .prevent 的区别？
问题3：Vue 2 和 Vue 3 修饰符有什么区别？
问题4：如何自定义 v-model 修饰符？（Vue 3）
问题5：.passive 修饰符的作用？
一、事件修饰符（Event Modifiers）
1. 基础事件修饰符
<!-- .stop - 阻止事件冒泡，等同于 event.stopPropagation() --> <div @click="handleParent"> <button @click.stop="handleChild">点击我不会触发父元素</button> </div> <!-- .prevent - 阻止默认行为，等同于 event.preventDefault() --> <form @submit.prevent="handleSubmit"> <button type="submit">提交</button> </form> <!-- .capture - 使用事件捕获模式 --> <div @click.capture="handleCapture"> <button @click="handleClick">捕获阶段触发</button> </div> <!-- .self - 只在事件目标是元素本身时触发 --> <div @click.self="handleSelf"> <button>点击按钮不会触发</button> 点击这里才会触发 </div> <!-- .once - 事件只触发一次 --> <button @click.once="handleOnce">只能点击一次</button> <!-- .passive - 提升移动端性能，告诉浏览器不会调用 preventDefault --> <div @scroll.passive="handleScroll"> 滚动内容 </div>2. 修饰符链式调用
<!-- 修饰符可以串联使用，从左到右执行 --> <button @click.stop.prevent="handleClick"> 阻止冒泡并阻止默认行为 </button> <!-- 注意顺序很重要 --> <button @click.prevent.self="handleClick"> <!-- 会阻止所有点击的默认行为 --> </button> <button @click.self.prevent="handleClick"> <!-- 只阻止元素自身点击的默认行为 --> </button>3. 实际应用示例
<template> <div class="modal-wrapper" @click.self="closeModal"> <div class="modal-content"> <!-- 点击内容区不会关闭弹窗 --> <form @submit.prevent="handleSubmit"> <input type="text" v-model="form.name"> <button type="submit">提交</button> </form> <!-- 移动端滚动优化 --> <div class="scroll-area" @touchmove.passive="handleScroll"> 长列表内容 </div> </div> </div> </template>二、按键修饰符（Key Modifiers）
1. 基础按键修饰符
<!-- 按键别名 --> <input @keyup.enter="handleSubmit"> <!-- 回车 --> <input @keyup.tab="handleTab"> <!-- Tab --> <input @keyup.delete="handleDelete"> <!-- Delete 和 Backspace --> <input @keyup.esc="handleEsc"> <!-- Esc --> <input @keyup.space="handleSpace"> <!-- 空格 --> <input @keyup.up="handleUp"> <!-- 上箭头 --> <input @keyup.down="handleDown"> <!-- 下箭头 --> <input @keyup.left="handleLeft"> <!-- 左箭头 --> <input @keyup.right="handleRight"> <!-- 右箭头 --> <!-- 使用 keyCode（Vue 3 已废弃） --> <input @keyup.13="handleEnter"> <!-- Vue 2 支持，Vue 3 不推荐 --> <!-- 自定义按键别名（Vue 2） --> Vue.config.keyCodes.f1 = 112 <input @keyup.f1="handleF1">2. 系统修饰键
<!-- .ctrl --> <input @keyup.ctrl.enter="handleCtrlEnter"> <!-- .alt --> <input @keyup.alt.s="handleAltS"> <!-- .shift --> <input @keyup.shift.delete="handleShiftDelete"> <!-- .meta (Mac 的 Command 键，Windows 的 Win 键) --> <input @keyup.meta.c="handleCopy"> <!-- .exact - 精确匹配，只有按下指定键时才触发 --> <button @click.ctrl.exact="handleCtrl"> 只有 Ctrl 被按下时才触发 </button> <button @click.ctrl="handleCtrl"> Ctrl + 其他键也会触发 </button>3. 鼠标按键修饰符
<!-- .left - 鼠标左键 --> <button @click.left="handleLeftClick">左键点击</button> <!-- .right - 鼠标右键 --> <div @click.right.prevent="handleRightClick">右键菜单</div> <!-- .middle - 鼠标中键 --> <div @click.middle="handleMiddleClick">中键点击</div>4. 实际应用示例
<template> <div class="editor"> <!-- 搜索框：回车搜索 --> <input v-model="keyword" @keyup.enter="handleSearch" @keyup.esc="clearKeyword" placeholder="输入关键词，回车搜索" > <!-- 快捷键操作 --> <div @keydown.ctrl.s.prevent="handleSave" @keydown.ctrl.z.prevent="handleUndo" @keydown.ctrl.shift.z.prevent="handleRedo" tabindex="0" > 编辑器内容 </div> <!-- 列表导航 --> <ul> <li v-for="(item, index) in list" :key="item.id" @keydown.up.prevent="selectPrev" @keydown.down.prevent="selectNext" @keydown.enter="selectItem(item)" > {{ item.name }} </li> </ul> </div> </template> <script> export default { methods: { handleSave() { console.log('Ctrl + S 保存') }, handleUndo() { console.log('Ctrl + Z 撤销') }, handleRedo() { console.log('Ctrl + Shift + Z 重做') } } } </script>三、表单修饰符（v-model Modifiers）
1. 基础表单修饰符
<!-- .lazy - 在 change 事件后同步，而不是 input 事件 --> <input v-model.lazy="message"> <!-- 失去焦点或按回车时才更新 --> <!-- .number - 自动转换为数字类型 --> <input v-model.number="age" type="number"> <!-- 如果无法被 parseFloat() 解析，返回原始值 --> <!-- .trim - 自动过滤首尾空白字符 --> <input v-model.trim="username"> <!-- 组合使用 --> <input v-model.lazy.trim="message"> <input v-model.number.lazy="price">2. 实际应用示例
<template> <form @submit.prevent="handleSubmit"> <!-- 用户名：去除空格 --> <input v-model.trim="form.username" placeholder="用户名" > <!-- 年龄：转换为数字 --> <input v-model.number="form.age" type="number" placeholder="年龄" > <!-- 价格：数字 + 延迟更新 --> <input v-model.number.lazy="form.price" placeholder="价格" > <!-- 备注：延迟更新 + 去除空格 --> <textarea v-model.lazy.trim="form.remark" placeholder="备注" ></textarea> <button type="submit">提交</button> </form> </template> <script> export default { data() { return { form: { username: '', age: null, price: null, remark: '' } } }, methods: { handleSubmit() { console.log(this.form) console.log(typeof this.form.age) // number console.log(typeof this.form.price) // number } } } </script>四、自定义修饰符
Vue 2 中的自定义修饰符
// 全局自定义指令修饰符 Vue.directive('focus', { inserted(el, binding) { if (binding.modifiers.lazy) { setTimeout(() => el.focus(), 100) } else { el.focus() } } }) // 使用 <input v-focus.lazy>Vue 3 中的自定义 v-model 修饰符
<!-- 父组件 --> <template> <CustomInput v-model.capitalize="text" /> </template> <!-- CustomInput.vue --> <script setup> import { computed } from 'vue' const props = defineProps({ modelValue: String, modelModifiers: { default: () => ({}) } }) const emit = defineEmits(['update:modelValue']) const emitValue = (e) => { let value = e.target.value // 检查是否有 capitalize 修饰符 if (props.modelModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1) } emit('update:modelValue', value) } </script> <template> <input :value="modelValue" @input="emitValue" > </template>多个 v-model 的修饰符（Vue 3）
<!-- 父组件 --> <template> <UserForm v-model:first-name.capitalize="firstName" v-model:last-name.uppercase="lastName" /> </template> <!-- UserForm.vue --> <script setup> const props = defineProps({ firstName: String, firstNameModifiers: { default: () => ({}) }, lastName: String, lastNameModifiers: { default: () => ({}) } }) const emit = defineEmits(['update:firstName', 'update:lastName']) const handleFirstName = (e) => { let value = e.target.value if (props.firstNameModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1) } emit('update:firstName', value) } const handleLastName = (e) => { let value = e.target.value if (props.lastNameModifiers.uppercase) { value = value.toUpperCase() } emit('update:lastName', value) } </script> <template> <div> <input :value="firstName" @input="handleFirstName"> <input :value="lastName" @input="handleLastName"> </div> </template>五、Vue 2 vs Vue 3 修饰符对比
1. 主要区别
| 特性 | Vue 2 | Vue 3 |
|---|---|---|
| 按键码 | 支持@keyup.13 | 已移除，必须使用别名 |
| 自定义按键别名 | Vue.config.keyCodes | 已移除 |
| v-model 修饰符 | 仅支持.lazy/.number/.trim | 支持自定义修饰符 |
| 多个 v-model | 不支持 | 支持，且每个都可以有修饰符 |
| native 修饰符 | @click.native用于组件 | 已移除，不再需要 |
2. 按键修饰符变化
<!-- Vue 2 --> <input @keyup.13="handleEnter"> <!-- ✅ 支持 --> <input @keyup.enter="handleEnter"> <!-- ✅ 支持 --> Vue.config.keyCodes.f1 = 112 // ✅ 支持自定义 <input @keyup.f1="handleF1"> <!-- Vue 3 --> <input @keyup.13="handleEnter"> <!-- ❌ 不支持 --> <input @keyup.enter="handleEnter"> <!-- ✅ 必须使用别名 --> // ❌ Vue.config.keyCodes 已移除 // 需要使用自定义指令或直接判断 event.key <input @keyup="handleKeyup"> <script setup> const handleKeyup = (e) => { if (e.key === 'F1') { // 处理 F1 } } </script>3. native 修饰符变化
<!-- Vue 2 - 需要 .native 修饰符 --> <MyComponent @click.native="handleClick" /> <!-- Vue 3 - 不需要 .native，未在 emits 中声明的事件自动成为原生事件 --> <MyComponent @click="handleClick" /> <!-- Vue 3 组件中 --> <script setup> // 如果声明了 click 事件，则为自定义事件 defineEmits(['click']) // 如果没有声明，@click 会绑定到根元素的原生事件 </script>4. v-model 修饰符增强
<!-- Vue 2 - 只能使用内置修饰符 --> <input v-model.lazy.trim.number="value"> <!-- 不支持自定义修饰符 --> <CustomInput v-model.capitalize="value" /> <!-- ❌ 无效 --> <!-- Vue 3 - 支持自定义修饰符 --> <CustomInput v-model.capitalize="value" /> <!-- ✅ 可以自定义处理 --> <!-- 多个 v-model，每个都可以有修饰符 --> <CustomInput v-model:title.capitalize="title" v-model:content.trim="content" />5. 完整对比示例
<!-- ============ Vue 2 ============ --> <template> <div> <!-- 组件事件需要 .native --> <MyButton @click.native="handleClick" /> <!-- 支持按键码 --> <input @keyup.13="handleEnter"> <!-- v-model 只有内置修饰符 --> <input v-model.trim="text"> <!-- 只支持单个 v-model --> <CustomInput v-model="value" /> </div> </template> <script> // 自定义按键别名 Vue.config.keyCodes.f1 = 112 export default { data() { return { text: '', value: '' } } } </script> <!-- ============ Vue 3 ============ --> <template> <div> <!-- 不需要 .native --> <MyButton @click="handleClick" /> <!-- 必须使用按键别名 --> <input @keyup.enter="handleEnter"> <!-- 支持自定义修饰符 --> <input v-model.trim="text"> <CustomInput v-model.capitalize="value" /> <!-- 支持多个 v-model --> <CustomInput v-model:first-name.capitalize="firstName" v-model:last-name.uppercase="lastName" /> </div> </template> <script setup> import { ref } from 'vue' const text = ref('') const value = ref('') const firstName = ref('') const lastName = ref('') // 自定义按键处理 const handleKeyup = (e) => { if (e.key === 'F1') { console.log('F1 pressed') } } </script>六、面试回答模板
问题1：Vue 中有哪些修饰符？
回答：
Vue 的修饰符主要分为四类：
- 事件修饰符：
.stop、.prevent、.capture、.self、.once、.passive- 按键修饰符：
.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right- 系统修饰键：
.ctrl、.alt、.shift、.meta、.exact- 表单修饰符：
.lazy、.number、.trim这些修饰符可以简化事件处理逻辑，提高代码可读性。
问题2：.stop 和 .prevent 的区别？
回答：
.stop阻止事件冒泡，相当于event.stopPropagation().prevent阻止默认行为，相当于event.preventDefault()例如：
.stop用于阻止点击子元素时触发父元素的点击事件.prevent用于阻止表单提交、链接跳转等默认行为它们可以链式使用：
@click.stop.prevent
问题3：Vue 2 和 Vue 3 修饰符有什么区别？
回答：
主要区别有：
- 按键码移除：Vue 3 不再支持
@keyup.13，必须使用别名如@keyup.enter- native 修饰符移除：Vue 3 中不需要
.native，未声明的事件自动绑定到原生事件- 自定义 v-model 修饰符：Vue 3 支持自定义 v-model 修饰符，通过
modelModifiers接收- 多个 v-model：Vue 3 支持多个 v-model，每个都可以有自己的修饰符
这些改进让 Vue 3 的 API 更加一致和灵活。
问题4：如何自定义 v-model 修饰符？（Vue 3）
回答：
// 组件接收 modelModifiers const props = defineProps({ modelValue: String, modelModifiers: { default: () => ({}) } }) // 在更新时检查修饰符 const emit = defineEmits(['update:modelValue']) const handleInput = (e) => { let value = e.target.value if (props.modelModifiers.capitalize) { value = value.charAt(0).toUpperCase() + value.slice(1) } emit('update:modelValue', value) }这样就可以使用
v-model.capitalize="text"了。
问题5：.passive 修饰符的作用？
回答：
.passive修饰符用于提升移动端滚动性能。它告诉浏览器事件处理函数不会调用preventDefault()，浏览器可以立即执行滚动，而不用等待 JavaScript 执行完毕。<div @scroll.passive="handleScroll">注意：不能与
.prevent同时使用，因为它们是矛盾的。