1.0：vue-resource
2.0：axios（相當(dāng)于庫）
Vue中的ajax（前端頁面與后臺(tái)數(shù)據(jù)的交互）
在執(zhí)行時(shí)，需要安裝http-server
安裝指令：npm install http-server -g
開啟一個(gè)服務(wù)：http-server
練習(xí)
Image 4.png
<body>
<div id="app">
<router-link to="/home">首頁</router-link>
<router-link to="/user">用戶頁</router-link>
<router-view></router-view>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/axios.js"></script>
<script>
var Home = {
template:`
<div>
<p>首頁</p>
</div>
`
}
var User = {
template:`
<div>
<p>用戶頁</p>
<table border="1">
<thead>
<tr>
<td>編號(hào)</td>
<td>品名</td>
<td>單價(jià)</td>
<td>數(shù)量</td>
<td>小計(jì)</td>
</tr>
</thead>
<tbody>
<tr v-for="value in arr">
<td>{{value.num}}</td>
<td>{{value.pname}}</td>
<td>{{value.price}}</td>
<td>{{value.count}}</td>
<td>{{value.sub}}</td>
</tr>
</tbody>
</table>
</div>
`,
data:function(){
return{
arr:null
}
},
mounted:function(){
var text=this
axios({
method:'get',
url:'fruit.json'
}).then(function(a){
console.log(a.data)
text.arr = a.data
}).catch(function(b){
console.log(b)
})
}
}
const a = [
{path:'/',component:Home},
{path:'/home',component:Home},
{path:'/user',component:User}
]
const b = new VueRouter({
routes:a
})
new Vue({
el:'#app',
router:b
})
</script>
</body>
在打開時(shí)不能直接打開供屉，需要輸入網(wǎng)址127.0.0.1:8080打開
