在浏览器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实现组建通信的方式，包括、props 父组件与子组件通信、$emit 子组件父组件传递、$emit与props结合兄弟组件传值等等，想具体了解的朋友可以参考下面文章的具体内容
2021-09-09
vue中定时器setInterval的使用及说明
这篇文章主要介绍了vue中定时器setInterval的使用及说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
vue+element开发一个谷歌插件的全过程
这篇文章主要给大家介绍了关于vue+element开发一个谷歌插件的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-05-05
使用element-ui +Vue 解决 table 里包含表单验证的问题
这篇文章主要介绍了使用element-ui +Vue 解决 table 里包含表单验证的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue-loader教程介绍
本篇文章主要介绍了vue-loader教程介绍，vue-loader就是告诉webpack如何将vue格式的文件转换成js。有兴趣的可以了解一下
2017-06-06
vue js格式化数字为金额格式代码
这篇文章主要介绍了vue js格式化数字为金额格式代码，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-04-04
Vue常用的修饰符及应用场景解读
这篇文章主要介绍了Vue常用的修饰符及应用场景解读，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
浅谈vue实现数据监听的函数 Object.defineProperty
本篇文章主要介绍了浅谈vue实现数据监听的函数 Object.defineProperty，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-06-06
nginx配置域名后的二级目录访问不同项目的配置操作
这篇文章主要介绍了nginx配置域名后的二级目录访问不同项目的配置操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
Vue组件间通信方法总结（父子组件、兄弟组件及祖先后代组件间）
这篇文章主要给大家介绍了关于Vue组件间通信的相关资料，其中包括父子组件、兄弟组件及祖先后代组件间的通信，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
2019-04-04