1.0：vue-resource
2.0：axios（相当于库）
Vue中的ajax（前端页面与后台数据的交互）
在执行时，需要安装http-server
安装指令：npm install http-server -g
开启一个服务：http-server
练习
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>编号</td>
<td>品名</td>
<td>单价</td>
<td>数量</td>
<td>小计</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>
在打开时不能直接打开，需要输入网址127.0.0.1:8080打开
网友评论