vue 模板中使用 console.log

这篇具有很好参考价值的文章主要介绍了vue 模板中使用 console.log。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在 vue 工程中,你是否以为下述方式可以正常使用?

<!-- 模板中使用全局对象属性 -->
<button @click="console.log(123)">点我</button>

如果项目中这样使用,vue2 会直接抛出警告:

[vue warn]: Property or method “console” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.

vue3 会直接抛出错误

TypeError: : Cannot read properties of undefined (reading ‘log’)

模板中的表达式将被沙盒化,仅能够访问到有限的全局对象列表。该列表中会暴露常用的内置全局对象,比如 MathDate。没有显式包含在列表中的全局对象将不能在模板内表达式中访问。

如何注册能够被应用内所有组件实例访问到的全局属性?

vue2 实现

vue2 中支持的有限的全局对象列表

var allowedGlobals = makeMap(
  'Infinity,undefined,NaN,isFinite,isNaN,' +
  'parseFloat,parseInt,decodeURI,decodeURIComponent,encodeURI,encodeURIComponent,' +
  'Math,Number,Date,Array,Object,Boolean,String,RegExp,Map,Set,JSON,Intl,' +
  'require' // for Webpack/Browserify
)

vue2 中可以通过原型 Vue.prototype 进行扩展。

import Vue from 'vue'
Vue.prototype.console = { log: console.log }

vue3 实现

vue3 中支持的有限的全局对象列表

const GLOBALS_WHITE_LISTED =
  'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
  'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
  'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt'

vue3 中提供了专门的配置属性 app.config.globalProperties文章来源地址https://www.toymoban.com/news/detail-419817.html

<script setup>
import { getCurrentInstance } from 'vue'
getCurrentInstance().appContext.config.globalProperties.console = { log: console.log }
</script>

到了这里,关于vue 模板中使用 console.log的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • postman怎么打开console控制台,打印console.log

    postman在哪显示console.log日志呢? 在脚本中使用变量时,要怎么看到变量获取到的值,使用Postman Console去实现的。 操作步骤 应用菜单–View—Show Postman Console,打印变量的值,就可以在此窗口查看数据 窗口显示如下:  

    2024年02月11日
    浏览(86)
  • 【前端】webpack打包去除console.log

    需要在打包的时候,自动地去除掉所有console.log 也可以用 if(process.env.NODE_ENV === \\\'production\\\'){} 之类的条件判断包起来,打包的时候生产环境自动去掉console.log测试环境保留

    2024年02月09日
    浏览(41)
  • 小程序console.log不打印问题

    好像某一天突然小程序就不打印了... 全局搜索compress.drop_console(一般在config文件中),设置为false即可 解决了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! 然后顺便升级了小程序最新版本。 附上配置图:

    2024年02月12日
    浏览(37)
  • Selenium 捕获 console logs (Java)

    目录 启用日志记录功能 有时候在进行自动化测试的时候控制台输出会帮忙定位问题,所以捕获控制台输出就显得很重要了~ 以下以selenium 4为例:  我们可以使用driver.manage().logs().get(LogType.BROWSER)代码在Selenium中检索日志,该代码将返回一个包含所有控制台日志的LogEntries对象。

    2024年02月05日
    浏览(39)
  • vscode 清除全部的console.log

    在放页面的大文件夹view上面右键点击在文件夹中查找 console.log.*$  注意:要选择使用正则匹配  替换为 \\\" \\\" (空字符串) 注释打印  注意:我这里在匹配前面加了四个空格,是因为页面里面有些已经是注释了的,如果不在前面加空格就会全部都匹配到,重复加注释变成 // // co

    2024年02月10日
    浏览(37)
  • 放弃 console.log 吧!用 Debugger 你能读懂各种源码

    很多同学不知道为什么要用 debugger 来调试,console.log 不行么? 还有,会用 debugger 了,还是有很多代码看不懂,如何调试复杂源码呢? 这篇文章就来讲一下为什么要用这些调试工具: 相信绝大多数同学使用 console.log 调试的,把想看的变量值打印在控制台。 这样能满足需求,

    2023年04月17日
    浏览(41)
  • javascript实现久久乘法口诀表、document、write、console、log

    MDN console.log() 方法向 Web 控制台输出一条信息。这条信息可能是单个字符串(包括可选的替代字符串),也可能是一个或多个对象。 w3school log() 方法返回数字的自然对数(以 E 为底)。 如果参数 x 为负数,则返回 NaN 。 如果参数 x 为 0 ,则返回 -Infinity 。 MDN Console 对象提供了浏览

    2024年02月17日
    浏览(42)
  • 【IDE 小程序】小程序控制台 不打印 console.log问题

    全局搜索compress.drop_console(一般在config文件中),设置为false,再重新打开小程序即可

    2024年02月13日
    浏览(95)
  • webpakc原理之开发一个清除console.log(xxx)的loader

    一、webpack中清除console的方法 当然想要清除console我们可以使用babel-loader结合babel-plugin-transform-remove-console插件来实现。 安装babel-loader和babel-plugin-transform-remove-console插件 在webpack配置文件中配置loader 其中, babel-plugin-transform-remove-console 插件中的exclude选项可以指定保留哪些日志

    2024年02月11日
    浏览(37)
  • 项目上线存在的缓存问题以及存在的debugger和console.log等问题

    下载uglifyjs-webpack-plugin插件 在vue.config文件中进行配置

    2024年01月20日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包