Vue中的v-on指现事件绑定-实例里的-查阅文档Vue文档提供了全面的指南和示例

作者：网络发烧程序猿 | 发布时间：2025-07-09 |

Vue中的v-on指令：轻松实现事件绑定

Vue的v-on指令，听起来有点高大上，其实就是Vue用来监听DOM事件的一个小助手。简单来说，它就像是一个桥梁，让你能轻松地把HTML元素上的事件（比如点击、按键等）和Vue实例里的JavaScript代码联系起来，这样一来，当用户做出某些操作时，我们就能执行一些动作，比如弹出提示框或者更新页面内容。

一、v-on指令的基本用法

v-on指令用起来超级简单，就像这样：

HTML代码	效果
`<button v-on:click="sayHello">点击我</button>`	点击按钮时，会调用Vue实例中的sayHello方法。

这里的sayHello方法通常定义在Vue实例的methods对象里。

二、简写语法

为了让代码更简洁，Vue允许我们使用简写形式，把v-on变成@：

<button @click="sayHello">点击我</button>

效果和上面的例子是一样的，只是代码看起来更酷一点。

三、传递事件参数

有时候，你可能想在事件触发时传递一些参数。这很简单，只要在方法名后面加上括号：

<button @click="sayHello('你好')>点击我，说你好</button>

这样，当按钮被点击时，sayHello方法就会收到一个字符串参数“你好”。

四、事件修饰符

Vue提供了一些事件修饰符，可以帮助你更精细地控制事件：

修饰符	作用
.stop	阻止事件冒泡
.prevent	阻止默认行为
.capture	使用事件捕获模式
.self	只在事件在自身元素上触发时触发回调
.once	事件只触发一次

五、键值修饰符

如果你需要监听键盘事件，Vue的键值修饰符会非常有用：

<input @keyup.enter="submit">

这里的keyup.enter表示只有在用户按下Enter键时，submit方法才会被触发。

六、自定义事件

Vue组件之间也可以通过自定义事件进行通信：

<child-component @my-event="handleEvent"></child-component>

在这个例子中，子组件通过触发一个名为my-event的自定义事件，并传递参数，父组件则监听这个自定义事件，并在事件触发时执行handleEvent方法。

七、总结

通过本文的介绍，你应该已经对Vue中的v-on指令有了基本的了解。掌握这些知识，你就可以在Vue应用中灵活地处理用户交互了。

进一步的建议

多实践：多写一些实例代码，熟悉指令的各种用法。
查阅官方文档：Vue官方文档提供了全面的指南和示例。
项目中应用：在实际项目中应用这些知识，提高开发效率。