浏览器f12控制台怎么获取vue实例,并且修改data数据

我们在日常的生产工作中,经常会遇到一些问题,比如,若产品已经部署,或是目前无法查看源代码,或者向用命令直接修改查询默认表单数据,那我们怎么去查看Vue实例呢?

我们在浏览器直接打印this不能得到Vue实例,因为在浏览器,this指向的是Windows。

获取Vue实例步骤

  1. 首先我们在浏览器端打开F12,找到Vue挂载的这个组件,获取到元素

这个有时候需要猜组件的结构,简单的组件测试,第一层Vue实例,一般挂载到id为app的元素上var vueEle = document.getElementById("app");

如果是子组件,可以先获取,然后看看有没有__vue__这个属性值,如果有,代表它挂载了Vue实例

  1. 然后我们用元素._vue_来打印这个Vue实例

    vueEle.vue

  1. 用 元素.vue.$data获取或者改变组件data数据

    vueEle.vue.$data

  1. 获取或改变组件data中某个变量的数据

    补充获取iframe中元素的方法
js 复制代码
document.getElementById("iframe000032").contentWindow.document.querySelector("#app")
相关推荐
moshuying17 分钟前
网购能买Token了!
前端
h_654321026 分钟前
echarts实现柱状图加一条横线
前端·echarts
风骏时光牛马38 分钟前
生成一个后端标题,只需要一个标题,不需要其他的任何文本。
前端
子非鱼@Itfuture39 分钟前
关于前后端联调中登录状态/登录信息失效?
java·前端
郭小李39 分钟前
openFeign入门
java·开发语言·前端
馒头不想说话1 小时前
AI当运营,帮你省人力
前端
梦曦i1 小时前
uni-app x下自研架构的工程化突围
前端·架构·uni-app x
速易达网络1 小时前
ECharts 图表制作完全指南:从零到可视化实战
前端·javascript·echarts
IT_陈寒1 小时前
SpringBoot多环境配置把我坑惨了,这个踩坑经验你最好看看
前端·人工智能·后端
徐小夕2 小时前
深度剖析 30k star 的编码 Agent DeepSeek-Reasonix:长会话 Token 成本直降 80%
前端·vue.js·github