v-on 监听 DOM 事件（点击、输入、按键）并运行处理程序。其简写是 @。
<script setup>
import { ref } from "vue";
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button v-on:click="increment">Full syntax</button>
<button @click="increment">Shorthand (idiomatic)</button>
<button @click="count++">Inline expression</button>
<button @click="increment($event, 'extra')">Pass args + the event</button>
</template>
你可以传递方法名、内联表达式或使用参数调用方法。原生事件对象可作为 $event 使用。
<template>
<form @submit.prevent="onSubmit"> <!-- .prevent = event.preventDefault() -->
<div @click.stop="onClick"> <!-- .stop = event.stopPropagation() -->
<div @click.self="onlyIfClickedSelf"> <!-- fires only if target IS this element -->
<button @click.once="runOnce"> <!-- handler runs at most once -->
</template>
修饰符替代了你在 JS 中必须编写的样板代码——.prevent 和 .stop 经常使用（例如，阻止表单的默认页面刷新）。
<template>
<input @keyup.enter="submit" /> <!-- only on Enter key -->
<input @keyup.esc="cancel" /> <!-- Escape -->
<div @keydown.ctrl.s.prevent="save" /> <!-- Ctrl+S, prevent browser save -->
</template>
<ChildComponent @custom-event="handleIt" />
<!-- the child does emit('custom-event', payload) -->
同样的 @ 语法监听子组件发出的自定义事件（不仅仅是 DOM 事件）。
v-on（@）是 Vue 处理所有用户交互的方式。
事件修饰符（.prevent、.stop、.self、.once）和按键修饰符（.enter、.esc）使常见的事件处理模式声明式且简洁——无需手动 preventDefault/stopPropagation 或按键代码检查。
同样的语法统一了 DOM 事件和自定义组件事件。
一个包含详细解答的 IT 面试题库——从初级到高级。
捐赠