axios： vue中的ajax 用于前后端交互

下载：npm install http-server -g

<script src="js/vue.min.js"></script>
<script src="js/vue-router.js"</script>
<script src="js/axios.js"></script>

<div class="app">
  <router-link to="/index">首页</router-link>
  <router-link to="/xiang">详情</router-link>
  <router-view></router-view>
</div>
  var Index={
        template:`
                <h1>hello world</h1>
        `
    }

    var Xiang={
        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 fri">
                        <td>{{value.num}}</td>
                        <td>{{value.name}}</td>
                        <td>{{value.price}}</td>
                        <td>{{value.const}}</td>
                        <td>{{value.sub}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        `,
        data: function () {
            return{
                fri:null
            }
        },
        mounted: function () {
            var aa=this
            axios({
                method:"get",//发送数据的方式
                url:'ff.json'
            }).then(function(resp){//请求成功
                aa.fri=resp.data
            }).cath(function(err) {//请求失败

            })
        }
    }

    const aa=[
        {path:'/',component:Index},
        {path:'/index',component:Index},
        {path:'/xiang',component:Xiang}
    ]
    const bb=new VueRouter({
        routes:aa
    })
    new Vue({
        el:'.app',
        router:bb
    })
<script>
</script>

新建一个 ff.json

[
    {
        "num":1,
        "name":"apple",
        "price":2,
        "const":2,
        "sub":4
    },
    {
        "num":2,
        "name":"banana",
        "price":3,
        "const":3,
        "sub":9
    },
    {
        "num":3,
        "name":"bab",
        "price":4,
        "const":4,
        "sub":16
    }
]