在浏览器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>

结果

总结

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

您可能感兴趣的文章:

el-table多选toggleRowSelection不生效解决方案
这篇文章主要给大家介绍了关于el-table多选toggleRowSelection不生效的解决方案,文中通过图文以及代码将解决办法介绍的非常详细,需要的朋友可以参考下
2023-08-08
vue3项目目录结构示例详解
更好的了解项目的目录结构,能更好的去开发项目,下面这篇文章主要给大家介绍了关于vue3项目目录结构的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-02-02
Axios学习笔记之使用方法教程
axios是用来做数据交互的插件，最近正在学习axios，所以想着整理成笔记方便大家和自己参考学习，下面这篇文章主要跟大家介绍了关于Axios使用方法的相关资料，需要的朋友们下面来一起看看吧。
2017-07-07
详解Vue结合后台的列表增删改案例
这篇文章主要介绍了详解Vue结合后台的增删改案例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-08-08
vue动态子组件的两种实现方式
这篇文章主要介绍了vue动态子组件的两种实现方式,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-09-09
大前端代码重构之事件拦截iOS Flutter Vue示例分析
这篇文章主要为大家介绍了大前端代码重构之事件拦截iOS Flutter Vue示例分析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-04-04
Vue中通过属性绑定为元素绑定style行内样式的实例代码
这篇文章主要介绍了Vue中通过属性绑定为元素绑定style行内样式,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
解决vue中使用proxy配置不同端口和ip接口问题
这篇文章主要介绍了解决vue中使用proxy配置不同端口和ip接口问题 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
Vue 进入/离开动画效果
这篇文章主要介绍了Vue 进入/离开动画效果，代码简单易懂，非常不错，具有参考借鉴价值,需要的朋友可以参考下
2017-12-12
vue+ElementUI实现订单页动态添加产品数据效果实例代码
本篇文章主要介绍了vue+ElementUI实现订单页动态添加产品效果实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-07-07