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的开发个代阴影的对话框效果代码
Jul 28 Javascript
10款非常有用的 Ajax 插件分享
Mar 14 Javascript
JS实现样式清新的横排下拉菜单效果
Oct 09 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
Jan 10 Javascript
js实现滑动到页面底部自动加载更多功能
Feb 15 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
JS正则获取HTML元素的方法
Mar 31 Javascript
vue-loader教程介绍
Jun 14 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
Oct 15 Javascript
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
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
我的论坛源代码(十)
2006/10/09 PHP
ThinkPHP分组下自定义标签库实例
2014/11/01 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
PHP使用正则表达式实现过滤非法字符串功能示例
2018/06/04 PHP
yii框架数据库关联查询操作示例
2019/10/14 PHP
javascript事件冒泡详解和捕获、阻止方法
2014/04/12 Javascript
两种不同的方法实现js对checkbox进行全选和反选
2014/05/13 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
js下拉选择框与输入框联动实现添加选中值到输入框的方法
2015/08/17 Javascript
Node.js使用NodeMailer发送邮件实例代码
2017/03/06 Javascript
简单实现jQuery轮播效果
2017/08/18 jQuery
细说webpack源码之compile流程-rules参数处理技巧(2)
2017/12/26 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
解决koa2 ctx.render is not a function报错问题
2018/08/07 Javascript
npm 常用命令详解(小结)
2019/01/17 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
Vue.set 全局操作简单示例
2019/09/19 Javascript
Vue中fragment.js使用方法小结
2020/02/17 Javascript
windows下create-react-app 升级至3.3.1版本踩坑记
2020/02/17 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
2020/04/06 Javascript
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
spyder常用快捷键(分享)
2017/07/19 Python
Request的中断和ErrorHandler实例解析
2018/02/12 Python
python3中的md5加密实例
2018/05/29 Python
PyTorch读取Cifar数据集并显示图片的实例讲解
2018/07/27 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
顶丰TOPPIK台湾官网:增发纤维假发,告别秃发困扰
2018/06/13 全球购物
巴西24小时在线药房:Drogasil
2020/06/20 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
车辆年检委托书范本
2014/10/14 职场文书
《当代神农氏》教学反思
2016/02/23 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
MySQL主从复制断开的常用修复方法
2021/04/07 MySQL
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android