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

[油猴脚本开发指南]通过__vue__获取数据

[复制链接]
  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    321

    主题

    2838

    帖子

    2846

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2846

    猫咪币纪念章

    发表于 2021-12-12 14:36:25 | 显示全部楼层 | 阅读模式

    前言

    本文根据cxxjackie提供的方法简单整理而成,由于我个人能力有限

    可能我的描述存在一定的出入

    警告

    关于对页面进行调试,严重要求使用Chrome,经测试火狐浏览器显示数据不完整,其他浏览器情况未知

    vue实例

    在我们获取vue实例之后,可以查看当前vue实例是否存在我们想要的数据

    如果存在,我们可以直接提取出来

    如果不存在,我们可以继续根据parent或children继续往上级或者下级继续寻找数据

    以b站为例

    图片.png我们可以通过vue属性提取出来视频的基本数据

    我们该怎么获取列表呢?

    先以一个div为准

    图片.png

    我们先获取info-box的节点

    图片.png

    发现不存在vue属性,接下来往上级或者下级找,因为我用的dom元素偏下,所以往上层找

    图片.png

    可以发现看到了vue属性,接下来我们看这些数据,下边的那些数据通常我们不用太过于在意,但是最好也点开看一下

    着重看深紫色的部分

    图片.png

    经过翻找

    我们可以看到info就是我们想看到的视频数据

    图片.png

    那我们如果想获取一整个视频列表,我们应该怎么办呢?

    就是找他的parent属性,然后再查看数据

    图片.png

    我们可以找到

    图片.png

    打开看一下,发现存在一个数组,每个数组都是一个视频数据

    图片.png

    这个时候我们就可以提取数据做我们想要做的事情了!

    或对其进行修改来达到显示我们想要的显示的东西。

    那么这节课我们就学习了如何使用vue属性

    结语

    撒花~

    图片.png
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
  • TA的每日心情
    开心
    2022-3-7 09:47
  • 签到天数: 1 天

    [LV.1]初来乍到

    18

    主题

    93

    帖子

    117

    积分

    中级工程师

    Rank: 5Rank: 5

    积分
    117
    发表于 2021-12-12 19:58:47 | 显示全部楼层

    gege,这个__defineGetter__是用来干嘛的
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    321

    主题

    2838

    帖子

    2846

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2846

    猫咪币纪念章

    发表于 2021-12-12 22:42:42 | 显示全部楼层
    rubinTime 发表于 2021-12-12 19:58
    gege,这个__defineGetter__是用来干嘛的

    这些属性可以查看mdn文档,很干净标准
    https://developer.mozilla.org/zh ... ct/__defineGetter__

    __defineGetter__
    非标准: 该特性是非标准的,请尽量不要在生产环境中使用它!
    已废弃: 该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。
    概述
    __defineGetter__ 方法可以将一个函数绑定在当前对象的指定属性上,当那个属性的值被读取时,你所绑定的函数就会被调用。
    语法
    obj.__defineGetter__(prop, func)
    示例
    // 请注意,该方法是非标准的:
    var o = {};
    o.__defineGetter__('gimmeFive', function() { return 5; });
    console.log(o.gimmeFive); // 5
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-3-7 09:47
  • 签到天数: 1 天

    [LV.1]初来乍到

    18

    主题

    93

    帖子

    117

    积分

    中级工程师

    Rank: 5Rank: 5

    积分
    117
    发表于 2021-12-13 09:00:41 | 显示全部楼层

    那哥哥这步操作是在干嘛呢?
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    321

    主题

    2838

    帖子

    2846

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2846

    猫咪币纪念章

    发表于 2021-12-13 09:32:01 | 显示全部楼层
    rubinTime 发表于 2021-12-13 09:00
    那哥哥这步操作是在干嘛呢?

    在寻找__vue__属性
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-3-7 09:47
  • 签到天数: 1 天

    [LV.1]初来乍到

    18

    主题

    93

    帖子

    117

    积分

    中级工程师

    Rank: 5Rank: 5

    积分
    117
    发表于 2021-12-13 10:28:05 | 显示全部楼层

    直接 . 运算符查找不行吗
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    321

    主题

    2838

    帖子

    2846

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2846

    猫咪币纪念章

    发表于 2021-12-13 10:40:37 | 显示全部楼层
    rubinTime 发表于 2021-12-13 10:28
    直接 . 运算符查找不行吗

    就是用.呀
    这里打印出来看提醒有没有相关属性
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    321

    主题

    2838

    帖子

    2846

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2846

    猫咪币纪念章

    发表于 2022-1-25 16:40:51 | 显示全部楼层
    rubinTime 发表于 2021-12-13 09:00
    那哥哥这步操作是在干嘛呢?

    突然很好奇,最后学的怎么样了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2022-3-7 09:47
  • 签到天数: 1 天

    [LV.1]初来乍到

    18

    主题

    93

    帖子

    117

    积分

    中级工程师

    Rank: 5Rank: 5

    积分
    117
    发表于 2022-1-28 16:13:29 | 显示全部楼层
    李恒道 发表于 2022-1-25 16:40
    突然很好奇,最后学的怎么样了

    我好久没逛论坛了,之前也是闲着无事帮我妹刷网课在关注到油猴结合js能做这么多东西 ,然后产生兴趣,看了论坛的一些教程感觉自己js内功还不是很深厚,慢慢的热情也褪去了,现在再看js的电子书想把基本功搞扎实些。我是学前端的,但我平时做的就是用vue或React搭建一个网站或者用nodejs写一些后台接口什么的吗,但是油猴脚本偏向实战,感觉很多都是对数据的劫持什么的,需要对其他的网站进行分析后写相应的代码实现功能,这我有些不适应。
    回复

    使用道具 举报

  • TA的每日心情

    2022-6-4 20:51
  • 签到天数: 32 天

    [LV.5]常住居民I

    321

    主题

    2838

    帖子

    2846

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    2846

    猫咪币纪念章

    发表于 2022-1-28 16:26:44 | 显示全部楼层
    rubinTime 发表于 2022-1-28 16:13
    我好久没逛论坛了,之前也是闲着无事帮我妹刷网课在关注到油猴结合js能做这么多东西 ,然后产生兴趣,看 ...

    那没事了,哥哥有兴趣可以再学学
    油猴开发还是很提升前端功底的
    为了针对一些框架做功能
    你不得不翻阅库的源码甚至打包的源码,来做分析和注入
    哥哥可以以后有兴趣玩一玩
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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