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

news2024/10/7 10:25:51

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

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

相关文章

[Alogithm][动态规划][背包问题][组合总和IV][不同的二叉搜索树]详细讲解

目录 1.组合总和 Ⅳ1.题目链接2.算法原理详解3.代码实现 2.不同的二叉搜索树1.题目链接2.算法原理详解3.代码实现 1.组合总和 Ⅳ 1.题目链接 组合总和 Ⅳ 2.算法原理详解 本题是个排列题,而并非组合题,所以并非背包问题 思路: 确定状态表示…

【spring 】支持spring WebFlux 的容器

spring WebFlux 是 Spring 5 引入的响应式 Web 框架,它支持非阻塞、事件驱动的编程模型,特别适合处理高并发的场景。 Spring WebFlux 可以运行在多种容器上 包括下面: Netty: Netty 是一个异步事件驱动的网络应用程序框架,用于快…

OpenCV 的模板匹配

OpenCV中的模板匹配 模板匹配(Template Matching)是计算机视觉中的一种技术,用于在大图像中找到与小图像(模板)相匹配的部分。OpenCV提供了多种模板匹配的方法,主要包括基于相关性和基于平方差的匹配方法。…

【RPC项目-1】0612

写在前面,主要是作学习回顾笔记,以备后续面试 LogEvent 组成: 日志级别(level)日期时间(精确到ms)进程号pid,线程号threadid文件名file_name、行号line自定义msg 输出格式如:[level]\t[%y-%…

dvadmin 调试问题

链接:django-vue3-admin: django-vue3-admin 是一套全部开源的快速开发平台,毫无保留给个人免费使用、团体授权使用。 django-vue3-admin 基于RBAC模型的权限控制的一整套基础开发平台,权限粒度达到列级别,前后端分离,…

vb.net小demo(计算器、文件处理等/C#也可看)

Demo1:使用窗体控件实现一个简易版计算器 Public Class Form1Private Sub Button_1_Click(sender As Object, e As EventArgs) Handles Button_1.ClickCalSubBox.Text Button_1.TextEnd SubPrivate Sub Button_2_Click(sender As Object, e As EventArgs) Handles …

HBase数据存储

1、数据模型 Namespace(表命名空间):表命名空间不是强制的,当想把多个表分到一个组去统一管理的时候才会用到表命名空间。Table(表):一个表由一个或者多个列族组成。数据属性,都在列…

javaWeb项目-ssm+vue个人博客网站管理系统功能介绍

本项目源码:java-基于ssmvue的个人博客网站的设计与实现源码说明文档资料资源-CSDN文库 项目关键技术 开发工具:IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7 框架:ssm、Springboot 前端:Vue、ElementUI 关键技术&#xff1a…

第 5 章:面向生产的 Spring Boot

在 4.1.2 节中,我们介绍了 Spring Boot 的四大核心组成部分,第 4 章主要介绍了其中的起步依赖与自动配置,本章将重点介绍 Spring Boot Actuator,包括如何通过 Actuator 提供的各种端点(endpoint)了解系统的…

DDD领域应用理论实践分析回顾

目录 一、DDD的重要性 (一)拥抱互联网黑话(抓痛点、谈愿景、搞方法论) (二)DDD真的重要吗? 二、领域驱动设计DDD在B端营销系统的实践 (一)设计落地步骤 &#xff0…

小程序无法调用服务端问题排查

1、问题描述 突然有一天线上的小程序不能登录,经查小程序无法调用。经查无法小程序页面无法调用后台服务。 2、排查过程 由于无法登录小程序发布服务器,无法测试小程序前端服务器到服务端网络,并且小程序无法看到日志。所以就得从服务端和网…

使用CSS、JavaScript、jQuery三种方式实现手风琴效果

手风琴效果有不少,王者荣耀官网(源网址 https://pvp.qq.com/raiders/ )有一处周免英雄,使用的就是手风琴效果,如图所示。 我试着用css、js、jQuery三种方式实现了这种效果,最终效果差不多,美中不…

IDEA创建简单web(servlet)项目(server为tomcat)

引言 鉴于网上很少有关于IDEA开发servlet项目的教程(24版idea,并且servlet技术十分复古,很少有人用到,能够理解,该文章旨在为在校的学生提供一个参考,项目技术简单)本人在此总结从头开始到项目…

MATLAB算法实战应用案例精讲-【数模应用】有序Logit(Logistic)分析

目录 算法原理 logit回归分析步骤 二元logit分析 多分类logit分析 有序logit分析 总结 SPSS 1、问题与数据 2、对数据结构的分析 3、SPSS分析方法 SPSSAU 有序Logit回归案例 1、背景 2、理论 3、操作 4、SPSSAU输出结果 5、文字分析 6、剖析 疑难解惑 提示…

Joplin Typora 粘贴图片 | 当使用Typora作为Joplin编辑器时,如何粘贴图片并上传到Joplin服务器,替换链接

一、背景 当我们使用Joplin时,上传图片时会自动上传到Joplin服务器并替换链接 但是Joplin的编辑器不好用,我更习惯用Typora来编辑, 然而Typora中上传的图片只能在本地,无法上传到Joplin服务器,在其他客户端也看不到图片…

迈向『闭环』| PlanAgent:基于MLLM的自动驾驶闭环规划新SOTA!

中科院自动化所深度强化学习团队联合理想汽车等提出了一种新的基于多模态大语言模型MLLM的自动驾驶闭环规划框架—PlanAgent。该方法以场景的鸟瞰图和基于图的文本提示为输入,利用多模态大语言模型的多模态理解和常识推理能力,进行从场景理解到横向和纵向…

若依RuoYi-Vue分离版—免登录直接访问

若依RuoYi-Vue分离版—免登录直接访问 如何不登录直接访问前端:后端:方法1:在SecurityConfig.java中设置httpSecurity配置匿名访问方法2:在对应的方法或类上面使用Anonymous注解。 如何不登录直接访问 官网有说明:如何不登录直接…

pyechart 创建柱形图

Pyecharts 是一个基于 Python 的开源数据可视化库,用于创建各种交互式的图表和可视化效果。它是在 Echarts 的基础上进行封装和优化,Echarts 是一个流行的 JavaScript 数据可视化库pyecharts 中文网站 : https://pyecharts.org/# pyecharts 模块 还支持…

day35| 860.柠檬水找零 406.根据身高重建队列 452. 用最少数量的箭引爆气球

文章目录 前言860.柠檬水找零思路方法一 406.根据身高重建队列思路方法一 452. 用最少数量的箭引爆气球思路方法一 总结 前言 860.柠檬水找零 思路 很简单,贪心只有一个,如果20优先用105找零,因为5更加万能一些 方法一 class Solution(ob…

RabbitMQ实践——配置Prometheus和Grafana报表

大纲 启用rabbitmq_prometheus插件安装启动Prometheus创建用户下载并解压修改配置启动 安装启动grafana安装启动配置数据源 在《RabbitMQ实践——在Ubuntu上安装并启用管理后台》中我们已经安装成功RabbitMQ及其管理后台。在此基础上,我们将打通它和Prometheus、Gra…