2018-09-25

axios
<div id="app">
<router-link to='/home'>这是首页</router-link>
<router-link to='/user'>这是详情页</router-link>
<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 type="text/javascript">
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 fruList">
                      <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{
                    fruList:null
                }
            },
            mounted:function(){
                var self=this;
                axios({
                    method:'get',
                    url:'fruit.json'
                }).then(function(resp){
                    console.log(resp.data)
                    self.fruList=resp.data
                }).catch(function(err){
                    
                })
            }
        }
        const routes=[
            {path:'/',componpent:Home},
            {path:'/home',component:Home},
            {path:'/detail',component:Detail}
        ]
        const router=new VueRouter({
            routes:routes
        })
        new Vue({
            el:'#app',
            router:router
        })
    </script>