控制台打印vue实例

控制台打印vue实例前言 Vue 项目运行后会把各个组件的数据挂载到对应的 dom 上根组件 app 上获取实例首先 app vue 会挂载到 id 为 app 的 div 上边打印这个 divconsole dir document querySelecto app 查看控制台 发现存在一个键 vue 其实 app vue 对应的实例就是这个 vue 对象打印这个对象 console dir document querySelecto app

前言:Vue项目运行后会把各个组件的数据挂载到对应的dom上

根组件(#app)上获取实例

首先 app.vue 会挂载到 id 为 “app” 的 div 上边

控制台打印vue实例

打印这个div

console.dir(document.querySelector('#app'))

查看控制台,发现存在一个键:”__vue__

控制台打印vue实例

其实app.vue对应的实例就是这个__vue__对象

打印这个对象

console.dir(document.querySelector('#app').__vue__)

 控制台打印vue实例

仔细观察这个对象,不难发现,这里面有许多Vue当中常用的方法和对象

this.$store this.$refs this.$listeners this.$route this.$router this.$emit() // 更多对象和方法可以去__proto__中去查找

如果要查看子组件的实例,方法同上:

// 假设子组件的class = "back-list" console.dir(document.querySelector('.back-list').__vue__)

 

 

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/178238.html原文链接:https://javaforall.net

(0)
上一篇 2026年3月26日 下午5:43
下一篇 2026年3月26日 下午5:43


相关推荐

  • IntelliJ IDEA 创建Java项目[通俗易懂]

    IntelliJ IDEA 创建Java项目[通俗易懂]Java模块让你可以开发JavaSE和JavaEE应用程序。由Java模块提供的核心功能可通过加入各种技术和框架支持进行扩展。当您创建好一个项目后,您可以创建一个Java模块。您还可以添加一个Java模块到现有项目。注意:这里说的Java模块实际是一个Java项目,而IDEA的项目(Project)则相当于Eclipse的工作空间(workspace)的概念,相当于VS的解决方案(soluti

    2026年4月18日
    6
  • 【JDK】win 10 / win 11:jdk 8 下载、安装、配置、验证「建议收藏」

    【JDK】win 10 / win 11:jdk 8 下载、安装、配置、验证「建议收藏」win10/win11:JDK最新版本下载/历史版本下载(jdk8)、安装、配置系统环境变量、验证安装全详细操作教程

    2026年2月20日
    7
  • MTK65XX平台充电调试总结

    MTK65XX平台充电调试总结

    2022年2月6日
    44
  • 新手小白学电脑_新手小白开公司

    新手小白学电脑_新手小白开公司1set接口1.1 概述Set是一个不包含重复数据的CollectionSet集合中的数据是无序的(因为Set集合没有下标)Set集合中的元素不可以重复–常用来给数据去重1.2 Set集合的特点数据无序且数据不允许重复HashSet:底层是哈希表,包装了HashMap,相当于向HashSet中存入数据时,会把数据作为K,存入内部的HashMap中。当然K仍然不许重复。TreeSet:底层是TreeMap,也是红黑树的形式,便于查找数据1.3 常用方法学习Collecti

    2025年10月2日
    6
  • Latex符号表

    Latex符号表参考资料 来次大学

    2026年3月19日
    3
  • TCP连接的状态详解以及故障排查

    TCP连接的状态详解以及故障排查我们通过了解TCP各个状态,可以排除和定位网络或系统故障时大有帮助。(总结网络上的内容)1、TCP状态了解TCP之前,先了解几个命令:linux查看tcp的状态命令:1)、netstat-nat查看TCP各个状态的数量2)、lsof-i:port可以检测到打开套接字的状况3)、sar-nSOCK查看tcp创建的连接数4)、tcpdump-iany…

    2022年6月20日
    116

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号