axios

1、用git安裝$ npm install axios
2、$ npm install http-server -g下載
1
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
/*
        .router-link-active{
            color:red;
        } 
*/
        .active{
            color:red;
        }
    </style>
</head>
<body>
 <a></a>
  <div id='app'>
     <!--1.-->
     <router-link to='/home'>首頁</router-link>
     <router-link to='/user'>用戶頁</router-link> 
     
    <!-- 盛放鏈接對應(yīng)的內(nèi)容-->
      <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.創(chuàng)建組件
       var Home={
           template:`
             <h1>這是首頁</h1>
           `
       }
       
       var User={
           template:`
             <div>
                <h1>這是用戶頁</h1>
                 <table border=1 cellspacing=0>
                   <thead>
                       <tr>
                         <th>編號</th>
                         <th>品名</th>
                         <th>單價(jià)</th>
                         <th>數(shù)量</th>
                         <th>小計(jì)</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.創(chuàng)建路由實(shí)例
       const router=new VueRouter({
           routes:routes,
           linkActiveClass:'active'
       })
       
       //5.路由實(shí)例掛載到vue實(shí)例上
       new Vue({
           el:'#app',
           router:router
       })   
       
    </script>
</body>
</html>
2、新建一個json后綴名的文件，然后在里面寫數(shù)據(jù)
[
    {
        "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
    }
]
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容