首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

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

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

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

- Author -

fareise

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
javascript模拟订火车票和退票示例
Apr 24 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
JS通过Cookie判断页面是否为首次打开
Feb 05 Javascript
javascript中的 object 和 function小结
Aug 14 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
js链表操作(实例讲解)
Aug 29 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
3种vue路由传参的基本模式
Feb 22 Javascript
ES6入门教程之Array.from()方法
Mar 23 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
vue单页应用的内存泄露定位和修复问题小结
Aug 02 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
构造函数(1) transaction(1) 百度地图(1) XDM(3) 继承(1) variables(1) PyAutoGUI(1) promise(2) 封装(1) gRPC(3)
You might like
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
php设计模式 Observer(观察者模式)
2011/06/26 PHP
PHP的5个安全措施小结
2012/07/17 PHP
php获取操作系统语言代码
2013/11/04 PHP
Save a File Using a File Save Dialog Box
2007/06/18 Javascript
Javascript中的方法链（Method Chaining）介绍
2015/03/15 Javascript
基于jQuery实现仿百度首页换肤背景图片切换代码
2015/08/25 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
vue interceptor 使用教程实例详解
2018/09/13 Javascript
原生JS实现逼真的图片3D旋转效果详解
2019/02/16 Javascript
微信小程序 调用微信授权窗口相关问题解决
2019/07/25 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
node使用request请求的方法
2019/12/20 Javascript
Javascript如何实现扩充基本类型
2020/08/26 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
2020/11/09 jQuery
通过vue.extend实现消息提示弹框的方法记录
2021/01/07 Vue.js
[05:39]2014DOTA2西雅图国际邀请赛 淘汰赛7月14日TOPPLAY
2014/07/14 DOTA
Python中实现从目录中过滤出指定文件类型的文件
2015/02/02 Python
机器学习10大经典算法详解
2017/12/07 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
django认证系统实现自定义权限管理的方法
2018/07/16 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
Python 中pandas索引切片读取数据缺失数据处理问题
2019/10/09 Python
Python中的全局变量如何理解
2020/06/04 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
美国最大的网络男装服装品牌：Bonobos
2017/05/25 全球购物
JAVA和C++的区别
2013/10/06 面试题
出国留学自荐信
2013/10/25 职场文书
实习生个人的自我评价
2013/12/08 职场文书
建筑专业毕业生自荐信
2014/05/25 职场文书
工程质检员岗位职责
2015/04/08 职场文书
小学数学国培研修日志
2015/11/13 职场文书
2016党风廉政建设心得体会范文
2016/01/25 职场文书
实用求职信模板范文
2019/05/13 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL
生命的关键成分来自太空？陨石说是的
2022/04/29 数码科技