axios的基本使用

最新推荐文章于 2025-06-11 13:52:29 发布

花小猪

最新推荐文章于 2025-06-11 13:52:29 发布

阅读量120

点赞数

文章标签： json html5

本文链接：https://blog.youkuaiyun.com/weixin_46244909/article/details/119035603

版权

josn的数据：

{
	"name":"Java",
	"url":"http://baidu.com",
	"page":"1",
	"isNonProfit":true,
	"address":{
		"street":"hanguangmeng",
		"city":"xian",
		"country":"chain"
	},
	"link":[
		{
		"name":"boilibili",
		"url":"http://baidu.com"
		},
		{
		"name":"Java",
		"url":"http://baidu.com"
		},
		{
		"name":"baidu",
		"url":"http://baidu.com"
		},
	],
	
}

前端代码：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8"/>
		<title>vue</title>		
	</head>
	<style>
	[v-cloak]{
		display: none; //解决闪烁问题
	}
	</style>
	<body>
		<div id="vue" v-cloak>
			<div>{{info.name}}</div>
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
	<script>
		var vm = new Vue({
			el:"#vue",
			data(){
				return{
					info:{
						//请求的返回参数必须和请求格式一样
						name:null,
						address:{
							street:null,
							city:null,
							country:null
						}
					}
				}
			},
			mounted() { //钩子函数 链式编程 	ES6语法规范
				axios.get('data.josn').then(response =>(this.info=response.data));
			}
		});
	</script>
</html>