由于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/[email protected]"></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中
标签：info,异步,axios,return,函数,json,vue,data,response From： https://www.cnblogs.com/-0112/p/17341896.html