18 事件处理之事件的基本使用

在上一章中，我们学习了条件渲染与列表渲染中如何使用 key 来优化渲染效率。这一章我们将深入探讨 Vue 中事件处理的基本使用，包括如何监听事件和响应用户操作。

基本事件处理

在 Vue 中，事件处理非常简单，我们可以使用 v-on 指令来监听 DOM 事件。v-on 可以缩写为 @ 符号，这样在模板中的使用会更加简洁。

事件监听

我们可以通过 v-on 指令将事件监听器绑定到 DOM 元素上。例如，下面的代码展示了如何监听 click 事件：

<template>
  <div>
    <button v-on:click="handleClick">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      alert('按钮被点击了！');
    }
  }
}
</script>

在这个例子中，当用户点击按钮时，handleClick 方法将被调用，弹出一个提示框。

使用修饰符

虽然本章重点是事件的基本使用，但在许多情况下，我们会用到事件修饰符（如 .stop 和 .prevent），这些修饰符帮助我们更好地控制事件的传播和默认行为。然而，具体的修饰符将在下一章深入讲解。

函数参数

我们可以通过事件处理器传入参数。例如，假设我们希望在点击按钮时传递一些额外的信息，可以将参数直接传递给事件处理函数，如下所示：

<template>
  <div>
    <button v-on:click="handleClick('Hello, Vue!')">点击我</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick(message) {
      alert(message);
    }
  }
}
</script>

在这个例子中，当按钮被点击时，handleClick 方法会被调用，并弹出 “Hello, Vue!” 的提示框。

事件绑定的好处

通过使用事件处理，开发者可以使页面更具交互性。无论是表单提交、按钮点击、还是其他用户操作，事件的处理都是用户与应用交互的重要桥梁。

案例：计算器应用

我们可以构建一个简单的计算器示例，展示如何处理多种事件。在这个计算器中，我们将实现基本的加法功能：

<template>
  <div>
    <input type="number" v-model="num1" placeholder="输入第一个数字">
    <input type="number" v-model="num2" placeholder="输入第二个数字">
    <button @click="add">加起来</button>
    <p>结果: {{ result }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      num1: 0,
      num2: 0,
      result: 0
    }
  },
  methods: {
    add() {
      this.result = Number(this.num1) + Number(this.num2);
    }
  }
}
</script>

在这个简单的计算器中，用户可以输入两个数，当按下 “加起来” 按钮时，add 方法将被调用，计算结果并显示在页面中。

小结

在本章中，我们了解了 Vue 中事件处理的基本使用，包括如何使用 v-on 指令来监听事件，以及如何在事件处理函数中传递参数。我们还通过简单的计算器案例，展示了如何让应用响应用户的交互。在下一章中，我们将继续讨论事件修饰符和事件处理方法的更多用法，为事件处理提供更强大的控制能力。