Ajax的作用
原生Ajax（淘汰）
Ajax-Axios2
简化版本：
例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
table {
width: 60%;
border-spacing: 0; /* 设置表格单元格之间的间距为 0 */
}
th, td {
border: 1px solid black; /* 设置单元格边框 */
padding: 8px; /* 设置单元格内边距 */
text-align: center; /* 文本居中 */
}
</style>
</head>
<body>
<div id="app">
<table>
<tr>
<th>id</th>
<th>login</th>
<th>node_id</th>
<th>url</th>
<th>html_url</th>
<th>type</th>
</tr>
<tr v-for="(user) in emps">
<td>{{user.id}}</td>
<td>{{user.login}}</td>
<td>{{user.node_id}}</td>
<td>{{user.url}}</td>
<td>{{user.html_url}}</td>
<td>{{user.type}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: "#app",//vue接管区域
data: {
emps:[]
},
mounted(){
axios.get("https://api.github.com/users").then(result =>{
this.emps = result.data;
})
}
});
</script>
</body>
</html>
效果：
