浏览器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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/29262.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

camx-打开相机预览hal3接口流程

open -》 initialize -》configure_streams -》process_capture_request -》process_capture_result。 initialize:该方法必须在camera_moudel_t中的open方法之后,其它camera3_device_ops中方法之前被调用,主要用来将上层实现的回调方法注册…

基于JSP技术的弹幕视频网站系统

开头语 你好,你好呀,我是计算机学长猫哥!如果有相关需求,可以通过文末的联系方式找到我。 开发语言 JSP 数据库 MySQL 技术 JSP JavaBeans 工具 MyEclipse、Tomcat、Navicat 系统展示 首页 用户登录界面 视频信息界面…

《跟我一起学“网络安全”》——等保风评加固应急响应

等保风评加固应急响应 一、安全加固 背景 随着IP技术的飞速发展,一个组织的信息系统经常会面临内部和外部威胁的风险,网络安全已经成为影响信息系统的关键问题。 虽然传统的防火墙等各类安全产品能提供外围的安全防护,但并不能真正彻底的消…

新闻稿标题怎么写吸引人?建议收藏

一个好的标题,不仅能激发读者的好奇心,还能引导他们继续深入了解文章内容。本文伯乐网络传媒将为你揭秘新闻稿标题写作的十大技巧,让你轻松写出吸引人的标题。 1. 激发好奇心 a. 提出疑问:以问句的形式提出问题,让读者…

C# Winform图形绘制

WinForms 应用程序中的控件是基于窗体的,当控件需要重绘时,它会向父窗体发送一个消息请求重绘。但是,控件本身并不直接处理绘制命令,所以你不能直接在控件上绘制图形。 解决方法: 重写控件的OnPaint方法使用CreateGr…

推荐3款轻量的window工具,免费好用

Rufus Rufus是一个制作U盘启动的工具,可以将window和linux操作系统制作成U盘启动,方便安装系统。 DesktopOK DesktopOK是一个电脑桌面图标备份工具,支持备份多个时间节点的桌面信息。一旦你的电脑桌面由于游戏或者其他软件导致你的桌面变得乱…

5.华为交换机局域网vlan网段隔离配置

目的:PC1与PC2互通 与PC3隔离 LSW1配置 [Huawei]vlan batch 10 20 [Huawei]int g0/0/1 [Huawei-GigabitEthernet0/0/1]port link-type access [Huawei-GigabitEthernet0/0/1]port default vlan 10 [Huawei-GigabitEthernet0/0/1]int g0/0/2 [Huawei-GigabitEthernet0/0/2]port…

线程相关的基本方法

1.线程等待(wait) 调用该方法后,线程会释放锁;线程进入到WATING状态;调用notifyAll()和notify()进行唤醒。 2.线程睡眠(sleep) 调用该方法不会释放锁(抱着锁睡);线程进入TIMED-…

C#调用OpenCvSharp和SkiaSharp绘制图像直方图

最近在B站上学习OpenCv教程,学到图像直方图,后者描述的是不同色彩在整幅图像中所占的比例(统计不同色彩在图像中的出现次数),可以对灰度图、彩色图等计算并绘制图像直方图。本文学习OpenCvSharp中与计算直方图相关的函…

Unity3D MMORPG背包系统数据获取与通讯详解

在Unity3D开发的大型多人在线角色扮演游戏(MMORPG)中,背包系统是一个至关重要的功能。玩家通过背包来管理、查看和使用他们获得的物品。背包系统不仅需要处理本地数据的存储和显示,还需要与服务器进行通讯,确保数据的同…

PS插件创成式填充功能全面测评:轻松实现AI修图新高度

大家好,我是你们的AIGC测评博主。今天,我将为大家带来一款ps插件创成式填充功能——深度体验 在图像处理领域,AI技术的应用已经越来越广泛。而创成式填充功能,无疑是其中的佼佼者。它利用AI技术,能够根据用户输入的关…

数据库系统概论(个人笔记)(第四部分)

数据库系统概论(个人笔记) 文章目录 数据库系统概论(个人笔记)4、中间的SQL4.1 连接表达式4.2 视图4.3 事务4.4 完整性约束4.5 SQL数据类型和模式4.6 SQL中的索引定义4.7 授权 4、中间的SQL 4.1 连接表达式 Join Expressions Join…

24.自定义python日志handler

自定义logger 功能代码逻辑说明 功能 可实现日志打印在控制台的同时,输出到文件中 且文件根据%Y%m%d或者%Y%m%d%H自动决定按天还是按小时分割 代码比较简单,比直接用自带的方便一些 代码 import sys import tracebackimport os as _os import logging…

使用mysqldump导出mysql数据库的数据

使用mysqldump导出mysql数据库的数据 mysqldump是mysql自带的一个工具,路径一般是C:\Program Files\MySQL\MySQL Server 5.7\bin\mysqldump.exe 有点需要导出的数据库,选择导入/导出,选择用mysqldump导出 在使用 IntelliJ IDEA 通过 mysqldum…

车载ADAS面试题,零基础也能看得懂!

周一来刷刷ADAS相关的面试题吧!相信看完这些题目,你会对ADAS有个更清晰的认识,即使你是零基础也可以轻松明白! 1、描述 ADAS 系统的基本组成和功能 答案:高级驾驶辅助系统(ADAS)是一套融合了多种…

Mathtype插入word,以及mathtype在word上的卸载

1.Mathtype插入word 花了两个小时,最终得出的极品简单的安装方法!!!!! mathype下载地址:https://store.wiris.com/zh/products/mathtype/download/windows 下载完傻瓜式安装,不要…

CAD二次开发(9)- CAD中对象的实时选择

1. 点的拾取 有时候我们需要在CAD画布上实时选取起始点和结束点,然后绘制出来一条直线。实现如下: public void getPoint(){var doc Application.DocumentManager.MdiActiveDocument;var editor doc.Editor;var docDatabase doc.Database;PromptPoi…

手写操作系统

对喜欢操作系统的伙伴强推一门课程 从0开始实现了支持文件系统、任务切换和网络协议栈的操作系统。 具体见 :http://www.ziyuanwang.online/977.html

三星(中国)投资公司线上入职测评笔试邀请数字推理语言逻辑真题题库

三星(中国)有限公司北京分公司 邀请您参加 SHL线上笔试 具体安排如下: 笔试时间:周三 9:00 笔试时长:1.5h ~ 2h 笔试内容及要求:数字推理限时30min;语言逻辑限时30min;性格测试不…

Flink集群运行模式

我们了解了flink的一个集群的一个基础架构,包括里面核心的一些组件,比如说job manager,task manager等一些组件的一些主要的一些组成。本节课程开始我们学习flink的一个集群部署模式。首先我们来看一下flink集群部署模式究竟应该有哪一些种类…