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

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

[复制链接]
  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5959

    回帖

    6758

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6758

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 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

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

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

    结语

    撒花~

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    奋斗
    2023-6-12 15:07
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    7

    主题

    91

    回帖

    155

    积分

    荣誉开发者

    积分
    155

    荣誉开发者油中2周年生态建设者喜迎中秋

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

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5959

    回帖

    6758

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6758

    荣誉开发者喜迎中秋油中2周年生态建设者

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

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

    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    奋斗
    2023-6-12 15:07
  • 签到天数: 6 天

    [LV.2]偶尔看看I

    7

    主题

    91

    回帖

    155

    积分

    荣誉开发者

    积分
    155

    荣誉开发者油中2周年生态建设者喜迎中秋

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

    不懂不懂、、、
    回复

    使用道具 举报

  • TA的每日心情

    2022-8-15 10:58
  • 签到天数: 1 天

    [LV.1]初来乍到

    9

    主题

    80

    回帖

    89

    积分

    初级工程师

    积分
    89

    新人报道油中3周年挑战者 lv1

    发表于 2022-5-11 10:41:07 | 显示全部楼层
    vue第五篇
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    1

    回帖

    2

    积分

    助理工程师

    积分
    2
    发表于 2023-3-17 16:16:41 | 显示全部楼层
    在哪里运行代码
    回复

    使用道具 举报

  • TA的每日心情
    慵懒
    2024-10-28 07:07
  • 签到天数: 193 天

    [LV.7]常住居民III

    712

    主题

    5959

    回帖

    6758

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    6758

    荣誉开发者喜迎中秋油中2周年生态建设者

    发表于 2023-3-17 16:25:12 | 显示全部楼层
    billl 发表于 2023-3-17 16:16
    在哪里运行代码

    这个没提供的
    太基础了
    直接引入js写就行了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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