Vue学习--axios异步通信

最新推荐文章于 2024-07-09 10:41:47 发布

Cr_Wr

最新推荐文章于 2024-07-09 10:41:47 发布

阅读量244

点赞数 1

分类专栏： Vue

本文链接：https://blog.csdn.net/weixin_39525744/article/details/108767415

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

这篇博客探讨了Vue实例的生命周期钩子，详细解释了在实例创建、编译、挂载及数据变化时如何运行相关代码。文章强调了在特定生命周期阶段使用钩子函数的实践，如`created`、`mounted`、`updated`等，帮助读者理解如何在Vue应用中进行异步通信。

摘要由CSDN通过智能技术生成

#cdn

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

实例生命周期钩子

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

比如 created 钩子可以用来在一个实例被创建之后执行代码：

new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// => "a is: 1"

也有一些其它的钩子，在实例生命周期的不同阶段被调用，如 mounted、updated 和 destroyed。生命周期钩子的 this 上下文指向调用它的 Vue 实例。

From :https://cn.vuejs.org/v2/guide/instance.html

案例：

<body>
<h3>Axios</h3>
<div id="vue">
    <div>{{info.name}}</div>
    <div>{{info.address.city}}</div>
    <p>
        <a v-bind:href="info.url">My movie station</a>
    </p>
</div>

<!--Axios -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!--Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var vm = new Vue({
        el: "#vue",
        data(){
            return{
                //返回参数格式必须和json字符串一样
                info:{
                    name: null,
                    url: null,
                    address: {
                        street: null,
                        city: null,
                        country: null
                    }
                }
            }
        },
        mounted(){//钩子函数  ES6 新特性 ==  mounted: function(){...}
            axios.get('data.json').then(response=>(this.info=response.data))
        }
    })
</script>
</body>