Vue - 事件处理详解

组件代码

下面是一个基本的 Vue.js 组件代码，其中包含了不同类型的事件处理器：

内联事件处理器

内联事件处理器是一种简单而直接的处理事件的方式。在上述代码中，我们使用 @click 或 v-on:click 来监听按钮的点击事件，并调用相应的方法。例如，@click="increaseCount" 表示点击按钮时调用 increaseCount 方法来增加计数。

方法事件处理器

当事件处理逻辑变得更为复杂时，可以使用方法事件处理器。在上述代码中，我们定义了 greet、say、warn、和 increaseCount 方法，然后通过 @click 直接引用这些方法。这使得代码更加模块化和易于维护。

事件参数和修饰符

Vue.js 允许我们访问原生 DOM 事件及其参数。例如，通过 $event 变量，我们可以在 warn 方法中访问原生 DOM 事件，并阻止其默认行为。同时，Vue.js 提供了事件修饰符，如 .stop、.prevent、.self 等，用于简化事件处理的常见需求。