它是vue中的ajax
版本：
1.0：vue-resource
2.0：axios 庫
作用：前段頁面和后臺數(shù)據做交互
安裝http-server： npm install http-server -g
下載axios： npm install axios
開啟服務： http-server

html部分

<div class="itany">
            <router-link to='/home'>首頁</router-link>
            <router-link to='/usze'>用戶頁</router-link>
            <router-view></router-view>
</div>

js部分

<script>
            var Home={
                template:`
                <h1>這是首頁</h1>
                `
                
            }
            var Usze={
                template:`
                <div>
                <h1>這是用戶頁</h1>
                 <table border=1 cellspacing=0>
                   <thead>
                     <tr>
                      <th>編號</th>
                      <th>品名</th>
                      <th>單價</th>
                      <th>數(shù)量</th>
                      
                     </tr>
                     </thead>
                     <tbody>
                       <tr v-for='val in msg'>
                         <td>{{val.num}}</td>
                         <td>{{val.naa}}</td>
                         <td>{{val.sun}}</td>
                         <td>{{val.nuu}}</td>
                       </tr>
                     </tbody>
                   
                  
                 </table>
                
                
                </div>
                `,
                data:function(){
                    return{
                        msg:null
                    }
                },
                mounted:function(){
                    var aa =this
                    axios({
                        method:"get",
                        url:'arr.json'
                    }).then(function(tet){
                        aa.msg=tet.data
                    }).catch(function(ara){
                        console.log(ara)
                    })
                    
                }
                
            }
            
            const routes=[
            {path:'/',component:Home},
            {path:'/home',component:Home},
            {path:'/usze',component:Usze}
            
            
            ]
            
            const router=new VueRouter({
                routes:routes,
                linkActiveClass:'aa'
            })
            
            new Vue({
                el:'.itany',
                router:router
                
                
            })
            
            
</script>

建一個json文檔，在里面寫數(shù)組

[
{
    "num":1,
    "naa":"aa",
    "sun":2,
    "nuu":5
},
{
    "num":2,
    "naa":"bb",
    "sun":3,
    "nuu":10
},
{
    "num":3,
    "naa":"cc",
    "sun":4,
    "nuu":15
}
]

最后在git中開啟服務找到一個域名板乙，在瀏覽器地址欄中打開即可

效果圖示：

axios.png