引入axios.min.js文件
<body>
<div id="app">
<table border="1">
<tr v-for="item in userList">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
new Vue({
el: '#app',
//固定结构
data: {//在data中可以定义变量和初始值
//定义变量,值空数组
userList:[]
},
created(){//页面渲染之前
//调用定义的方法
this.getUserList()
},
methods:{//编写具体的方法
//创建方法 查询所有用户数据
getUserList(){
//使用axios发送ajax请求
//axios.提交方式("请求的接口路径").then(箭头函数).catch()
axios.get("data.json")
.then(response => {
//response:就是请求之后返回的数据
console.log("****" , response.data.data.items)
this.userList = response.data.data.items
console.log(this.userList)
}) // then 请求成功执行then方法
.catch(error => {
}) // 请求失败执行catch方法
}
}
})
</script>
</body>