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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【Python网络爬虫分步走】使用LXML解析网页数据

Python网络爬虫分步走 – 使用LXML解析网页数据 Web Scraping in Python - Using LXML to Parse Web Data By Jackson@ML Lxml作为Python的第三方库,提供易用的且功能强大的API,用来解析XML和HTML文档。事件驱动的API被用于分步骤解析。 本文简要介绍使用lxml库解析网页的基…

linux中acl策略+文件权限

文档归属的局限性 - 任何人只属于三种角色:属主 属组 其他人- 无法实现更精细的控制 acl访问策略 - 能够对个别用户个别组设置独立的权限- 大多数挂载ext3/4,xfs文件系统默认已支持 Usage: setfacl [-bkndRLP] { -m|-M|-x|-X ... } file ...setfacl [选项] u:用户名…

【漏洞复现】红海云eHR PtFjk.mob 任意文件上传漏洞

免责声明: 本文内容旨在提供有关特定漏洞或安全漏洞的信息,以帮助用户更好地了解可能存在的风险。公布此类信息的目的在于促进网络安全意识和技术进步,并非出于任何恶意目的。阅读者应该明白,在利用本文提到的漏洞信息或进行相关测…

MacOS系统搭建Appium自动化测试环境

一、Appium简介 1.1 什么是APPium APPium是一个开源测试自动化框架,适用于原生、混合或移动Web应用程序的自动化测试工具。 APPium使用WebDriver协议驱动iOS、Android等应用程序。 APPium具有如下特点: 支持多平台(Android、iOS等)。支持多语言(python、java、ruby、js…

fs.1.10 ON rockeylinux8 dockerfile模式

概述 freeswitch是一款简单好用的VOIP开源软交换平台。 rockeylinux8 docker上编译安装fs.1.10的流程记录,本文使用dockerfile模式。 环境 docker engine:Version 24.0.6 rockylinux docker:8 freeswitch:v1.10.7 dockerfi…

代码随想录 day31|day32

分发饼干 题意: 对每个孩子 i,都有一个胃口值 g[i],这是能让孩子们满足胃口的饼干的最小尺寸;并且每块饼干 j,都有一个尺寸 s[j] 。如果 s[j] > g[i],我们可以将这个饼干 j 分配给孩子 i ,这…

go的netpoll学习

go的运行时调度框架简介 Go的运行时(runtime)中,由调度器管理:goroutine(G)、操作系统线程(M)和逻辑处理器(P)之间的关系 以实现高效的并发执行 当一个gorout…

netty:promise的简单示例

# 项目代码资源&#xff1a; 可能还在审核中&#xff0c;请等待。。。 https://download.csdn.net/download/chenhz2284/89442495 # 项目代码 【pom.xml】 <dependency><groupId>io.netty</groupId><artifactId>netty-all</artifactId><v…

基于JSP技术的个人网站系统

开头语&#xff1a; 你好呀&#xff0c;我是计算机学长猫哥&#xff01;如果有相关需求&#xff0c;文末可以找到我的联系方式。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP JavaBeans Servlet 工具&#xff1a;Eclipse、MySQL Workbench、…

nginx配置ssl证书

nginx配置ssl证书 1.官网下载 nginx官网下载地址 下载后&#xff0c;放到指定某一文件夹下并解压缩&#xff0c;之后cmd进入解压后的目录下&#xff0c;执行start nginx.exe命令 start nginx.exe然后在浏览器中访问默认监听80端口 http://localhost:80 浏览器访问有nginx表…

System-Verilog 实现DE2-115 流水灯

文章目录 一、什么是SystemVerilog二、代码实现实现结果 一、什么是SystemVerilog SystemVerilog是一种硬件描述语言(HDL)&#xff0c;它用于设计和验证电子系统&#xff0c;特别是在集成电路(IC)和系统级芯片(SoC)的设计过程中。SystemVerilog是Verilog语言的一个超集&#xf…

Photoshop中图像美化工具的应用

Photoshop中图像美化工具的应用 Photoshop中的裁剪工具Photoshop中的修饰工具模糊工具锐化工具涂抹工具 Photoshop中的颜色调整工具减淡工具加深工具海绵工具 Photoshop中的修复工具仿制图章工具污点修复画笔工具修复画笔工具修补工具内容感知移动工具红眼工具 Photoshop中的裁…

电子设计教程基础篇(电容)

文章目录 前言一、电容原理1.原理2.公式 二、电容种类1.结构1、固定电容2、可变电容3、微调电容 2.介质材料1、气体介质电容1、空气电容2、真空电容3、充气式电容 2、固体介质电容1、无机1、云母电容2、陶瓷电容1、瓷片电容2、独石电容 3、玻璃釉电容&#xff08;CI&#xff09…

韩顺平0基础学java——第24天

p484-508 System类 常见方法 System.arrycopy&#xff08;src&#xff0c;0&#xff0c;dest&#xff0c;1,2&#xff09;&#xff1b; 表示从scr的第0个位置拷贝2个&#xff0c;放到目标数组索引为1的地方。 BigInteger和BigDecimal类 保存大整数和高精度浮点数 BigInte…

ubuntu中安装docker并换源

使用 Ubuntu 的仓库安装 Docker sudo apt update现在&#xff0c;你可以使用以下命令在 Ubuntu 中安装 Docker 以及 Docker Compose&#xff1a; sudo apt install docker.io docker-composeDocker 包被命名为 docker.io&#xff0c;因为在 Docker 出现之前就已经存在一个名为…

pytorch学习笔记6

想要找一些官方的小工具数据集&#xff0c;可以进入pytorch官网&#xff0c;DOCS-》pytorch下拉至libraries&#xff0c;点击torchversion&#xff0c;调整版本至0.9.0就可以找到相应的一些数据集&#xff0c;训练集 ctrlp可以看一个函数中需要设置哪些参数 下载数据集可以参考…

如何解决javadoc一直找不到路径的问题?

目录 一、什么是javadoc二、javadoc为什么会找不到路径三、如何解决javadoc一直找不到路径的问题 一、什么是javadoc Javadoc是一种用于生成Java源代码文档的工具&#xff0c;它可以帮助开发者生成易于阅读和理解的文档。Javadoc通过解析Java源代码中的注释&#xff0c;提取其…

C++并发之锁(std::lock_guard,std::unique_lock)

目录 1 概述2 使用实例3 接口使用3.1 lock_guard3.2 adopt_lock3.3 defer_lock3.4 try_to_lock3.5 try_lock3.6 release3.7 lock3.8 call_one1 概述 锁保护是通过使互斥对象始终处于锁定状态来管理互斥对象的对象。。   在构造时,互斥对象被调用线程锁定,在析构时,互斥被解…

集成学习方法:Bagging与Boosting的应用与优势

个人名片 &#x1f393;作者简介&#xff1a;java领域优质创作者 &#x1f310;个人主页&#xff1a;码农阿豪 &#x1f4de;工作室&#xff1a;新空间代码工作室&#xff08;提供各种软件服务&#xff09; &#x1f48c;个人邮箱&#xff1a;[2435024119qq.com] &#x1f4f1…

Unity C#调用Android,IOS震动功能

最近在Unity上需要很原生移动端进行交互&#xff0c; 原理&#xff1a;新建一个android项目&#xff0c;把生成的app module给干掉&#xff0c;然后留下一个vibrationPlugin module&#xff0c;在这个module下写android震动代码&#xff0c;将这个android工程构建出来的 aar移…