首页 > 其他分享 >为什么vue打印的对象在浏览器中显示...

为什么vue打印的对象在浏览器中显示...

时间:2024-04-28 17:44:05浏览次数:24  
标签:... vue 浏览器 log zdz 打印 JSON

1.现象

当在vue中打印对象的时候会发现有一些属性或者全部属性都是显示的...,点击展开后才能看到真正的值是什么.
image
image

2.原因

因为在vue中对象都是用了代理重写了get,由于get重写也就导致了浏览器不能直接获取到具体的值,因此才会在打印的时候为...,手动点击展开才显示具体的值

3.想看具体的值,不想手动点开怎么办

通过JSON.stringfy 序列化再用JSON.parse解析

  "proxy-zdz-log": {
    "prefix": "log",
    "body": ["console.log(JSON.parse(JSON.stringify($1))); // zdz-log", "$2"],
    "description": "zdz-log"
  },

对于vscode,可以直接配置一个代码片段来进行快速输入
如何设置
image
image
效果
image
image

标签:...,vue,浏览器,log,zdz,打印,JSON
From: https://www.cnblogs.com/coderzdz/p/18164210

相关文章

  • google浏览器插件开发
    项目结构在开发Chrome插件时,以下几个文件的作用如下:manifest.json:这是Chrome插件的清单文件,用于配置插件的基本信息、权限、页面跳转等。其中包括插件的名称、版本号、图标、后台脚本、浏览器动作等信息。background.js:这是Chrome插件的后台脚本文件,用于处理插件的后台逻辑......
  • vue3 引入workers 大量优化业务代码和复杂的计算的代码
    前沿vite页面引入worker在src新建一个 worker.d.ts文件declaremodule'*.worker.ts'{classWebpackWorkerextendsWorker{constructor();}exportdefaultWebpackWorker;}在 tsconfig.json页面引入"lib":["esnext",......
  • 『手撕Vue-CLI』添加自定义指令
    前言经上篇『手撕Vue-CLI』添加帮助和版本号的介绍之后,已经可以在控制台中输入nue--help来查看帮助信息了,但是在帮助信息中只有--version,--help这两个指令,而vue-cli中还有很多指令,例如create,serve,build等等,所以本章将继续添加自定义指令,例如create指令。添加create......
  • Vue系列---【如何关闭eslint校验?】
    如何关闭eslint校验?1.如果你的项目集成了eslint,但校验太严格,导致项目启动不了,你没时间排错,你可以找到vue.config.js,没有就创建,配上下面的内容。module.exports={//关闭eslint,因为校验太严格,例如:在main.js里定义了一个变量leta=100;,但未使用,就会导致项目启动不了......
  • 响应式原理(Vue3、Vue2)
    1.Vue3副作用函数(onMounted、watchEffect)帮助管理组件中的副作用逻辑,并自动追踪其依赖关系,以确保在数据变化时能够自动触发副作用函数的更新。会自动追踪被其内部函数引用的响应式数据。当这些数据发生变化时,Vue3会自动重新运行副作用函数,确保副作用与数据的状态保持同步。......
  • ant design pro vue项目搭建-运行项目
    1、克隆代码gitclone--depth=1https://github.com/vueComponent/ant-design-vue-pro.git2、依赖安装npminstall提示eslint版本报错  去除eslint,将package.json中eslint相关配置删除3、重新安装依赖完成,没有报错 npminstall 4、启动项目 npmrun......
  • 检测浏览器是否是处于开发模式、禁用F12和右键
    <script>functionisDevModel(){//阻止F12,Ctrl+Shift+Idocument.addEventListener('keydown',function(event){if((event.ctrlKey&&event.shiftKey&&event.keyCode==7......
  • 一文搞懂drag&drop浏览器拖放功能的实现
        拖放功能,即将一个元素从一个区域,通过拖拽,放置到另一个区域。常见的应用是将文件或图片从一个区域,拖放到另一个区域。中文常常把这表述成拖拽,实际上拖拽的描述并不准确,应该叫拖放,因为drag事件和drop事件是成对使用的,即拖拽和放置。    drag在拖拽动作发生时触发......
  • 前端学习之vue简介
    vue的简单介绍#Vue诞生背景从历史的潮流来说,人们从之前的:原生JS->Jquery之类的类库->前端模板引擎,他们都有一个共同的特点需要我们去操作dom元素。近几年来,得益于手机设备的普及和性能的提升,移动端的web需求大量增加,产生了一种叫webapp的东西,也就是移动端的网页应用......
  • vue了解与初步接触/使用
    Vue使用1、vue的启动1、Vue的操作命令启动.Vue去你对应的包里直接yarnserve2、首先先需要检测自己是否安装了yarn命令yarn命令和npm的区别1、yarn是从国内下载npm是从国外下载所以yarn速度效率比较高,npm速度效率比较低2、yarn-v--可以检测到是否有yarn命......