1. 什么是事件处理？
事件处理指的是网页中用户触发的动作，比如点击按钮、鼠标悬停、键盘输入等。在 Vue 中，我们可以使用 v-on 指令来监听这些事件并执行特定的代码。
2. Vue 中的 v-on 指令
v-on 是 Vue 中的一个指令，专门用来监听 DOM 事件。它的格式如下：
<button v-on:事件名="方法名">按钮</button>
例如，如果我们要在点击按钮时执行一个叫 handleClick 的方法，可以写成：
<button v-on:click="handleClick">点击我</button>
这里的 click 就是事件名，handleClick 是定义的要执行的方法。
简写形式
为了方便，Vue 提供了一个缩写方式，把 v-on: 简写成 @。这样上面的代码可以写成：
<button @click="handleClick">点击我</button>
3. 基本事件处理：定义方法并响应事件
首先，我们要在 Vue 组件的 methods 部分定义事件触发时的处理函数。
例子
<div id="app">
<button @click="handleClick">点击我</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
handleClick() {
alert('按钮被点击了！');
}
}
});
</script>
在这个例子中，当点击按钮时，页面会弹出一个提示框：“按钮被点击了！”。这个提示框就是 handleClick 方法中的 alert 函数产生的效果。
4. 事件对象 event
在 JavaScript 中，事件发生时会生成一个事件对象，通常表示为 event。它包含了很多与事件相关的信息，比如事件类型、目标元素等。
在 Vue 中，我们可以通过 $event 关键字访问这个事件对象，例如：
<div id="app">
<button @click="handleClick($event)">点击我</button>
</div>
<script>
new Vue({
el: '#app',
methods: {
handleClick(event) {
console.log(event); // 事件对象
}
}
});
</script>
这样可以在控制台中看到关于点击事件的详细信息，比如点击的位置、按下的按钮等。
5. 传递参数和事件对象
如果需要给方法传递参数，同时又要使用事件对象，可以这样写：
<button @click="handleClick('hello', $event)">点击我</button>
在方法中定义多个参数来接收：
methods: {
handleClick(message, event) {
console.log(message); // 'hello'
console.log(event); // 事件对象
}
}
6. 常见的事件类型
Vue 支持 HTML DOM 标准中的所有事件类型，以下是一些常见的事件：
click：点击事件dblclick：双击事件mouseover：鼠标悬停事件mouseout：鼠标离开事件keydown：按下键盘按键keyup：松开键盘按键submit：表单提交事件
你可以使用 v-on 或 @ 来监听这些事件，比如：
<input @keyup="handleKeyup" placeholder="按下键盘任意键触发事件" />
7. 事件修饰符
Vue 提供了很多 事件修饰符 来简化代码。修饰符是写在事件名称后面的特殊关键字，用来指定事件的额外行为。
.stop 阻止事件冒泡
在 HTML 中，事件会冒泡到父级元素。.stop 修饰符可以阻止这种行为：
<button @click.stop="handleClick">点击我</button>
.prevent 阻止默认行为
一些 HTML 标签（如 <a> 和 <form>）有默认行为，可以使用 .prevent 来阻止默认行为：
<a href="https://www.example.com" @click.prevent="handleClick">点击我</a>
.capture 使用捕获模式
默认情况下，事件是从内到外传播的（冒泡阶段）。.capture 修饰符让事件在捕获阶段触发。
<div @click.capture="handleDivClick">
<button @click="handleButtonClick">按钮</button>
</div>
.self 只在自身元素上触发事件
.self 修饰符只会在事件发生在当前元素上时触发处理函数，而不会冒泡触发：
<div @click.self="handleDivClick">
<button>按钮</button>
</div>
.once 只触发一次事件
.once 修饰符让事件只触发一次：
<button @click.once="handleClick">只触发一次的按钮</button>
8. 键盘事件修饰符
Vue 为键盘事件提供了便捷的修饰符，例如 @keyup.enter 表示当按下回车键时触发事件。常用的键盘事件修饰符有：
.enter.tab.delete.esc.space.up.down.left.right
例子
<input @keyup.enter="submitForm" placeholder="按下回车键提交" />
9. 实战：表单输入事件处理
我们结合前面的知识点做一个表单输入事件的小示例：
<div id="app">
<form @submit.prevent="handleSubmit">
<label>
姓名：
<input v-model="name" @input="handleInput" placeholder="输入您的名字" />
</label>
<button type="submit">提交</button>
</form>
<p>输入的名字：{{ name }}</p>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
name: ''
};
},
methods: {
handleInput(event) {
console.log('输入内容：', event.target.value);
},
handleSubmit() {
alert(`提交的名字是：${this.name}`);
}
}
});
</script>
这个示例中，我们有一个表单，当用户输入名字时，会触发 input 事件显示输入内容，而点击提交按钮时会弹出提交的信息。
10. 小结
- 用
v-on（或@）监听事件。 methods定义事件处理方法。$event获取事件对象。- 使用修饰符简化事件处理逻辑。
