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

内容摘要
这篇文章主要为大家详细介绍了Vue.js搭建移动端购物车界面，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记！
本文介绍了如何使用Vue搭建一
文章正文

这篇文章主要为大家详细介绍了Vue.js搭建移动端购物车界面，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记！

本文介绍了如何使用Vue搭建一个移动端购物车界面，最终实现的功能包括：

1.选择要最终购买的物品2.选择每件物品购买的数量3. 实时更新所选择物品的总价格

HTML部分

首先给出HTML部分代码和注释，显示了整个界面的结构。

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<code>
<body>
  <div class="checkout">
   <div id="app">
    <div class="container">
     <div class="cart">
      <div class="checkout-title">
       <span>购物车</span>
      </div>
   
      <!-- table -->
      <div class="item-list-wrap">
       <divclassdivclass="cart-item">
        <divclassdivclass="cart-item-head">
         <ul>
          <li>商品信息</li>
          <li>商品金额</li>
          <li>商品数量</li>
          <li>总金额</li>
          <li>编辑</li>
         </ul>
        </div>
        <ulclassulclass="cart-item-list">
         <!--productList在Vue组件中的data定义，包含全部数据，使用v-for进行遍历显示-->
         <li v-for="item inproductList">
          <divclassdivclass="cart-tab-1">
           <divclassdivclass="cart-item-check">
            <!--Vue2.0中想为HTML标签绑定属性，必须使用v-bind:，绑定内容为对象，这里为a标签绑定check属性，属性值为item中的checked值-->
            <!--@click是v-on:click的缩写，为这个按钮绑定了点击事件，对应Vue组件methods中定义的方法selectProduct-->
            <ahrefahref="javascript:void 0" class="item-check-btn"v-bind:class="{'check': item.checked}"@click="selectedProduct(item)">
             <svgclasssvgclass="icon icon-ok"><usexlink:hrefusexlink:href="#icon-ok"></use></svg>
            </a>
           </div>
           <divclassdivclass="cart-item-pic">
            <imgv-bind:srcimgv-bind:src="item.productImage" alt="烟">
           </div>
           <divclassdivclass="cart-item-title">
            <divclassdivclass="item-name">{{ item.productName }}</div>
           </div>
           <divclassdivclass="item-include">
            <dl>
             <dt>赠送:</dt>
             <ddv-forddv-for="part in item.parts"v-text="part.partsName"></dd>
            </dl>
           </div>
          </div>
          <divclassdivclass="cart-tab-2">
           <!--使用过滤器，|后面加Vue组件filter中定义的过滤器名称-->
           <divclassdivclass="item-price">{{ item.productPrice |formatMoney}}</div>
          </div>
          <divclassdivclass="cart-tab-3">
           <divclassdivclass="item-quantity">
            <divclassdivclass="select-self select-self-open">
             <divclassdivclass="quantity">
              <!--绑定changeMoney()方法，调整商品数量-->
              <ahrefahref="javascript:;"@click="changeMoney(item,-1)">-</a>
              <inputtypeinputtype="text" :value="item.productQuantity" disabled>
              <ahrefahref="javascript:;"@click="changeMoney(item,1)">+</a>
             </div>
            </div>
            <divclassdivclass="item-stock">有货</div>
           </div>
          </div>
          <divclassdivclass="cart-tab-4">
           <divclassdivclass="item-price-total">{{ item.productPrice*item.productQuantity| money('元')}}</div>
          </div>
          <div class="cart-tab-5">
           <divclassdivclass="cart-item-operation">
            <!--delConfirm方法控制删除时的弹框显示状态-->
            <ahrefahref="javascript:void 0" class="item-edit-btn"@click="delConfirm(item)">
             <svg class="iconicon-del"><use xlink:href="#icon-del"></use></svg>
            </a>
           </div>
          </div>
         </li>
        </ul>
       </div>
      </div>
   
      <!-- footer -->
      <div class="cart-foot-wrap">
       <divclassdivclass="cart-foot-l">
        <divclassdivclass="item-all-check">
         <ahrefahref="javascript:void 0">
          <spanclassspanclass="item-check-btn" :class="{'check':checkAllFlag}"@click="checkAll(true)">
           <svg class="iconicon-ok"><usexlink:hrefusexlink:href="#icon-ok"></use></svg>
          </span>
          <span v-show="!checkAllFlag">全选</span>
         </a>
        </div>
        <divclassdivclass="item-all-del">
         <ahrefahref="javascript:void 0" class="item-del-btn"@click="checkAll(false)">
          <spanv-showspanv-show="checkAllFlag">取消全选</span>
         </a>
        </div>
       </div>
       <divclassdivclass="cart-foot-r">
        <divclassdivclass="item-total">
         <!--totalMoney是商品总金额，在Vue组件中通过方法被修改-->
         Item total: <span class="total-price">{{totalMoney| money('元')}}</span>
        </div>
        <divclassdivclass="next-btn-wrap">
         <ahrefahref="address.html" class="btn btn--red" style="width:200px">结账</a>
        </div>
       </div>
      </div>
     </div>
    </div>
   
    <!--绑定一个md-show类，通过delFlag变量控制这个类，这个类可以让弹框显示或隐藏-->
    <div class="md-modal modal-msg md-modal-transition"id="showModal" v-bind:class="{'md-show':delFlag}">
     <div class="md-modal-inner">
      <div class="md-top">
       <!--关闭按钮，通过改变delFlag值控制弹框状态-->
       <buttonclassbuttonclass="md-close" @click="delFlag = false">关闭</button>
      </div>
      <div class="md-content">
       <divclassdivclass="confirm-tips">
        <pidpid="cusLanInfo">你确认删除此订单信息吗?</p>
       </div>
       <div class="btn-wrapcol-2">
        <!--选择yes则调用delProduct删除元素-->
        <button class="btnbtn--m" id="btnModalConfirm"@click="delProduct">Yes</button>
        <button class="btnbtn--m btn--red" id="btnModalCancel"@click="delFlag=false">No</button>
       </div>
      </div>
     </div>
    </div>
    <!--遮罩层，整个都是通过delFlag进行控制的，v-if根据表达式的真假条件渲染元素-->
    <div class="md-overlay"v-if="delFlag"></div>
   
   </div>
  </div>
</body> </code>

对应的关键注释在代码中给出，下面结合Vue.js的代码，对主要部分进行解释。

一、Vue组件基本格式

一个Vue组件的基本代码如下：

代码如下：

1
2
3
4
5
6
7
8
9
<code>
new Vue({
 el:'#app',
 data: {},
 filters: {},
 mounted: function() {},
 methods: {}
});
</code>

在JS代码中，使用new Vue即可声明一个Vue组件。Vue组件主要包括以下几个字段。1. el字段：el字段用来定义该组件在HTML中的哪个位置生效，需要传入HTML中某个元素的id值。这里传入了#app，表示HTML中id为app的元素内部都是这个Vue组件的作用范围。2. data字段：data字段定义了Vue组件中的数据，可能在HTML中进行渲染。在本应用中，商品的价格、名称、图片链接等信息，都是使用Vue组件中data字段内的数据进行渲染的。3. filter字段：filter字段是一个过滤器，在本应用中，针对价格等需要格式化的文本，就可以使用filter进行过滤。4. mounted字段：mounted字段通常定义一个方法，这个方法将在页面加载完成时自动执行，在React等框架中都有类似的机制。5. method字段：method字段用来定义Vue组件中需要用到的方法，这个字段的内容往往是需要投入时间最多的部分，例如页面中选择商品、增加数量等逻辑，都是在这个字段中进行编辑的。以上就是一个vue组件的主要组成部分，下面对各个部分功能的代码编写进行简要介绍。

二、数据渲染

数据渲染部分，要渲染的数据都存放在data中。每一个商品的信息都被模拟存储在了cart.json的文件中。我们可以实现数据自动加载，基本思路是：在method字段中定义一个方法，用来加载cart.json中的数据，并将其存放到data字段中定义的对应变量中。在mouted字段中，自动调用这个方法。这样就实现了页面加载完成后自动加载数据。对应的JS代码和注释如下：

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<code>
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()方法
  })
 }
</code>

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

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<code>
<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>
</code>

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

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持php教程。

注：关于Vue.js搭建移动端购物车界面的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇PHP简单聊天室的实现方法下一篇基于vue2实现左滑删除功能

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！