axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端
- 在浏览器中可以帮助我们完成 ajax请求的发送
- 在node.js中可以向远程接口发送请求
引入js文件
输入vuehtml快捷键生成vue快捷模板
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>创建数据
这里只做演示，所以json数据就自己造一个了data.json文件
{
"success": "ok",
"coed": 200,
"data": {
"items": [
{
"name": "ssm",
"age": 10
},
{
"name": "ssm2",
"age": 20
},
{
"name": "ssm3",
"age": 30
}
]
}
}编写代码
<!DOCTYPE html>
<html lang="\en\">
<head>
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"/>
<meta name="\viewport\" content="\width=device-width" initial-scale="1.0\">
<title>Document</title>
</head>
<body>
<div id="app">
<table border="2">
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
<tr v-for="item in memberList ">
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
</table>
</div>
<script src="vue.min.js"></script>
<script src="axios.min.js"></script>
<script>
var app = new Vue({
el: "#app",
data: {
memberList: [] // 数组
},
created() { //页面渲染之前
// 调用方法
this.getList()
},
methods: {
getList() {
// axios.get('http://...')
axios.get('data.json')
.then(response => { //请求成功
console.log(response)
this.memberList = response.data.data.items // 具体数据
})
.catch(error => { // 请求失败
console.log(error)
})
}
}
})
</script>
</body>
</html>