【Vue】修饰符

个人博客：haichenyi.com。感谢关注

一. 目录

• 一–目录
• 二–修饰符的作用​
• 三–常见修饰符分类及示例
• 四–Vue 3 的变化​
• 五–总结​​

二. 修饰符的作用

1. ​简化代码：​ 例如，用 .prevent 代替手动调用 event.preventDefault()。
2. 约束行为​： 例如，限制事件只在特定按键（.enter）或鼠标按键（.right）下触发。
3. 优化交互​： 例如，表单输入时自动过滤空格（.trim）或转为数字（.number）。
   

三. 常见修饰符分类及示例

1. 事件修饰符（v-on 或 @）
   • .stop： 阻止事件冒泡

   <button @click.stop="handleClick">点击不会冒泡</button>
   

   • .prevent： 阻止默认行为（如表单提交）

   <form @submit.prevent="onSubmit">阻止表单默认提交</form>
   

   • .capture： 事件在捕获阶段触发（而非冒泡阶段）

   <div @click.capture="handleCapture">捕获阶段触发</div>
   

   • .self： 仅当事件在元素自身（而非子元素）触发时生效

   <div @click.self="handleSelf">子元素点击不会触发</div>
   

   • .once： 事件只触发一次

   <button @click.once="handleOnce">只能点击一次</button>
   

2. 表单修饰符（v-model）
   • .lazy： 将 input 事件转为 change 事件（输入完成才更新）

   <input v-model.lazy="message"> <!-- 输入框失焦后更新数据 -->
   

   • .number： 将输入值转为数字类型

   <input v-model.number="age" type="number"> <!-- 输入 "123" 转为 123 -->
   

   • .trim： 自动去除首尾空格

   <input v-model.trim="username"> <!-- 输入 "  vue  " 转为 "vue" -->
   

3. 键盘修饰符（@keyup、@keydown）
   • 按键别名

   //监听特定按键：
   <input @keyup.enter="submit"> <!-- 按下回车键触发 -->
   <input @keyup.esc="cancel">  <!-- 按下 ESC 键触发 -->
   

   • 系统修饰键

   //组合按键触发：
   <input @keyup.ctrl.c="copy"> <!-- 按下 Ctrl + C 触发 -->
   

4. 鼠标修饰符（@click 等）
   • .left​​、​​.right​​、​​.middle

   //限制鼠标按键触发
   <div @click.right="showMenu">右键点击显示菜单</div>
   

四. Vue 3 的变化

1. 移除 .native： 在 Vue 3 中，组件事件需通过 emits 显式声明，不再需要 .native。

五. 总结

分类	修饰符示例	作用
事件	.stop .prevent	控制事件传播和默认行为
表单	.lazy .trim	优化输入更新和格式过滤
键盘	.enter .ctrl	监听特定按键或组合键
鼠标	.right	限制鼠标按键触发
v-bind	.prop .camel	控制属性绑定方式