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

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

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

打印这个div

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

查看控制台，发现存在一个键："__vue__"

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

打印这个对象

console.dir(document.querySelector('#app').__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__)

控制台打印vue实例相关推荐

通过浏览器F12开发者工具的javascript控制台给Vue表单赋值
问题背景做一个网页表单自动录入软件,网页不是我方开发的.自动录入软件是基于.NET的C/S客户端软件,它使用WinForm的WebBrowser控件加载网站,网站的前端是使用 Vue 和 Eleme ...
C语言实例第5期：在控制台打印100-200之间的所有素数
C语言文章更新目录 C语言学习资源汇总,史上最全面总结,没有之一 C/C++学习资源(百度云盘链接) 计算机二级资料(过级专用) C语言学习路线(从入门到实战) 编写C语言程序的7个步骤和编程机制 C ...
C语言实例第3期：在控制台打印出著名的杨辉三角
C语言文章更新目录 C语言学习资源汇总,史上最全面总结,没有之一 C/C++学习资源(百度云盘链接) 计算机二级资料(过级专用) C语言学习路线(从入门到实战) 编写C语言程序的7个步骤和编程机制 C ...
c语言中把一个数缩小十倍_C语言实例第04期，在控制台打印出著名的杨辉三角...
点击上方"C语言中文社区",选择"设为星标★" 技术干货第一时间送达! 往期回顾: C语言实例第01期,十进制数转换二进制数 C语言实例第02期,判断某一年是否 ...
第五节：轻松掌握 vue 实例的生命周期
公众号后台收到不少同学催更新,马上来. 上两节我们都是讲vue的实例,简单创建和定义实例的4个常用选项,没看过的伙伴可以先去看上两节,按顺序学习比较容易掌握. 这一节我们学习vue实例的生命周期,没错 ...
计算属性与监听器、Vue 实例的生命周期
本文是我在学习过程中记录学习的点点滴滴,仅仅为了学完之后巩固一下,日后忘记了也可以方便快速的复习. 计算属性与监听器.Vue 实例的生命周期前言一.计算属性 1.1.计算属性初步理解 1.2.计算 ...
配置 Vue 实例（选项）
文章目录一.总览二.DOM 2.1 el && template 选项 2.2 render 选项 2.3 renderError 选项三.数据 3.1 data 选项 3.2 ...
Vue实例和 Vue实例周期生命函数
一.Vue实例 Vue中的每一个组件其实也是一个Vue实例.新建组件item, 模板内容为div块; 现在就可以在根实例里使用这个组件了,使用方法就是通过标签的形式写在根实例里. 实际上在创建组件的 ...
Vue 实例生命周期
一.生命周期 Vue 应用都是通过 Vue 实例(ViewModel)完成的,Vue 创建实例需要一系列的初始化动作,需要设置数据监听.编译模板.将实例挂载到 DOM 并在数据变化时更新 DOM 等. ...
vue 实例数据绑定指令事件
vue.js的模式 mvvm 模式视图层与数据层的双向绑定环境搭建其一引用 <script src="https://cdn.jsdelivr.net/npm/vue/dist/v ...

控制台打印vue实例

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

控制台打印vue实例相关推荐

最新文章

热门文章