一、前言

Vue 的事件监听 = “指令式”绑定 DOM 事件，核心语法只有一句话：

v-on:事件名=“处理函数” 或其简写 @事件名=“处理函数”

举例子：

<button @click="sayHi">Click</button>

<script setup>
function sayHi() { alert('Hi!') }
</script>

常用事件：

总结：在元素上写 @事件名=“函数”，Vue 会自动绑定并管理更新，事件触发 → 函数执行 → 数据变 → 视图自动刷新，全程无需手动操作 DOM。

二、代码示例

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

const count = ref(0)
const submitted = ref('');
const text = ref('');
const valid = ref(true);
const validText = ref('');
const realtime = ref('');
const formMsg = ref('');
const formResult = ref('');
  
 /* 事件处理函数 */
const handleClick = () => count.value++;
const handleEnter = () => (submitted.value = text.value);
const handleBlur = () => {
          valid.value = Math.random() > 0.5; // 随机模拟校验
          validText.value = valid.value ? '通过' : '不通过';
        };  
const handleInput = (e) => (realtime.value = e.target.value);
const handleSubmit = () => (formResult.value = formMsg.value);  
</script>

<template>
   <!-- ① 点击 -->
    <div class="box">
      <button @click="handleClick">点我</button>&nbsp;&nbsp;
      <span>点击次数：{{ count }}</span>
    </div>
  
  
  <!-- ② 回车提交 -->
    <div class="box">
      <input placeholder="按回车提交" @keydown.enter="handleEnter" v-model="text" /> &nbsp;&nbsp;
      <span>已提交内容：{{ submitted }}</span>
    </div>
  
      <!-- ④ 失焦校验 -->
    <div class="box">
      <input placeholder="失去焦点时校验" @blur="handleBlur" />&nbsp;&nbsp;
      <span :class="{ red: !valid, green: valid }">校验结果：{{ validText }}</span>
    </div>
  
      <!-- ③ 实时输入 -->
    <div class="box">
      <input placeholder="实时搜索" @input="handleInput" />&nbsp;&nbsp;
      <span>正在输入：{{ realtime }}</span>
    </div>
  
  <!-- ⑤ 表单提交拦截 -->
    <form @submit.prevent="handleSubmit">
      <input v-model="formMsg" placeholder="输入后点提交" />
      <button type="submit">提交</button>
      <span>表单结果：{{ formResult }}</span>
    </form>

</template>

  <style>
    .box { margin: 10px 0; }
    .red { color: red; }
    .green { color: green; }
  </style>

事件触发后效果