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>單價(jià)</th>
                        <th>數(shù)量</th>
                        <th>小計(jì)</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",//發(fā)送數(shù)據(jù)的方式
                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>

新建一個(gè) 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
    }
]