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

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

[复制链接]
  • TA的每日心情
    开心
    前天 00:00
  • 签到天数: 49 天

    [LV.5]常住居民I

    350

    主题

    3064

    帖子

    3077

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    3077

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯

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

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

    [LV.2]偶尔看看I

    3

    主题

    67

    帖子

    102

    积分

    荣誉开发者

    Rank: 10Rank: 10Rank: 10

    积分
    102

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

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

    使用道具 举报

  • TA的每日心情
    开心
    前天 00:00
  • 签到天数: 49 天

    [LV.5]常住居民I

    350

    主题

    3064

    帖子

    3077

    积分

    荣誉开发者

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

    Rank: 10Rank: 10Rank: 10

    积分
    3077

    猫咪币纪念章国庆纪念章中秋纪念章荣誉开发者家财万贯

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

    现在写的开始乏力了
    主要靠从论坛其他人身上学习了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

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