v-on (@) 事件监听指令

最后更新：2026-10-22

v-on 绑定事件监听器，简写为 @：@click="handler"；支持内联表达式与修饰符（.stop/.prevent/.once 等）。

📝 语法

<button v-on:click="count++">+1</button>
<button @click="greet">打招呼</button>
<form @submit.prevent="onSubmit">

expression	事件名 + 处理函数或内联语句；可跟 .stop .prevent .once .self 等修饰符

返回值：指令，无返回值

修改下面的代码，在预览区实时查看效果：

输出：

页面显示「点击了 0 次」，每次点击数字 +1。

💡 提示 @ 是 v-on: 的简写，日常开发都用 @click 这种形式。

ℹ️ 说明 常用修饰符：.stop 阻止冒泡、.prevent 阻止默认行为、.once 只触发一次、.self 仅自身触发。

⚠️ 注意 传方法名用 @click="greet"（不加括号）；要传参数才写 @click="greet('hi')"。

更多案例即将上线。

Q @click="fn" 和 @click="fn()" 有什么区别？

A 前者传事件对象作第一个参数；后者立即调用，需要自己传参时才写括号。

Q 修饰符可以连用吗？

A 可以，如 @click.stop.prevent——按书写顺序依次生效。

Q 怎么监听键盘事件？

A 用 @keyup.enter / @keydown.esc 这类按键修饰符，或 @keyup.13 键码写法。

Web-Tutorial 技术团队

由多位开发者共同维护的编程教程平台。每篇教程由对应领域的开发者编写和审核，确保内容准确可靠。如发现任何问题，欢迎向我们反馈。