Ajax(vue-resource)
Vue 要实现异步加载需要使用到 vue-resource 库。
下载：npm install axios
vue中的axios 前端页面和后台数据进行交互
服务器下载：npm install http-server -g
安装：http-server
链接：先vue后vue-router最后axios
<div id="app">
<!--1.-->
<router-link to='/home'>首页</router-link>
<router-link to='/second'>详情页</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 type="text/javascript">
/*2.创建组建*/
/*---
* var 组件名={
* template:``
* }
* ---*/
var Home={
template:`
<h1>这是首页<h1> `
}
var Second={
template:`
<div>
<h2>这是详情页</h2>
<table border="1" cellspacing="0">
<theam>
<tr>
<th>编号</th>
<th>名称</th>
<th>单价</th>
<th>数量</th>
<th>总价</th>
</tr>
<tbody>
<tr v-for="val in arrs">
<td>{{val.num}}</td>
<td>{{val.fruit}}</td>
<td>{{val.money}}</td>
<td>{{val.many}}</td>
<td>{{val.zong}}</td>
</tr>
</tbody>
</theam>
</table>
</div>
`,
data:function(){
return{
arrs:null
}
},
mounted:function(){
var self=this;
axios({
method:'get',//发送数据的方式
url:'xi.json'
}).then(function(resp){//请求成功
console.log(resp.data)
self.arrs=resp.data
}).catch(function(err){//请求失败
})
}
}
/*3.配置路由*/
const routes=[
/*--{path:'/路径',component:组件}--*/
{path:'/',component:Home},
/*--默认首页--*/
{path:'/home',component:Home},
{path:'/second',component:Second}
]
/*4.创建一个路由实例*/
const router=new VueRouter({
routes:routes
})
//把路由挂在到vue实例上
new Vue({
el:'#app',
router:router
})
</script>
