axios

小结

1.axios是vue中的ajax
2.ajax是用于前后端交互
3.现在使用的是2.0版本的axios
4.请求方式有get和post两种
5.安装方式:http-server  (需安装 npm install http-server -g)

6. method:" "   发送数据的方式
   url:" "      导入的json文件路径

案例

 
  <div>
        <div id="app">
       <router-link to="/home">首页</router-link>
       <router-link to="/detail">详情页</router-link>
       <router-view></router-view>
  </div>
   <script>
      var Home = {
            template:`
                <h1>这是首页</h1>
                `
        }
       
       var Detail={
            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 Fruit">
                                <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{
                    Fruit:null
                }
            },
            // mounted生命周期将内容显示在页面上
            mounted:function(){
                var self=this;
                axios({  
                    //发送数据的方式
                    method:"get", 
                    //josn文件链接
                    url:"fruit.json" 
                }).then(function(res){  //成功后执行的内容
                    console.log(res.data)
                    self.Fruit = res.data
                }).catch(function(opp){ //失败后执行的内容
                })
            }
        }
           const routes = [
            {path:"/",component:Home},
            {path:"/home",component:Home},
            {path:"/detail",component:Detail}
        ]
        const router = new VueRouter({
            routes:routes,
            linkActiveClass:"active"
        })

        new Vue({
            el:"#app",
            router:router
        })
    </script>

QQ截图20180925191934.png