事件处理分类
内联事件处理：内联事件处理是指直接在 Vue 模板的 HTML 元素上写入 JavaScript 代码来处理事件。这种方式允许你在模板中直接定义事件响应逻辑，而不是在 Vue 实例的 methods 部分。这种方式适用于简单的逻辑，可以避免为了小功能而编写额外的方法
<button @click="console.log('Button clicked')">Click me</button>
方法事件处理：这是一种更常见的处理方式，涉及在 Vue 实例的 methods 属性中定义一个方法，然后在模板中引用这个方法。这种方式使得代码更加模块化和可重用，特别是对于复杂的逻辑处理。它有助于保持模板的简洁和可维护性
<template>
<button @click="handleClick">Click me</button>
</template>
<script>
export default {
methods: {
handleClick() {
console.log('Button clicked');
}
}
}
</script>
事件监听
可以使用 v-on 指令或其缩写 @ 来监听 DOM 事件。例如，v-on:click 或 @click 用于监听点击事件
事件处理器
将模板中的事件与 methods 中的方法相连接。例如，如果你有一个名为 handleClick 的方法，你可以在模板中通过 @click="handleClick" 来指定当用户点击时调用此方法
事件修饰符
提供了一系列的事件修饰符来进行常见的事件处理模式，例如 .prevent（阻止默认行为），.stop（停止事件冒泡），.once（事件只触发一次）等
按键修饰符
Vue 提供了按键修饰符（如 .enter, .esc），允许你只在特定键被按下时触发方法