当前位置： 首页 > news >正文

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

news 来源：原创 2024/9/29 19:25:31

我们在日常的生产工作中，经常会遇到一些问题，比如，若产品已经部署，或是目前无法查看源代码，或者向用命令直接修改查询默认表单数据，那我们怎么去查看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

在这里插入图片描述
4. 获取或改变组件data中某个变量的数据
在这里插入图片描述
补充获取iframe中元素的方法

document.getElementById("iframe000032").contentWindow.document.querySelector("#app")

相关文章：

  • C语言学习系列：笔记列表
  • 信号处理中的相位
  • ESP32s3与Lsm6ds3通信---i2c【开源】
  • 单目物体测距
  • Linux 性能优化基础
  • 2024050901-重学 Java 设计模式《实战访问者模式》
  • DB-Engines Ranking 2024年6月数据库排行
  • 大屏幕互动系统PHP源码 附动态背景图和配乐素材 含搭建教程
  • 【乐吾乐2D可视化组态编辑器】在线使用，快速入门
  • yolov8摔倒检测（包含数据集+训练好的模型）
  • 实现一个vue js小算法 选择不同的时间段 不交叉
  • 数智化招采平台多层级多租户能力的价值
  • php文件包含
  • three.js 第四节 - 创建顶点（索引的使用）
  • 【CS.PL】Lua 编程之道: 基础语法和数据类型 - 进度16%
  • -------------------- 第二讲-------- 第一节------在此给出链表的基本操作
  • Codepen 每日精选（2018-3-25）
  • CSS3 聊天气泡框以及 inherit、currentColor 关键字
  • Docker入门（二） - Dockerfile
  • Github访问慢解决办法
  • HTTP--网络协议分层，http历史(二)
  • iOS小技巧之UIImagePickerController实现头像选择
  • Javascript弹出层-初探
  • java中具有继承关系的类及其对象初始化顺序
  • markdown编辑器简评
  • React-flux杂记
  • Redash本地开发环境搭建
  • RedisSerializer之JdkSerializationRedisSerializer分析
  • SOFAMosn配置模型
  • Vue UI框架库开发介绍
  • Webpack 4 学习01（基础配置）
  • 文本多行溢出显示...之最后一行不到行尾的解决
  • 白色的风信子
  • PostgreSQL 快速给指定表每个字段创建索引 - 1
  • 说说我为什么看好Spring Cloud Alibaba
  • ​secrets --- 生成管理密码的安全随机数​
  • # 日期待t_最值得等的SUV奥迪Q9：空间比MPV还大，或搭4.0T，香
  • #laravel部署安装报错loadFactoriesFrom是undefined method #
  • %check_box% in rails :coditions={:has_many , :through}
  • （1）(1.9) MSP (version 4.2)
  • （19）夹钳(用于送货)
  • （6）添加vue-cookie
  • （rabbitmq的高级特性）消息可靠性
  • （二）linux使用docker容器运行mysql
  • （黑马点评）二、短信登录功能实现
  • （论文阅读26/100）Weakly-supervised learning with convolutional neural networks
  • (三)uboot源码分析
  • （四）stm32之通信协议
  • (转)setTimeout 和 setInterval 的区别
  • .bashrc在哪里，alias妙用
  • .bat批处理（十）：从路径字符串中截取盘符、文件名、后缀名等信息
  • .net core 6 redis操作类
  • .NET Core 版本不支持的问题
  • .NET 线程 Thread 进程 Process、线程池 pool、Invoke、begininvoke、异步回调
  • .Net 中Partitioner static与dynamic的性能对比