在
Vue 中，指令
修饰符用于扩展指令的功能，通过 `.` 指明一些指令后缀，不同的后缀封装了不同的处理操作，从而简化代码并增强功能[^1]。
### 常见的
Vue 指令
修饰符及其用途
#### 1. **按键
修饰符**
用于监听特定按键事件，例如按下回车键触发操作：
```
html
<input type="text" @keyup.enter="fn" v-model="log">
```
该指令只在按下 **Enter** 键时触发函数 `fn`。[^1]
#### 2. **事件
修饰符**
- **`.prevent`**：阻止默认事件，等同于 `event.preventDefault()`。
```
html
<a href="https://example.com" @click.prevent="handleClick">点击</a>
```
- **`.stop`**：阻止事件冒泡，等同于 `event.stopPropagation()`。
```
html
<div @click="handleDiv">
<button @click.stop="handleButton">按钮</button>
</div>
```
- **`.self`**：只有当事件是从绑定元素本身触发时才触发。
```
html
<div @click.self="handleSelf">点击区域</div>
```
- **`.capture`**：事件捕获阶段触发。
```
html
<div @click.capture="handleCapture">捕获事件</div>
```
- **`.once`**：事件只触发一次。
```
html
<button @click.once="handleOnce">只触发一次</button>
```
- **`.passive`**：提高移动端性能，表示 `event.preventDefault()` 不会被调用。
```
html
<div @scroll.passive="handleScroll">滚动</div>
```
####
3. **鼠标按钮
修饰符**
- **`.left`**：左键点击触发。
```
html
<button @click.left="handleLeft">左键</button>
```
- **`.right`**：右键点击触发。
```
html
<button @click.right="handleRight">右键</button>
```
- **`.middle`**：中键点击触发。
```
html
<button @click.middle="handleMiddle">中键</button>
```
#### 4. **双向数据绑定
修饰符**
- **`.lazy`**：将 `input` 事件改为 `change` 事件，减少更新频率。
```
html
<input v-model.lazy="message">
```
- **`.number`**：自动将输入值转换为数字。
```
html
<input v-model.number="age">
```
- **`.trim`**：自动去除输入值的首尾空格。
```
html
<input v-model.trim="username">
```
#### 5. **条件渲染
修饰符**
- **`.show`**：控制元素的显示与隐藏，通过 `display` 属性切换。
```
html
<div v-show="isVisible">显示内容</div>
```
- **`.if`**：根据条件决定是否渲染元素。
```
html
<div v-if="isVisible">渲染内容</div>
```
###
修饰符的应用场景
- **按键
修饰符**：用于监听特定按键操作，例如按下回车提交表单。
- **事件
修饰符**：用于阻止默认行为或事件冒泡，例如阻止链接跳转或阻止事件冒泡到父元素。
- **鼠标按钮
修饰符**：用于区分不同鼠标按键的点击操作，例如右键菜单。
- **双向数据绑定
修饰符**：用于优化数据绑定行为，例如自动转换数字或去除空格。
- **条件渲染
修饰符**：用于控制元素的显示与隐藏，例如根据用户权限显示特定内容。
修饰符的顺序很重要，例如 `@click.prevent.self` 会阻止所有点击事件，而 `@click.self.prevent` 只会阻止对元素自身的点击[^
3]。
---
本文介绍了Vue中常用的事件修饰符如.prevent、.stop、.capture等，以及按键修饰符如.up、.down、.ctrl等，展示了如何通过这些修饰符来更精细地控制DOM事件。
扫一扫
6644
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
