Vue 阅读 457
Vue 第2.3章 事件监听@click

Vue 第2.3章 事件监听@click

2026-08-04 • lulubin

我们可以使用 v-on 指令监听 DOM 事件:

https://cyfb.lulublog.cn/images/3/2026/08/hRL11FzP38ff8Xr8K8ZoK83fxif18X.png?sign=fa32e787580027932e92d675fb163136&t=6ae8b380

因为其经常使用,v-on 也有一个简写语法:

https://cyfb.lulublog.cn/images/3/2026/08/YCaPriAQJ8LESOSSsmK5O1Lamz61aE.png?sign=76beef23e800679d25e43f9193fcc1f0&t=6ae8b380

此处,increment 引用了一个在 script setup 中声明的函数:

https://cyfb.lulublog.cn/images/3/2026/08/W1qZ3HFWwA1aWpzwS284141R0rWU16.png?sign=78f5f8377338df09ccc180d31b9f180b&t=6ae8b380

在函数中,我们可以通过修改 ref 来更新组件状态。

事件处理函数也可以使用内置表达式,并且可以使用修饰符简化常见任务。

现在,尝试自行实现 increment 函数并通过使用 v-on 将其绑定到按钮上。

https://cyfb.lulublog.cn/images/3/2026/08/w6gOeOGz6yzy3e1oUjye6OY3v13z66.png?sign=5b355ecd87aaef388bed7f1b78817564&t=6ae8b380