把后台数据输出到前台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/user">用户页</router-link>
    <router-view></router-view>
</div>
<script src="dist/vue.js"></script>
<script src="dist/vue-router.js"></script>
<script src="dist/axios.js"></script>
<script>
    var home={
        template:`
            <h1>我是首页</h1>
        `
    }
    var user={
        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 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 rsel=this
            axios({
                method:'get',
                url:'fruit.json'
            }).then(function(resp){
                console.log(resp.data)
                rsel.list=resp.data
            }).catch(function(err){
                console.log(err)
            })
        }
    }
    const routes=[
        {path:'/',component:home},
        {path:'/home',component:home},
        {path:'/user',component:user}
    ]
    const router=new VueRouter({
        routes:routes
    })
    new Vue({
        el:'#app',
        router:router
    })
</script>
</body>
</html>

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