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>