Vue 事件监听 v-on 探索事件响应的神奇世界

2023-06-24 22:09:42

掌握 Vue 事件监听 v-on：打造交互式网页的终极指南

了解事件类型

在使用 v-on 指令之前，让我们了解事件类型。事件类型可分为两大类：

用户事件： 由用户触发的事件，例如点击、键盘输入、表单提交。
DOM 事件： 由 DOM 元素触发的事件，例如加载、移动、大小改变。

v-on 指令的基本用法

v-on 指令的使用非常简单。只需在 HTML 元素上添加 v-on:[事件类型] 属性，并指定一个 JavaScript 函数。例如，为按钮绑定点击事件处理函数：

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

v-on 指令的修饰符

修饰符可以增强 v-on 指令的灵活性。常见修饰符包括：

.stop：阻止事件冒泡
.prevent：阻止默认行为
.once：只执行一次事件处理函数
.capture：使用捕获模式监听事件

v-on 指令与键盘事件

键盘事件对用户交互至关重要。我们可以使用 v-on 指令为键盘输入绑定事件处理函数。例如，为输入框绑定回车事件处理函数：

<input v-on:keyup.enter="handleEnter">

v-on 指令与鼠标事件

鼠标事件也是用户交互的重要组成部分。我们可以使用 v-on 指令为鼠标点击、移动、悬停等事件绑定事件处理函数。例如，为按钮绑定点击事件处理函数：

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

v-on 指令与表单事件

表单事件对用户交互至关重要。我们可以使用 v-on 指令为表单提交、输入等事件绑定事件处理函数。例如，为表单绑定提交事件处理函数：

<form v-on:submit="handleSubmit">提交表单</form>

代码示例

下面是一个代码示例，展示了 v-on 指令的用法：

<template>
  <div>
    <button v-on:click="handleClick">点击我</button>
    <input v-on:keyup.enter="handleEnter">
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 事件处理函数
    },
    handleEnter() {
      // 事件处理函数
    },
  },
};
</script>