Vue.js搭建移动端购物车界面

data: {
 //存放商品json数据信息
 productList: [] }
methods: {
  //cartView()方法用来加载数据，并将数据存储在这个Vue组件中的productList变量中
  cartView: function() {
  var _this = this;
  //使用vue-resource模块加载数据，类似Jquery中的AJAX，返回数据存放在res.body中
  this.$http.get("data/cartData.json", {"id":123}).then(function(res) {
   _this.productList =res.body.result.list;
   // _this.totalMoney = res.body.result.totalMoney;
  });
}
 }
 mounted: function() {
 //执行代码放在$nextTick中，保证页面结构加载完毕后再执行函数
 this.$nextTick(function() {
  this.cartView(); //使用this调用methods中定义的cartView()方法
 })
 }

完成了这部分代码，所有商品的数据就存放在了组件中变量名为productList的字段中。
在前端HTML部分的进行调用，需要使用v-for指令。这个指令用来循环遍历Vue中的数据，代码如下：

<ul class="cart-item-list">
 <li v-for="item in productList">
 <div class="cart-tab-1">
  <div class="cart-item-check">
  </div>
  <div class="cart-item-pic">
  <img v-bind:src="item.productImage" alt="烟">
  </div>
  <div class="cart-item-title">
  <div class="item-name">{{ item.productName}}</div>
  </div>
  <div class="item-include">
  <dl>
   <dt>赠送:</dt>
   <dd v-for="part in item.parts"v-text="part.partsName"></dd>
  </dl>
  </div>
 </div>
</ul>

通过v-for指令，遍历了变量productList中的数据，并在内部的HTML中调用。利润item.productImage获取对应图片URL地址；item.productName获取商品名称等。这样，就自动生成了一个商品信息列表。

下一部分将介绍逻辑代码的编写。