axios

axios: vue中的ajax(ajax:前端页面和后台数据做交互）

axios的应用

 <div id="app"> 
    <router-link to="/home">首页</router-link> 
   <router-link to="/user">用户也</router-link> 
  <router-view></router-view> 
    </div>
   <script src="[dist/vue.js](dist/vue.js)"></script> 
   <script src="[dist/vue-router.js](dist/vue-router.js)"></script> 
  <script src="[dist/axios.js](dist/axios.js)"></script> 
   <script> 
  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', 
              url:'fruit.json' 
             }).then(function(resp){ 
            console.log(resp.data); 
              self.list=resp.data 
                   }).catch(function(err){ 
            console.log(err) 
      }) 
          } 
       } 
         const routes=[ 
        {path:'/home',component:Home}, 
        {path:'/user',component:User} 
     ] 
      const router=new VueRouter({ 
         routes:routes 
       }) 
    new Vue({ 
            el:' #app', 
         router:router 
     }) 
    </script> 

它的fruit.json部分
[
{
"num":1,
"pname":"apple",
"price":3,
"count":2,
"sub":6
},
{
"num":2,
"pname":"pear",
"price":4,
"count":3,
"sub":12
},
{
"num":3,
"pname":"banana",
"price":5,
"count":4,
"sub":20
}
]