Vue.js 提供了强大而灵活的事件处理机制，让开发者能够轻松响应用户交互。本文将通过三个示例文件，全面介绍 Vue 事件处理的基础使用、事件修饰符和键盘事件处理。
一、Vue 事件基础使用
在 1.事件的基本使用.html 中，我们看到了 Vue 事件处理的基本用法：
1.1 事件绑定语法
Vue 提供了两种事件绑定语法：
html
复制下载运行
<!-- 完整语法 -->
<button v-on:click="showInfo">点击我</button>
<!-- 简写语法（推荐） -->
<button @click="showInfo">点击我2</button>
1.2 事件处理方法
事件处理函数定义在 Vue 实例的 methods 选项中：
javascript
复制下载
methods: {
showInfo(e) {
console.log(e.target.innerText);
console.log(this.name); // this 指向 Vue 实例
alert('你好')
}
}
1.3 传递参数
可以在调用事件处理函数时传递参数：
html
复制下载运行
<button @click="showInfo3($event, 666)">点击我3</button>
javascript
复制下载
showInfo3(e, num) {
console.log(num); // 666
console.log(e.target.innerText);
}
注意：使用 $event 可以传递原生 DOM 事件对象。
二、事件修饰符
在 2.事件修饰符.html 中，我们看到了 Vue 提供的六种事件修饰符：
2.1 常用修饰符
.prevent - 阻止默认行为
html
复制下载运行
<a href="https://www.baidu.com" @click.prevent="showInfo">点击跳转</a>
阻止链接的默认跳转行为。
.stop - 阻止事件冒泡
html
复制下载运行
<div class="demo1" @click="showInfo">
<button @click.stop="showInfo">点击我</button>
</div>
阻止点击按钮时事件冒泡到父元素。
.once - 事件只触发一次
html
复制下载运行
<button @click.once="showInfo">点击我2</button>
按钮点击一次后，后续点击不会触发事件。
2.2 高级修饰符
.capture - 使用事件捕获模式
html
复制下载运行
<div class="box1" @click.capture="showMessage(1)">
div1
<div class="box2" @click="showMessage(2)">div2</div>
</div>
默认事件流是冒泡阶段触发，使用 .capture 后改为捕获阶段触发。
.self - 仅在当前元素触发
只有 event.target 是当前元素时才触发事件，防止事件冒泡的干扰。
.passive - 立即执行默认行为
移动端滚动性能优化，事件的默认行为立即执行，无需等待事件回调执行完毕。
2.3 修饰符连写
修饰符可以连续使用：
html
复制下载运行
<a href="https://www.baidu.com" @click.prevent.stop="showInfo">点击跳转</a>
同时阻止默认行为和事件冒泡。
三、键盘事件处理
在 3.键盘事件.html 中，我们看到了 Vue 的键盘事件处理：
3.1 按键别名
Vue 为常用按键提供了别名：
- 回车：
enter - 删除：
delete（包含删除和退格键） - 退出：
esc - 空格：
space - 换行：
tab（需配合keydown使用） - 方向键：
up、down、left、right
3.2 基本使用
html
复制下载运行
<input type="text" placeholder="按下回车提示输入" @keyup.enter="showInfo">
javascript
复制下载
showInfo(e) {
console.log(e.target.value); // 获取输入框内容
}
3.3 系统修饰键
系统修饰键包括：ctrl、alt、shift、meta
- 配合
keyup：需同时按下修饰键和其他键，释放其他键时触发 - 配合
keydown：正常触发
3.4 自定义按键
javascript
复制下载
Vue.config.keyCodes.自定义键名 = 键码
可以为特定按键创建自定义别名。
四、最佳实践与总结
4.1 事件处理最佳实践
- 简洁性：优先使用
@简写语法 - 可读性：合理使用修饰符连写，但避免过度复杂
- 性能：使用
.once避免重复绑定，使用.passive优化移动端性能 - 兼容性：使用 Vue 提供的按键别名，而非直接使用 keyCode
4.2 事件修饰符使用场景总结
| 修饰符 | 适用场景 | 使用频率 |
|---|---|---|
.prevent | 阻止表单提交、链接跳转 | 常用 |
.stop | 防止事件冒泡冲突 | 常用 |
.once | 一次性操作（如提交按钮） | 常用 |
.capture | 需要捕获阶段处理事件 | 少用 |
.self | 精确控制事件触发源 | 少用 |
.passive | 移动端滚动优化 | 少用 |
4.3 键盘事件使用建议
- 表单操作优先使用
@keyup.enter - 游戏或特殊交互考虑方向键事件
- 组合键操作使用系统修饰键
- 避免过度依赖键盘事件，确保无障碍访问
五、完整示例整合
将三个文件的核心概念整合到一个示例中：
html
复制下载运行
<div id="app">
<!-- 基础事件 -->
<button @click="handleClick">点击事件</button>
<!-- 事件修饰符 -->
<form @submit.prevent="handleSubmit">
<input type="text" @keyup.enter="handleEnter">
<button type="submit">提交</button>
</form>
<!-- 阻止冒泡 -->
<div @click="parentClick">
<button @click.stop="childClick">子按钮</button>
</div>
</div>
<script>
new Vue({
el: '#app',
methods: {
handleClick() {
console.log('点击事件触发');
},
handleSubmit() {
console.log('表单提交（已阻止默认行为）');
},
handleEnter(e) {
console.log('回车键按下:', e.target.value);
},
parentClick() {
console.log('父元素点击');
},
childClick() {
console.log('子元素点击（不会冒泡）');
}
}
});
</script>
Vue 的事件处理系统既强大又灵活，通过合理使用事件绑定语法、修饰符和键盘事件处理，可以创建出响应迅速、用户体验良好的 Web 应用。掌握这些技巧将显著提升你的 Vue 开发效率和应用质量。
