vue：axios异步通讯

由于Ajax需要对dom进行频繁的操作

所以这里使用axios进行替代

首先放上所有代码

<body>

<div id="vue">

{{info.name}}
    <a v-bind:href="info.url">点我</a>
</div>

<!--    到入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el:"#vue",
        data(){
            return{
                //请求的返回参数格式，要和json字符串一样
                info:null
            }
        },
        mounted(){ //钩子函数
            //这里也可以用Ajax
            axios.get('../data.json').then(response=>(this.info=response.data))
        }
    })
</script>
</body>

主要看一些新的东西

首先这里的data()是一个函数，并不是data属性，这里是固定格式，在函数中加return，

在我的理解里就是这个函数将return中的数据返回到了data属性里

return里的数据是可以被拿到的

再看mounted函数，这里需要引用官网的一个vue生命周期图

 从图中可以看到mounted函数的位置

他是在实时更新数据之前运行的，也就是说，这个函数全局只会运行一次，是一个适合用于初始化的函数

之后便是代码：

axios.get('../data.json').then(response=>(this.info=response.data))

url很明显是../data.json，之后response=>(this.info=response.data这个的意义就是将response拿到的数据赋值到info中，info在哪呢，

info在data函数中的return中，也就是说，我们将从../data.json拿到的json数据全部赋值到了info中，而我们前面说了，return中的数据是可以被拿到的，由此以来，我们从中获取的json数据

便可以轻松地显示在我们所需要的dom中

 

posted @ 2023-04-21 21:34  软工小蜗牛  阅读(26)  评论(0)  编辑  收藏  举报