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

[油猴脚本开发指南]Vue初探__vue__

[复制链接]

217

主题

1779

帖子

2329

积分

管理员

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

Rank: 9Rank: 9Rank: 9

积分
2329
发表于 2021-12-10 12:56:59 | 显示全部楼层 | 阅读模式

前文

本文基于cxxjackie口述而写

由于研究还不是特别深入,所以可能存在一些事实性的出入

以后会慢慢修改和补正

Vue

Vue之前也跟大家介绍了,所以这里不多赘述

如果你存在输入后存在校验,自动清空,无法点击按钮等问题,可以去

https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=1250

寻找相关的处理方法,目前处理基本已经完善

Vue简单介绍

Vue在我们new Vue的时候会创建一个Vue的实例,实例根据我们的模板内容做解析,绘制虚拟dom,并渲染到页面上

我们都知道vue存在组件,如果渲染页面的时候碰到组件会怎么办?因为组件需要具备vue的所有功能,所以干脆把组件也设计成一个vue实例

所以页面存在多个vue的实例对象

我们如何找到实例对象?

在一些元素上打印出vue属性即可

为什么存在vue属性这点可以在vue源码中的

 Vue.prototype._update=function (vnode, hydrating) {
...
    if (vm.$el) {
      vm.$el.__vue__ = vm;
    }
...
}

这里可以看到了挂载vue属性为自身的vue实例

这里的$el是根节点

<div>
  <span>123</span>
</div>

这时候只有根节点div具有vue属性

注意,如果存在组件,那么则该组件包含的html节点元素的根节点也具有vue属性

如何确定是否为vue页面

尝试打印是否存在window.VUE_DEVTOOLS_TOAST属性,如果存在通常为vue页面

查找vue属性

我们可以确定一个大概的范围,然后从该dom的上级或下级的dom元素找到vue属性

然后打印查看,找到一个vue实例,即可通过parent以及children属性找到上下级的vue实例

举例

https://live.kuaishou.com/profile/3x72uw4df7wdq8q?fid=436489844

图片.png

可以发现没有vue属性

图片.png

我们在他的上一层找到了vue属性

这里简单介绍一些属性

图片.png

el为该属性对应的dom元素

图片.png

root为所有实例的根实例

图片.png

parent为该实例的父实例

图片.png

children为子实例

结语

那么到这里我们就简单了解了dom属性上的vue的一些内容

在此感谢cxxjackie

混的人。

1

主题

51

帖子

234

积分

开发者

Rank: 6Rank: 6

积分
234

突出贡献猫咪币纪念章中秋纪念章国庆纪念章三好学生活跃会员热心会员宣传达人

发表于 2021-12-10 15:31:07 | 显示全部楼层
高产似__ __
回复

使用道具 举报

217

主题

1779

帖子

2329

积分

管理员

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

Rank: 9Rank: 9Rank: 9

积分
2329
发表于 2021-12-10 15:38:38 | 显示全部楼层

现在写的开始乏力了
主要靠从论坛其他人身上学习了
混的人。
回复

使用道具 举报

发表回复

本版积分规则

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