上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

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

[复制链接]

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-10-7 15:17:02 | 显示全部楼层 | 阅读模式

前文

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

创建按钮

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

图片.png

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

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

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

图片.png

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

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

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

我们可以测试一下

图片.png

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

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

结语

撒花~

混的人。

1

主题

30

帖子

24

积分

新手上路

Rank: 1

积分
24

突出贡献猫咪币纪念章中秋纪念章国庆纪念章

发表于 2021-10-8 09:27:41 | 显示全部楼层
ggnb、、
回复

使用道具 举报

159

主题

1105

帖子

618

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
618
发表于 2021-10-8 10:08:56 | 显示全部楼层

终于进军vue了
哥哥应该这些都懂
可以再等一阵,vue讲完就涉及webpack编译源码解释和打包了!
(虽然可能哥哥也懂)

混的人。
回复

使用道具 举报

1

主题

30

帖子

24

积分

新手上路

Rank: 1

积分
24

突出贡献猫咪币纪念章中秋纪念章国庆纪念章

发表于 2021-10-8 10:28:23 | 显示全部楼层
李恒道 发表于 2021-10-8 10:08
终于进军vue了
哥哥应该这些都懂
可以再等一阵,vue讲完就涉及webpack编译源码解释和打包了!

不懂不懂、、、
回复

使用道具 举报

发表回复

本版积分规则

快速回复 返回顶部 返回列表