Vue 奇淫技巧，控制台打印（非 console.log）当前组件实例

最新推荐文章于 2024-08-21 09:50:58 发布
最新推荐文章于 2024-08-21 09:50:58 发布
阅读量8.8k 收藏 6
点赞数 8
分类专栏： Web前端 文章标签： 开发技巧 JS Web Vue 调试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1014156094/article/details/101198372
版权

Vue 组件挂载成功后会在根节点 DOM 实例上挂一个 __vue__ 对象，所以有时候并不一定为了好调试而非要把 new Vue() 的实例赋给 window.app 什么的，直接在 console 上用 $0 表示当前高亮的节点，然后通过 __vue__ 就能找到组件实例了
在这里插入图片描述

粤小七
关注
专栏目录
console react 去除_vue或react项目生产环境去掉console.log的操作
weixin_33493816的博客
01-16 978
在开发环境写了很多console.log/info/debug,在生产环境需要去掉这些console。如果手动删除未免也太累了，再说以后想再开发还得重新写console。事实上webpack提供了删除console的插件，在vue-cli3里面是这样用的：首先安装terser-webpack-pluginnpm install terser-webpack-plugin -D然后在vue.conf...
用console.log解读Vue源码
liuyangjike的博客
12-20 608
前言 本文通过console.log的一些特性,结合vue.js的源码,通过一个简单的例子,让你了解Vue的各个过程的变化. 控制台输出的效果图 请用chrome查看,并打开控制台看效果 演示地址 准备 vue-console.html的创建 下载vue.js文件,在vue-console.html中引入,我写了一个简单的例子,涵盖:初始化视图->点击后更新视图(包括各个钩子函数)...
控制台打印vue实例
Fishmoving的博客
12-10 2946
控制台打印vue实例
Vue console.log打印[object Object]
风吟Pro的博客
01-05 1646
情景：想控制台打印个数据，这种打印会因为前面有字符串，而导致整个打印的内容为字符串。非要带点别的消息，就再写个console.log（信息）这样data的数据就不显示数据了，没有参考意义了。不要在console.log中配其他的信息，这样就可以正常打印了。
推荐文章：Vue.js 开发者必备 - vuejs-logger
最新发布
gitblog_00788的博客
08-21 542
推荐文章：Vue.js 开发者必备 - vuejs-logger vuejs-loggerProvides customizable logging functionality for Vue.js. Compatible with Vue2.项目地址:https://gitcode.com/gh_mirrors/vu/vuejs-logger 在现代前端开发中，日志记录对于应用的调试、监控和性...
浏览器控制器打印Vue中的data中的数据
热门推荐
qq_40649432的博客
05-10 1万+
第一种： var myVue = new Vue({ data() { return { name: 'zhou', } } }) 控制器中： console.log(myVue.name) 第二种： export default { mounted() { window.Vue = this; }, data() { return { index: '1', } } } 控制器： cons
vue3控制台打印格式化功能使用
qq_39174318的博客
04-26 228
打开浏览器开发工具 => 设置 => 偏好设置 => 控制台 => 勾选“自定义格式设置工具”。
vue或react项目生产环境去掉console.log的操作
10-14
在构建Vue或React项目时，开发过程中我们通常会在控制台使用console.log()、***()、console.debug()等方法来打印日志信息，帮助我们调试程序。然而，在将应用程序部署到生产环境时，这些日志信息就不再需要了。此时...
移动端控制台插件vConsole.min.js
09-08
1. **日志输出**：允许开发者打印各种类型的日志，如log、info、warn、error，便于追踪代码运行过程中的问题。 2. **网络请求监测**（Network）：展示HTTP请求和响应，包括请求头、响应头、请求体和响应体，帮助分析...
vue:带有级别的日志工具， 可打包动态控制debug是否输出
风一样的少年
03-29 1062
功能需求描述 希望打印的日志带有日期 希望上线以后，可以动态控制是否输出debug日志，以便进行调试 针对以上需求，我自己开发了一个工具插件。（我现在还是个小白，有些地方可能使用的不合适，仅供参考了） 针对动态调整debug的描述 我是基于vuex 以及chrom浏览器插件vue实现的。 通过在这里store的状态来控制页面是否输出debug。有个限制就是，无法调整create mount 方法中的debug。 实现 创建插件目录以及插件的js文件 下面是代码了（有点长） var Log5j =
在前台页面中console怎么查vue.prototype
qq_48128672的博客
10-24 525
在前台页面中console怎么查vue.prototype
控制台输出vue实例
weixin_50723565的博客
04-24 3136
本文主要介绍vue的一些使用方式
有趣的代码注释
jimmychan的博客
10-30 680
<!-- :: :;J7, :, ::;7: ,ivYi, , ;LLLFS: :iv7Yi ...
前端写接口 请求后台数据 存vuex中 打印到控制台
ccq的博客
08-05 4111
前端写接口请求后台数据，ajax axios vuex 数据处理，数据渲染。
怎么在控制台打印vue实例对象_从零玩转Vue全家桶（二）
weixin_39639381的博客
11-23 3494
点点关注不迷路，江哥带你上高速。本系列文章为Vue.js的学习，《Vue全家桶+项目实战》和《手写Vue全家桶》系列课程已完结，请在知播渔官网(www.it666.com)上点击查看学习哦。Vue 模板语法、计算属性、生命周期1. Vue 模板语法Vue.js 是建立在视图层的技术。所以 Vue.js 中的模板系统是非常重要的功能之一。1.1 什么是模板？当获取到后端数据后，我们会把它按...
怎么在控制台打印vue实例对象_深入Vue响应式原理,实现一个简易版Vue
weixin_39994296的博客
11-23 2066
来自拉勾教育大前端训练营 vue 框架源码与进阶模块,以下内容为个人在学习过程中对响应式原理的总结～先实现 mini 版 Vue 之前,我们先来了解一些概念1、数据驱动数据驱动响应式的核心原理发布订阅模式和观察者模式数据驱动数据响应式、双向绑定、数据驱动数据响应式 数据模型仅仅是普通对象的 JavaScript,而我们修改数据时,视图会进行更新,避免了繁琐的 DOM 操作,提高开发效率 双向绑定数...
Vue中自定义日志打印插件
codser的博客
08-08 5918
自定义日志管理，打包部署中不会显示打印的日志 在src目录下创建log目录，在log目录下创建index.js其内容如下： import Vue from 'vue'; // 获取当前的环境 const CURRENTENV = process.env.NODE_ENV; // 对象转换为数组 function convertToArray(nodes) { let...
##Vue day04
weixin_60651472的博客
08-10 511
vue.........
对这段代码进行详细中文注释<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Lifecycle Demo</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', data: { message: 'Hello, Vue!' }, beforeCreate() { console.log('beforeCreate hook') }, created() { console.log('created hook') }, beforeMount() { console.log('beforeMount hook') }, mounted() { console.log('mounted hook') }, beforeUpdate() { console.log('beforeUpdate hook') }, updated() { console.log('updated hook') }, beforeDestroy() { console.log('beforeDestroy hook') }, destroyed() { console.log('destroyed hook') } }) </script> </body> </html>
07-12
```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue Lifecycle Demo</title> </head> <body> <div id="app"> {{ message }} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el: '#app', // 将 Vue 实例挂载到 id 为 "app" 的元素上 data: { message: 'Hello, Vue!' // 定义一个名为 message 的数据属性，初始值为 "Hello, Vue!" }, beforeCreate() { console.log('beforeCreate hook') // 在实例被创建之前调用的生命周期钩子函数 }, created() { console.log('created hook') // 在实例创建完成后调用的生命周期钩子函数 }, beforeMount() { console.log('beforeMount hook') // 在编译模板之前调用的生命周期钩子函数 }, mounted() { console.log('mounted hook') // 在编译模板之后调用的生命周期钩子函数 }, beforeUpdate() { console.log('beforeUpdate hook') // 在数据更新之前调用的生命周期钩子函数 }, updated() { console.log('updated hook') // 在数据更新之后调用的生命周期钩子函数 }, beforeDestroy() { console.log('beforeDestroy hook') // 在实例销毁之前调用的生命周期钩子函数 }, destroyed() { console.log('destroyed hook') // 在实例销毁之后调用的生命周期钩子函数 } }) </script> </body> </html> ``` 这段代码演示了 Vue 组件的生命周期钩子函数的使用，并在控制台打印了每个钩子函数被调用的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值