引入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>