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


Posted in Javascript onJune 28, 2020

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

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

HTML部分

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

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

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

一、Vue组件基本格式

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

new Vue({ 
 el:'#app', 
 data: {}, 
 filters: {}, 
 mounted: function() {}, 
 methods: {} 
});

在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代码和注释如下:

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获取商品名称等。这样,就自动生成了一个商品信息列表。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery图片平滑连续滚动插件
Apr 27 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
jQuery Clone Bug解决代码
Dec 22 Javascript
重构Javascript代码示例(重构前后对比)
Jan 23 Javascript
jquery 文本上下无缝滚动,鼠标放上去就停止 小例子
Jun 05 Javascript
javascript创建数组之联合数组的使用方法示例
Dec 26 Javascript
js触发onchange事件的方法说明
Mar 08 Javascript
canvas实现探照灯效果
Feb 07 Javascript
js实现3d悬浮效果
Feb 16 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
Vue export import 导入导出的多种方式与区别介绍
Feb 12 Javascript
vue npm install 安装某个指定的版本操作
Aug 11 Javascript
Vue实现购物车场景下的应用
Nov 27 #Javascript
javascript字体颜色控件的开发 JS实现字体控制
Nov 27 #Javascript
vue购物车插件编写代码
Nov 27 #Javascript
Vue.js devtool插件安装后无法使用的解决办法
Nov 27 #Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
Nov 27 #Javascript
vue2实现可复用的轮播图carousel组件详解
Nov 27 #Javascript
让bootstrap的carousel支持滑动滚屏的实现代码
Nov 27 #Javascript
You might like
ftp类(example.php)
2006/10/09 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
简单谈谈PHP中的Reload操作
2016/12/12 PHP
ThinkPHP框架实现的微信支付接口开发完整示例
2019/04/10 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
PHP常用字符串输出方法分析(echo,print,printf及sprintf)
2021/03/09 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
IE iframe的onload方法分析小结
2010/01/07 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
jQuery事件用法实例汇总
2014/08/29 Javascript
页面内容排序插件jSort使用方法
2015/10/10 Javascript
AngularJS使用ng-options指令实现下拉框
2016/08/23 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
bootstrap输入框组使用方法
2017/02/07 Javascript
jQuery使用ajax_动力节点Java学院整理
2017/07/05 jQuery
JavaScript使用math.js进行精确计算操作示例
2018/06/19 Javascript
微信小程序实现滴滴导航tab切换效果
2018/07/24 Javascript
对vue中v-on绑定自定事件的实例讲解
2018/09/06 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
python获取远程图片大小和尺寸的方法
2015/03/26 Python
用Python编写脚本使IE实现代理上网的教程
2015/04/23 Python
Python3.6正式版新特性预览
2016/12/15 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
Python 解决相对路径问题:&quot;No such file or directory&quot;
2020/06/05 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
总裁岗位职责
2013/12/04 职场文书
满月酒答谢词
2014/01/14 职场文书
高中运动会广播稿
2014/01/21 职场文书
2019大学生社会实践报告汇总
2019/08/16 职场文书
导游词之河北邯郸
2019/09/12 职场文书
vue项目支付功能代码详解
2022/02/18 Vue.js
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS