axios

它是vue中的ajax
版本：
1.0：vue-resource
2.0：axios 库
作用：前段页面和后台数据做交互
安装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>数量</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文档，在里面写数组

[
{
    "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