Vue 3 修饰符(Modifiers)

在 Vue 3 中,修饰符(Modifiers)是用于给指令(Directives)添加特殊行为的后缀,通过点符号 . 表示。它们可以简化常见的操作,让代码更简洁高效。

以下是 Vue 3 中常用的修饰符分类及示例:

1. 事件修饰符(Event Modifiers)

用于处理 DOM 事件的修饰符,最常用的有:

  • .stop:阻止事件冒泡

  • .prevent:阻止默认行为

  • .self:仅当事件在元素本身触发时才执行(不包括子元素)

  • .once:事件只触发一次

  • .passive:优化滚动性能,禁止使用 .prevent

vue

xml 复制代码
<template>
  <div @click="handleParent">
    <!-- 阻止冒泡 -->
    <button @click.stop="handleChild">点击</button>
    
    <!-- 阻止默认行为(如表单提交) -->
    <form @submit.prevent="handleSubmit"></form>
    
    <!-- 只触发一次 -->
    <button @click.once="handleClickOnce">只点一次</button>
  </div>
</template>

2. 按键修饰符(Key Modifiers)

用于监听特定键盘事件:

  • .enter:回车键

  • .tab:Tab 键

  • .delete:删除 / 退格键

  • .esc:ESC 键

  • .space:空格键

  • .up/.down/.left/.right:方向键

vue

xml 复制代码
<template>
  <!-- 按回车时触发 -->
  <input @keyup.enter="submitForm" />
  
  <!-- 按ESC时触发 -->
  <input @keyup.esc="clearInput" />
</template>

3. 系统修饰符(System Modifiers)

用于组合系统按键:

  • .ctrl

  • .alt

  • .shift

  • .meta(Windows 键或 Command 键)

vue

xml 复制代码
<template>
  <!-- Ctrl + 点击 -->
  <button @click.ctrl="doSomething">Ctrl+点击</button>
  
  <!-- Alt + 回车 -->
  <input @keyup.alt.enter="handleAltEnter" />
</template>

4. 鼠标按钮修饰符

  • .left:左键点击

  • .right:右键点击

  • .middle:中键点击

vue

xml 复制代码
<template>
  <div @click.right.prevent="showContextMenu">
    右键点击显示菜单
  </div>
</template>

5. v-model 修饰符

专门用于 v-model 指令:

  • .lazy:从 input 事件改为 change 事件同步(失去焦点时更新)

  • .number:将输入值转为数字

  • .trim:自动去除输入内容的首尾空格

vue

xml 复制代码
<template>
  <input v-model.lazy="msg" /> <!-- 失去焦点才更新 -->
  <input v-model.number="age" /> <!-- 转为数字类型 -->
  <input v-model.trim="username" /> <!-- 自动去除空格 -->
</template>

6. 表单修饰符

  • .camel:将绑定的属性名转为驼峰式命名(用于 SVG 元素)

vue

xml 复制代码
<template>
  <svg :view-box.camel="viewBox"></svg>
  <!-- 等价于 :viewBox -->
</template>

修饰符的组合使用

修饰符可以链式组合使用:

vue

xml 复制代码
<template>
  <!-- 阻止默认行为 + 只触发一次 -->
  <a href="https://example.com" @click.prevent.once="handleClick">链接</a>
</template>

这些修饰符极大地简化了常见的 DOM 操作逻辑,避免了在方法中编写大量重复的代码(如 event.preventDefault()event.stopPropagation())。

相关推荐
一个处女座的程序猿O(∩_∩)O10 分钟前
React 多组件状态管理:从组件状态到全局状态管理全面指南
前端·react.js·前端框架
鹏多多13 分钟前
用useTransition解决React性能卡顿问题+实战例子
前端·javascript·react.js
只愿云淡风清23 分钟前
ECharts地图数据压缩-ZigZag算法
前端·javascript·echarts
亿元程序员31 分钟前
都2025年了,还有面试问A*寻路的???
前端
Moment31 分钟前
Node.js v25.0.0 发布——性能、Web 标准与安全性全面升级 🚀🚀🚀
前端·javascript·后端
杨超越luckly35 分钟前
HTML应用指南:利用POST请求获取中国一汽红旗门店位置信息
前端·arcgis·html·数据可视化·门店数据
专注前端30年40 分钟前
【JavaScript】every 方法的详解与实战
开发语言·前端·javascript
速易达网络42 分钟前
Java Web登录系统实现(不使用开发工具)
java·开发语言·前端
IT_陈寒1 小时前
Vite 3.0 性能优化实战:5个技巧让你的构建速度提升200% 🚀
前端·人工智能·后端
金士顿1 小时前
EC-Engineer SDK 核心 API 使用指南
前端