如何使用Vue.js配合ajax绑定数据

这篇文章主要介绍了关于Vue.js配合ajax绑定数据的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

 <script>
 new Vue({
 el: '#vue-menu3', //p的id
 data: { : "" //数据，名称自定
 },
 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>

　页面代码

 <p 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>
 </p>

以下是数据单独绑定

 new Vue({
 el: '#vue-menu3', //p的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);
 })
 }
 });

　　页面代码

 <p 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>
 </p>

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