初学axios（vue的ajax）

2.0版本axios
使用GIT输入npm install http-server -g下载虚拟服务器
完成后再输入http-server
出现IP地址 217.0.0.1：8080输入到浏览器中 方可使用服务器打开

json：用来存储数据

代码：

<div id='app'>
     <!--1.-->
     <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>
       //2.创建组件
       var Home={
           template:`
             <h1>这是首页</h1>
           `
       }
       
       var User={
           template:`
             <div>
                <h1>这是用户页</h1>
                 <table border=1 cellspacing=0>
                   <thead>
                       <tr>
                         <th>编号</th>
                         <th>品名</th>
                         <th>单价</th>
                         <th>数量</th>
                         <th>小计</th>
                       </tr>
                   </thead>
                   <tbody>
                      <tr v-for="value in list">
                         <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{
                  list:null
               }
           },
           mounted:function(){
               var self=this;
               axios({
                   method:"get",//get post
                   url:'fruit.json'
               }).then(function(resp){//请求成功
                   console.log(resp.data)
                   self.list=resp.data;
               }).catch(function(err){//请求失败
                   console.log(err)
               })
           }
       }
       
       //3.配置路由
       const  routes=[
           {path:'/',component:Home},
           {path:'/home',component:Home},
           {path:'/user',component:User}
       ]
       
       //4.创建路由实例
       const router=new VueRouter({
           routes:routes,
           linkActiveClass:'active'
       })
       
       //5.路由实例挂载到vue实例上
       new Vue({
           el:'#app',
           router:router
       })   
       
    </script>