Vue 事件处理

Vue 中的事件处理是使用 v-on 指令完成的，因此我们可以在单击按钮时进行某些操作。

事件处理是指当某个事件发生时，HTML 元素被设置为运行某个代码。Vue 中的事件易于使用，将使我们的页面真正响应。

Vue 方法是可以设置为在事件发生时运行的代码。

使用 v-onmodifiers，您可以更详细地描述如何对事件做出反应。

开始使用事件

让我们从一个例子开始，展示我们如何点击按钮来计数森林中的驼鹿。

我们需要：

• 一个按钮
• v-on 在 <button> 标记上监听 click 事件
• 增加驼鹿数量的代码
• Vue 实例中用于保存驼鹿数量的属性（变量）
• 双花括号 {{}} 显示驼鹿数量的增加

实例

点击按钮，在森林里再数一只驼鹿。每次单击按钮时，count 属性都会增加。

<div id="app">
  <img src="img_moose.jpg">
  <p>{{ "Moose count: " + count }}</p>
  <button v-on:click="count++">Count moose</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
  const app = Vue.createApp({
    data() {
      return {
        count: 0
      }
    }
  })
 app.mount('#app')
</script>

事件

有很多事件可以用作运行代码的触发器，其中最常见的有: 'click', 'mouseover', 'mouseout', 'keydown' 和 'input'。

有关要使用的事件的完整列表，您可以访问我们的 HTML DOM 页面事件。

v-on

v-on 指令允许我们创建响应用户操作的页面。

Vue v-on 的工作原理是告诉浏览器要监听什么事件，以及当该事件发生时该做什么。

方法

如果我们想在事件发生时运行更复杂的代码，我们可以将代码放在 Vue 方法中，并从 HTML 属性引用该方法，如下所示：

<p v-on:click="changeColor">Click me</p>

事件修饰符（Event Modifiers）

除了 v-on 和 Vue 方法之外，我们还可以使用一种名为事件修饰符的东西来修改事件，例如，在加载页面后只发生一次，或者修改像 'submit' 这样的事件来阻止表单提交。

了解更多信息

正如我们所看到的，在 Vue 中使用事件需要学习三种技术：

• Vue v-on 指令
• Vue 方法
• Vue v-on 修饰符

单击下一章继续本教程，并了解有关这些事件处理技术的更多信息。