论坛 › 脚本开发 › [油猴脚本开发指南]VUE点击按钮

李恒道 发表于 2021-10-7 15:17:02

[油猴脚本开发指南]VUE点击按钮

# 前文

上节课我们学习了绑定数据，这节课做一个最基础的按钮点击。

# 创建按钮

我们在html页面用html的bttton创建一个按钮，并添加一个@click='事件名'


button是一个html标签我们平时可以使用html标签的 < button > < /button>来创建一个按钮

这里的@click代表点击事件，等于代表绑定对应的函数名称

但是我们不能像往常那样声明一个函数了，我们应该遵循vue的规则。


这里我们在Counter里创建了一个methods的属性，他是一个对象，我们在这个对象里包含函数的名字并加上(参数)，因为我这里没有参数，所以是空括号，然后包含函数的代码块

需要注意的是，这里我们想操作data()函数里声明的变量，必须要加上this

因为这里的this代表vue实例，我们找到vue的实例下的counter变量并进行+1操作。

我们可以测试一下


可以看到正常执行了代码。

那我们这节课我们就学习了按钮的点击。

# 结语

撒花~

maxzhang 发表于 2021-10-8 09:27:41

ggnb、、

李恒道 发表于 2021-10-8 10:08:56

maxzhang 发表于 2021-10-8 09:27
ggnb、、
终于进军vue了
哥哥应该这些都懂
可以再等一阵，vue讲完就涉及webpack编译源码解释和打包了！
（虽然可能哥哥也懂）

maxzhang 发表于 2021-10-8 10:28:23

李恒道 发表于 2021-10-8 10:08
终于进军vue了
哥哥应该这些都懂
可以再等一阵，vue讲完就涉及webpack编译源码解释和打包了！


不懂不懂、、、

unity韩 发表于 2022-5-11 10:41:07

vue第五篇

billl 发表于 2023-3-17 16:16:41

在哪里运行代码

李恒道 发表于 2023-3-17 16:25:12

billl 发表于 2023-3-17 16:16
在哪里运行代码

这个没提供的
太基础了
直接引入js写就行了

查看完整版本: [油猴脚本开发指南]VUE点击按钮