Vue.js配合ajax綁定數據

綁定所有數據
        <script>
            new Vue({
                el: '#vue-menu3',      //div的id
                data: {
                    all: ""    //數據，名稱自定
                },
                created: function () { //created方法，頁面初始調用    
                    var url = "GetData.ashx";
                    this.$http.get(url).then(function (data) {   //ajax請求封裝
                        var json = data.body;
                        var jsonObj = eval('(' + json + ')');
                       // console.info(jsonobj);
                        this.all = jsonObj;
                    }, function (response) {     //返回失敗方法調用，暫不處理
                        console.info(response);
                    })
                }
            });
        </script>

　頁面代碼

        <div id="vue-menu3">
            <table class="table table-striped" >
                <caption>借閱書籍列表</caption>
                <thead>
                    <tr>
                        <th>書籍編號{{all.id}}</th>
                        <th>書名</th>
                        <th>管理人員</th>
                        <th>借閱時期</th>
                        <th>歸還時間</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="value in all.libraryBooks">
                        <td>{{value.bookId}}</td>
                        <td>{{value.name}}</td>
                        <td>{{value.chargePerson}}</td>
                        <td>{{value.borrowTime}}</td>
                        <td>{{value.returnTime}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

　　

如下是數據單獨綁定

      new Vue({
                el: '#vue-menu3',      //div的id
                data: {
                    libraryInfo: ""    //數據，名稱自定
                },
                created: function () { //created方法，頁面初始調用    
                    var url = "GetData.ashx";
                    this.$http.get(url).then(function (data) {   //ajax請求封裝
                        var json = data.body;
                        var jsonobj = eval('('+json+')');
                        console.info(jsonobj);
        
                        //個人json數據參考下面
                        this.libraryInfo = jsonobj.libraryBooks;
                    }, function (response) {     //返回失敗方法調用，暫不處理
                        console.info(response);
                    })
                }
            });

　　頁面代碼

   <div id="vue-menu3">
            <table class="table table-striped">
                <caption>借閱書籍列表</caption>
                <thead>
                    <tr>
                        <th>書籍編號</th>
                        <th>書名</th>
                        <th>管理人員</th>
                        <th>借閱時期</th>
                        <th>歸還時間</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="value in libraryInfo">
                        <td>{{value.bookId}}</td>
                        <td>{{value.name}}</td>
                        <td>{{value.chargePerson}}</td>
                        <td>{{value.borrowTime}}</td>
                        <td>{{value.returnTime}}</td>
                    </tr>
                </tbody>
            </table>
        </div>

　　必須引用 vue-resource.js 和vue.min.js