###
Vue.js
键盘事件修饰符及全部属性列表
Vue.js 提供了一系列
键盘事件修饰符，这些修饰符能够帮助开发者更方便地处理键盘输入行为。以下是完整的
键盘事件修饰符及其功能描述：
#### 1. 自动注册的按键别名
Vue 内置了一些常用的按键别名，可以直接通过 `.keyName` 的形式使用[^1]。
| 按键名称 | 描述 |
|----------|--------------------------|
| `.enter` | 监听 Enter 键 |
| `.tab` | 监听 Tab 键 |
| `.delete`| 监听 Delete 或 Backspace 键 |
| `.esc` | 监听 Escape 键 |
| `.space` | 监听 Spacebar 键 |
| `.up` | 监听 Up Arrow 键 |
| `.down` | 监听 Down Arrow 键 |
| `.left` | 监听 Left Arrow 键 |
| `.right` | 监听 Right Arrow 键 |
示例代码如下：
```html
<input @
keyup.enter="onEnter">
<script>
new
Vue({
el: '#app',
methods: {
onEnter
() {
console.log
('Enter key pressed'
);
}
}
}
);
</script>
```
---
#### 2. 数字键码支持
除了内置的按键别名外，还可以直接使用按键对应的 ASCII 码值作为修饰符。例如，监听 `F2` 键可以通过设置自定义键码实现[^3]。
示例代码如下：
```javascript
Vue.config.keyCodes.f2 = 113; // 设置 F2 键的键码为 113
<div id="app">
<input @
keyup.f2="onF2Press">
</div>
<script>
new
Vue({
el: '#app',
methods: {
onF2Press
() {
console.log
('F2 key pressed'
);
}
}
}
);
</script>
```
---
#### 3. 系统修饰键的支持
Vue 还提供了对系统修饰键（如 Ctrl, Alt, Shift, Meta）的支持，允许组合多个修饰键进行复杂操作[^2]。
| 修饰键 | 描述 |
|---------------|----------------------------|
| `.ctrl` | 需要按下 Ctrl 键 |
| `.alt` | 需要按下 Alt 键 |
| `.shift` | 需要按下 Shift 键 |
| `.meta` | 需要按下 Meta
(Command
) 键|
示例代码如下：
```html
<input @
keydown.ctrl.space="onCtrlSpace">
<script>
new
Vue({
el: '#app',
methods: {
onCtrlSpace
() {
console.log
('Ctrl + Space pressed'
);
}
}
}
);
</script>
```
---
#### 4. 组合修饰符
可以将多个修饰符链式调用，从而实现复杂的
键盘事件监听逻辑[^5]。
示例代码如下：
```html
<input @
keydown.ctrl.alt.enter="onCtrlAltEnter">
<script>
new
Vue({
el: '#app',
methods: {
onCtrlAltEnter
() {
console.log
('Ctrl + Alt + Enter pressed'
);
}
}
}
);
</script>
```
---
#### 5. 特殊事件修饰符
Vue 中还提供了一些特殊的事件修饰符，用于控制默认行为或事件传播[^4]。
| 修饰符 | 功能 |
|-------------------|----------------------------------------|
| `.stop` | 调用 event.stopPropagation
() |
| `.prevent` | 调用 event.preventDefault
() |
| `.capture` | 添加事件侦听器时使用捕获模式 |
| `.self` | 只当事件是从侦听器绑定的元素本身触发时才触发回调 |
| `.once` | 只触发一次 |
| `.passive` | 表明事件不会调用 preventDefault 方法 |
示例代码如下：
```html
<a href="#" @click.stop.prevent="onClick">链接</a>
<script>
new
Vue({
el: '#app',
methods: {
onClick
() {
console.log
('Link clicked but default action is prevented.'
);
}
}
}
);
</script>
```
---
### 总结
以上列举了
Vue.js 中常见的
键盘事件修饰符以及其具体应用方式。通过合理运用这些修饰符，可以显著提高用户体验和开发效率。
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
