[油猴脚本开发指南]通过__vue__获取数据
# 前言本文根据cxxjackie提供的方法简单整理而成，由于我个人能力有限
可能我的描述存在一定的出入
# 警告
关于对页面进行调试，严重要求使用Chrome，经测试火狐浏览器显示数据不完整，其他浏览器情况未知
# vue实例
在我们获取vue实例之后，可以查看当前vue实例是否存在我们想要的数据
如果存在，我们可以直接提取出来
如果不存在，我们可以继续根据parent或children继续往上级或者下级继续寻找数据
以b站为例
我们可以通过__vue__属性提取出来视频的基本数据
我们该怎么获取列表呢？
先以一个div为准
我们先获取info-box的节点
发现不存在__vue__属性，接下来往上级或者下级找，因为我用的dom元素偏下，所以往上层找
可以发现看到了__vue__属性，接下来我们看这些数据，下边的那些数据通常我们不用太过于在意，但是最好也点开看一下
着重看深紫色的部分
经过翻找
我们可以看到info就是我们想看到的视频数据
那我们如果想获取一整个视频列表，我们应该怎么办呢？
就是找他的parent属性，然后再查看数据
我们可以找到
打开看一下，发现存在一个数组，每个数组都是一个视频数据
这个时候我们就可以提取数据做我们想要做的事情了！
或对其进行修改来达到显示我们想要的显示的东西。
那么这节课我们就学习了如何使用__vue__属性
# 结语
撒花~
gege，这个__defineGetter__是用来干嘛的 rubinTime 发表于 2021-12-12 19:58
gege，这个__defineGetter__是用来干嘛的
这些属性可以查看mdn文档，很干净标准
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/__defineGetter__
__defineGetter__
非标准: 该特性是非标准的，请尽量不要在生产环境中使用它！
已废弃: 该特性已经从 Web 标准中删除，虽然一些浏览器目前仍然支持它，但也许会在未来的某个时间停止支持，请尽量不要使用该特性。
概述
__defineGetter__ 方法可以将一个函数绑定在当前对象的指定属性上，当那个属性的值被读取时，你所绑定的函数就会被调用。
语法
obj.__defineGetter__(prop, func)
示例
// 请注意，该方法是非标准的：
var o = {};
o.__defineGetter__('gimmeFive', function() { return 5; });
console.log(o.gimmeFive); // 5 https://s4.ax1x.com/2021/12/13/oLBLJ1.png
那哥哥这步操作是在干嘛呢？ rubinTime 发表于 2021-12-13 09:00
那哥哥这步操作是在干嘛呢？
在寻找__vue__属性 李恒道 发表于 2021-12-13 09:32
在寻找__vue__属性
直接 . 运算符查找不行吗 rubinTime 发表于 2021-12-13 10:28
直接 . 运算符查找不行吗
就是用.呀
这里打印出来看提醒有没有相关属性 rubinTime 发表于 2021-12-13 09:00
那哥哥这步操作是在干嘛呢？
突然很好奇，最后学的怎么样了
李恒道 发表于 2022-1-25 16:40
突然很好奇，最后学的怎么样了
我好久没逛论坛了，之前也是闲着无事帮我妹刷网课在关注到油猴结合js能做这么多东西 ，然后产生兴趣，看了论坛的一些教程感觉自己js内功还不是很深厚，慢慢的热情也褪去了，现在再看js的电子书想把基本功搞扎实些。我是学前端的，但我平时做的就是用vue或React搭建一个网站或者用nodejs写一些后台接口什么的吗，但是油猴脚本偏向实战，感觉很多都是对数据的劫持什么的，需要对其他的网站进行分析后写相应的代码实现功能，这我有些不适应。 rubinTime 发表于 2022-1-28 16:13
我好久没逛论坛了，之前也是闲着无事帮我妹刷网课在关注到油猴结合js能做这么多东西 ，然后产生兴趣，看 ...
那没事了，哥哥有兴趣可以再学学
油猴开发还是很提升前端功底的
为了针对一些框架做功能
你不得不翻阅库的源码甚至打包的源码，来做分析和注入
哥哥可以以后有兴趣玩一玩
页:
[1]
2