Vue 中 vue 常用的修饰符？

Vue 中常用的修饰符可以帮助在事件处理、表单控件绑定和指令中添加额外的特殊功能。以下是一些常见的 Vue 修饰符：

1. 事件修饰符：
   • .stop：阻止事件继续传播。
   • .prevent：阻止默认事件行为。
   • .capture：事件捕获，由内部元素向外部元素传播。
   • .self：只有当事件是从触发元素自身触发时才触发。
   • .once：只触发一次事件。
   • .passive：指示浏览器可以安全地对事件进行默认行为的优化。

示例：

<!-- 阻止事件传播 -->
<button @click.stop="handleClick">阻止传播</button>

<!-- 阻止默认行为 -->
<form @submit.prevent="handleSubmit">阻止默认提交</form>

<!-- 事件捕获 -->
<div @click.capture="handleClick">捕获事件</div>

<!-- 只有自身触发时才执行 -->
<div @click.self="handleClick">只有自身触发</div>

<!-- 只触发一次 -->
<button @click.once="handleClick">只触发一次</button>

<!-- 指示浏览器进行 passivity 优化 -->
<div @touchstart.passive="handleTouchStart">passive 修饰符</div>

2. 按键修饰符：
   • .enter：监听回车键（Enter）事件。
   • .tab：监听 Tab 键事件。
   • .delete / .backspace：监听删除键事件。
   • .esc：监听 ESC 键事件。
   • .space：监听空格键事件。
   • .up / .down / .left / .right：监听方向键事件。

示例：

<!-- 监听回车键事件 -->
<input @keyup.enter="handleSubmit">

<!-- 监听 Tab 键事件 -->
<input @keydown.tab="handleTab">

<!-- 监听方向键事件 -->
<div @keydown.up="moveUp"></div>

3. 表单修饰符：
   • .lazy：将输入内容在 "change" 而不是 "input" 事件中更新。
   • .number：将输入值转为数字类型。
   • .trim：自动过滤输入的首尾空白字符。

示例：

<!-- 将输入内容在 change 事件中更新 -->
<input v-model.lazy="inputValue">

<!-- 将输入值转为数字类型 -->
<input v-model.number="age">

<!-- 自动过滤输入的首尾空白字符 -->
<input v-model.trim="trimmedInput">

这些修饰符能够提供方便且精确的控制，使得事件处理、按键检测和表单绑定更加灵活和方便。