Vue事件处理如何绑定？@click和v-on有什么区别？-Vue.js-PHP中文网

Vue事件处理如何绑定？@click和v-on有什么区别？

冰火之心

发布： 2025-08-28 08:02:01

原创

467人浏览过

在 vue 中，@click 和 v-on 的区别在于：1. @click 是 v-on:click 的简写形式，专用于监听点击事件；2. v-on 可以监听多种类型的 dom 事件，并支持修饰符和动态事件名。两者本质相同，但使用场景不同：@click 更简洁直观，适用于点击事件；v-on 更灵活，适用于非点击事件或需要修饰符、动态事件名的情况。选择时应根据具体需求决定，优先使用 @click，必要时用 v-on。

Vue事件处理如何绑定？@click和v-on有什么区别？

在 Vue 中处理事件，最常见的两种方式是使用

@click

登录后复制

和

v-on

登录后复制

。它们都可以用来监听 DOM 事件并触发方法，但理解它们之间的关系和区别，能让你写代码更清晰、更高效。

@click

登录后复制

是什么？它是怎么工作的？

@click

登录后复制

是 Vue 提供的一个语法糖，专门用于监听点击事件。它其实是

v-on:click

登录后复制

的简写形式。

比如下面这个例子：

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

等价于：

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

登录后复制

你可以把它理解成一种“快捷方式”，写起来更方便。尤其在需要频繁绑定点击事件的场景下，用

@click

登录后复制

更简洁直观。

v-on

登录后复制

又是什么？它的用途更广

如果说

@click

登录后复制

是专攻点击事件的“特种兵”，那

v-on

登录后复制

就是一个全能型选手。它可以监听任意类型的 DOM 事件，比如

input

登录后复制

、

keydown

登录后复制

、

submit

登录后复制

等等。

例如：

稿定AI社区

在线AI创意灵感社区

查看详情

<input v-on:input="handleInput" />

登录后复制

或者你也可以同时监听多个事件：

<div v-on="{ mouseover: handleOver, mouseout: handleOut }"></div>

登录后复制

另外，

v-on

登录后复制

还支持一些修饰符，比如

.prevent

登录后复制

（阻止默认行为）、

.stop

登录后复制

（阻止冒泡）等，这些在实际开发中非常实用。

它们之间到底有什么区别？

其实说白了，

@click

登录后复制

是

v-on:click

登录后复制

的缩写，没有本质区别。但从使用场景来看，还是有一些小差异需要注意：

可读性：
```
@click
```
登录后复制
更直观，看到符号就知道是在处理点击；而
```
v-on
```
登录后复制
在不看参数的情况下，不太容易一眼看出具体监听的是哪个事件。
灵活性：如果你要监听非点击事件，比如键盘输入、表单提交等，那就必须用
```
v-on
```
登录后复制
。
动态事件名：如果你的事件名是动态的（比如通过变量传进来），那么需要用
```
v-on
```
登录后复制
的方括号写法，比如
```
v-on:[event]="handler"
```
登录后复制
，这种写法
```
@
```
登录后复制
不支持。