Vue 阅读 521
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=3eb56acd5847c1486e8cf33dcb9b13ce&t=6af9d700

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

https://cyfb.lulublog.cn/images/3/2026/08/YCaPriAQJ8LESOSSsmK5O1Lamz61aE.png?sign=e9aeac12e4e45069a692feac0c70960a&t=6af9d700

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

https://cyfb.lulublog.cn/images/3/2026/08/W1qZ3HFWwA1aWpzwS284141R0rWU16.png?sign=3b4897e903581e8520f445582c07301b&t=6af9d700

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

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

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

https://cyfb.lulublog.cn/images/3/2026/08/w6gOeOGz6yzy3e1oUjye6OY3v13z66.png?sign=a215de5bb732efcca2b4d737532d96c8&t=6af9d700