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())。

相关推荐
IT_陈寒7 分钟前
Python 3.12 性能暴增50%!这5个新特性让老项目直接起飞
前端·人工智能·后端
excel12 分钟前
JavaScript 中的对象池:复用对象的高效方案
前端
excel17 分钟前
Vue实例挂载的过程中发生了什么
前端
琹箐21 分钟前
Aupload + vuedraggable实现 上传的文件可以拖拽排序
前端·vue.js
前端 贾公子25 分钟前
Vue.js props mutating:反模式如何被视为一种良好实践。
前端·javascript·vue.js
Filotimo_6 小时前
2.CSS3.(2).html
前端·css
yinuo7 小时前
uniapp微信小程序华为鸿蒙定时器熄屏停止
前端
gnip9 小时前
vite中自动根据约定目录生成路由配置
前端·javascript
前端橙一陈10 小时前
LocalStorage Token vs HttpOnly Cookie 认证方案
前端·spring boot
~无忧花开~10 小时前
JavaScript学习笔记(十五):ES6模板字符串使用指南
开发语言·前端·javascript·vue.js·学习·es6·js