axios异步通信取json数据

最新推荐文章于 2024-07-29 13:47:29 发布

Denial_learn

最新推荐文章于 2024-07-29 13:47:29 发布

阅读量658

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/Denial_learn/article/details/116483554

版权

Vue.js Axios JSON 数据绑定异步请求

关键词由CSDN通过智能技术生成

vue 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

自定义json数据：

data.json

{
	"name": "大吉吉之Vue",
	"url": "https://blog.csdn.net/Denial_learn",
	"page": 1,
	"isNonProfit": true,
	"address": {
		"street":"颍川路",
		"city":"长葛",
		"country":"中国"
	},
	"links":[
		{
			"name":"denial_learn",
			"url","https://blog.csdn.net/Denial_learn"
		},
		{
			"name":"Vue",
			"url","https://blog.csdn.net/Denial_learn/article/details/116260607?spm=1001.2014.3001.5501"
		},
		{
			"name":"线程",
			"url","https://blog.csdn.net/Denial_learn/article/details/116196247?spm=1001.2014.3001.5501"
		}
	]
}

页面取数据：

<body>
<div id="vue">
	<!--获取数据，json格式-->
	<div>{{info.name}}</div>
	<div>{{info.address.street}}</div>
</div>

<!--导入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<!--引入axios，前提这个路径一定要能够访问到-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    var vm = new Vue({
        el: "#vue",
        //data:{
            //model：数据
        //    message: "new cool!"
        //}
		//有两个data，一个是属性一个是方法
		date(){
			return{
				info:{//请求得返回参数得名字格式等，必须和json字符串必须一样
					name: null,
					address:{
						street: null,
						city: null,
						county: null
					}
					url: null
				}
			}
		},
		//钩子函数  链式编程 ES6新特性
		mounted(){
			//get后边是获取上边定义的json数据，并且可以通过接口访问后台，获取数据
			//后边this.info=response.data，将json数据赋值给上边得info
			axios.get('data.json').then(
				response=>(this.info=response.data)
			);
		}
    });
</script>

</body>