Vue3 事件处理

网页交互离不开事件：点击按钮、输入文字、按下回车……Vue3 用 v-on 指令（简写为 @）来监听 DOM 事件，把"事件发生"和"处理方法"连接起来。模板里几乎看不到 addEventListener，事件逻辑集中写在脚本中，清晰又易维护。

v-on 基础用法

@click 可以绑定一个方法名，也可以写内联语句。方法在 <script setup> 中定义：

<template>
  <button @click="handleClick">点我</button>
</template>

<script setup>
const handleClick = () => {
  alert('按钮被点击了')
}
</script>

效果：点击按钮弹出提示框。@click 是 v-on:click 的简写，两者完全等价，官方推荐简写形式。

内联语句与传参

方法需要参数时直接在模板中写内联调用；需要事件对象时用特殊变量 $event 传入：

<template>
  <button @click="add(2, $event)">数量加 2</button>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)
const add = (num, e) => {
  count.value += num
  console.log('事件类型：', e.type)
}
</script>

效果：每次点击 count 加 2，控制台打印"事件类型： click"。

常用事件修饰符

修饰符用点号接在事件名之后，把常见处理浓缩成一个词：

<template>
  <!-- .stop 阻止冒泡，内层触发不会传到外层 -->
  <div @click="outer">
    <button @click.stop="inner">点我</button>
  </div>

  <!-- .prevent 阻止默认行为，比如提交后不刷新页面 -->
  <form @submit.prevent="submit">...</form>

  <!-- .once 事件只触发一次 -->
  <button @click.once="once">只响应一次</button>
</template>

修饰符可以串联，例如 @click.stop.prevent 同时阻止冒泡和默认行为。

键盘与按键修饰符

监听键盘事件时，可以用按键修饰符指定"按哪个键才触发"，支持 enter、tab、esc、space、up、down 等常见键名：

<template>
  <!-- 输入框里按下回车才执行 search -->
  <input @keyup.enter="search" placeholder="回车搜索" />
</template>

组合键写法：@keyup.ctrl.enter 表示同时按下 Ctrl 和回车才触发，常用于聊天框快捷发送。

小结

事件处理是页面交互的入口：@事件名 绑定方法，内联写法支持传参与 $event，.stop/.prevent/.once 等修饰符与键盘修饰符让代码非常精简。事件最终往往与表单、指令配合去驱动数据变化，下一节我们学习 v-model 表单绑定。