在浏览器console中如何调用vue内部方法

更新时间：2023年07月18日 09:57:18 作者：茶荼

这篇文章主要介绍了在浏览器console中如何调用vue内部方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

在浏览器console调用vue内部方法

new Vue({
  el: '#app',
  i18n,
  store,
  router,
  data () {
    return {
      address:''
    }
  },
  components: {App},
  template: '<App/>',
  mounted () {
    window.vue = this
  },
  methods:{
    updateAdress(address){
      console.log(address)
    }
  }
})

在main.js中设置

mounted(){window.vue = this}

即可在console.log中调用

vue.updateAdress(123) //123

vue调试--使用console输出

用示例介绍使用浏览器的console调试vue的方法。

输出对象数据

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>this is title</title>
</head>
<body>
<div id="app">
    {{message}}
</div>
<script src="js/vue.js"></script>
<script>
    let vm = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue!'
        }
    })
</script>
</body>
</html>

结果

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

基于vue展开收起动画的示例代码
这篇文章主要介绍了基于vue展开收起动画的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-07-07
vue中Form 表单的 resetFields() 失效原因及问题解决
在Vue项目中,使用formRef.value.resetFields()方法重置表单时可能遇到不起作用的问题,下面就来介绍一下如何解决,感兴趣的可以了解一下
2024-09-09
Vue CLI 3.x 自动部署项目至服务器的方法
本教程讲解的是 Vue-CLI 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 Nginx。非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
2019-04-04
解决创建vue项目后没有vue.config.js文件的问题
这篇文章给大家主要介绍如何解决创建vue项目后没有webpack.config.js(vue.config.js)文件，文中有详细的解决方法，感兴趣的朋友可以参考阅读下
2023-07-07
前端Vue如何获取登录的用户名或用户id代码实例
在前端开发中,获取登录用户的用户名是一项常见的需求,这篇文章主要给大家介绍了关于前端Vue如何获取登录的用户名或用户id的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-07-07
vue data对象重新赋值无效(未更改)的解决方式
这篇文章主要介绍了vue data对象重新赋值无效(未更改)的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue使用CSS变量详解
文章讲解了如何在Vue项目中使用CSS变量,包括动态计算值和根据条件计算属性,通过示例展示了如何使用CSS变量来实现动画效果和动态样式
2025-12-12
vue实现列表无缝滚动效果
这篇文章主要为大家详细介绍了vue实现列表无缝滚动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
使用konva和vue-konva库实现拖拽滑块验证功能
这篇文章主要介绍了使用konva和vue-konva完成前端拖拽滑块验证功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
VUE使用vue create命令创建vue2.0项目的全过程
vue-cli是创建Vue项目的一个脚手架工具,vue-cli提供了vue create等命令,下面这篇文章主要给大家介绍了关于VUE使用vue create命令创建vue2.0项目的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下
2022-07-07