axios

axios是vue中的ajax
前端页面和后台数据进行交互

<div id="app">
            <router-link to='/home'>首页</router-link>
            <router-link to='/detail'>详情页</router-link>
            <router-view></router-view>
</div>

    <script type="text/javascript">
        //2.创建组件
            var Home={
                template:`
                    <h1>这是首页</h1>
                `
            }
            
            var Detail={
                 template:`
                    <div>
                        <h1>这是详情页</h1>
                            <table border="" cellspacing="0" cellpadding="">
                                <tr>
                                    <th>编号</th>
                                    <th>名称</th>
                                    <th>单价</th>
                                    <th>数量</th>
                                    <th>总价</th>
                                </tr>
                                 <tr v-for="v in arrs">
                                        <td>{{v.num}}</td>
                                        <td>{{v.pname}}</td>
                                        <td>{{v.price}}</td>
                                        <td>{{v.count}}</td>
                                        <td>{{v.sub}}</td>     
                                </tr>
                            </table>
                    </div>
                `
                ,
                data:function(){
                 return{
                    arrs:null
                 }
         },
         
         
         mounted:function(){
             var self=this;
             axios({
                 method:'get',//发送数据的方式
                 url:'axios.json'
             }).then(function(resp){//请求成功
                 console.log(resp.data)
                 self.arrs=resp.data
             }).catch(function(err){//请求失败
                 
             })
         }    
       } 
            
            
        

         const routes=[
                {path:'/',component:Home},
                {path:'/Home',component:Home},
                {path:'/Detail',component:Detail}
         ]
         
         //4.创建一个路由实例
        const router=new VueRouter({
            routes:routes
        })
        
        //把路由挂在到vue实例上
           new Vue({
               el:'#app',
               router:router
           })
            
        </script>

效果图：

2.png