vue.js展示AJAX数据简单示例

最近琢磨了一下vue.js，并在项目中进行了运用，感觉非常好用，强烈推荐。

　　当通过AJAX方式取回数据后，使用vue.js可以完美地按一定逻辑在页面上的展示数据，代码简单、优美、自然，而且便于与在用的页面框架集成。
　　举个小例子。注意，代码中使用jQuery、bootstrap。
　　
一、页面引用vue.js，不用怀疑真的只引入一个JS就可以开始写代码了。

<script src="../assest/share/script/vue.js"></script>

二、返回的JSON数据示例

[  {"playid":"12113c676a4e4aefac75d793910ea193",  "playname":"新建活动",  "startDate":"2017-01-01",  "guestNum":2,  "nickname":"wallimn",  "blog":"http://wallimn.iteye.com"}  ]  

三、html代码

<table class="table table-bordered table-striped table-condensed" id="recentPlayTable">      <tr>          <th>名称</th><th>时间</th><th>人数</th>      </tr>      <tr v-if="loaded==false">          <td colspan="3" class="text-center">正在加载数据......</td>      </tr>      <tr v-else-if="items.length==0">          <td colspan="3" class="text-center">暂无数据</td>      </tr>      <template v-else>      <tr v-for="item in items">        <td>{{item.playname}}</td>          <td>{{item.startDate}}</td>          <td >{{item.guestNum}}</td>      </tr>      </template>  

四、Javascript代码

<script type="text/javascript">      var playTableVue = new Vue({          el:"#recentPlayTable",          data:{              items:[],              loaded:false          }      });      $(function (){          $.getJSON("JSON{playid:'${play.playid}'},function(json){              if(!json)json=[];              playTableVue.items=json;                playTableVue.loaded=true;          });      });  </script>