Vue.js搭建移动端购物车界面-基本结构和数据渲染
来源:互联网 发布:太原高达软件 编辑:程序博客网 时间:2024/05/20 22:37
本文介绍了如何使用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"> <divclass="cart-item"> <divclass="cart-item-head"> <ul> <li>商品信息</li> <li>商品金额</li> <li>商品数量</li> <li>总金额</li> <li>编辑</li> </ul> </div> <ulclass="cart-item-list"> <!--productList在Vue组件中的data定义,包含全部数据,使用v-for进行遍历显示--> <li v-for="item inproductList"> <divclass="cart-tab-1"> <divclass="cart-item-check"> <!--Vue2.0中想为HTML标签绑定属性,必须使用v-bind:,绑定内容为对象,这里为a标签绑定check属性,属性值为item中的checked值--> <!--@click是v-on:click的缩写,为这个按钮绑定了点击事件,对应Vue组件methods中定义的方法selectProduct--> <ahref="javascript:void 0" class="item-check-btn"v-bind:class="{'check': item.checked}"@click="selectedProduct(item)"> <svgclass="icon icon-ok"><usexlink:href="#icon-ok"></use></svg> </a> </div> <divclass="cart-item-pic"> <imgv-bind:src="item.productImage" alt="烟"> </div> <divclass="cart-item-title"> <divclass="item-name">{{ item.productName }}</div> </div> <divclass="item-include"> <dl> <dt>赠送:</dt> <ddv-for="part in item.parts"v-text="part.partsName"></dd> </dl> </div> </div> <divclass="cart-tab-2"> <!--使用过滤器,|后面加Vue组件filter中定义的过滤器名称--> <divclass="item-price">{{ item.productPrice |formatMoney}}</div> </div> <divclass="cart-tab-3"> <divclass="item-quantity"> <divclass="select-self select-self-open"> <divclass="quantity"> <!--绑定changeMoney()方法,调整商品数量--> <ahref="javascript:;"@click="changeMoney(item,-1)">-</a> <inputtype="text" :value="item.productQuantity" disabled> <ahref="javascript:;"@click="changeMoney(item,1)">+</a> </div> </div> <divclass="item-stock">有货</div> </div> </div> <divclass="cart-tab-4"> <divclass="item-price-total">{{ item.productPrice*item.productQuantity| money('元')}}</div> </div> <div class="cart-tab-5"> <divclass="cart-item-operation"> <!--delConfirm方法控制删除时的弹框显示状态--> <ahref="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"> <divclass="cart-foot-l"> <divclass="item-all-check"> <ahref="javascript:void 0"> <spanclass="item-check-btn" :class="{'check':checkAllFlag}"@click="checkAll(true)"> <svg class="iconicon-ok"><usexlink:href="#icon-ok"></use></svg> </span> <span v-show="!checkAllFlag">全选</span> </a> </div> <divclass="item-all-del"> <ahref="javascript:void 0" class="item-del-btn"@click="checkAll(false)"> <spanv-show="checkAllFlag">取消全选</span> </a> </div> </div> <divclass="cart-foot-r"> <divclass="item-total"> <!--totalMoney是商品总金额,在Vue组件中通过方法被修改--> Item total: <span class="total-price">{{totalMoney| money('元')}}</span> </div> <divclass="next-btn-wrap"> <ahref="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值控制弹框状态--> <buttonclass="md-close" @click="delFlag = false">关闭</button> </div> <div class="md-content"> <divclass="confirm-tips"> <pid="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搭建移动端购物车界面-基本结构和数据渲染
- vue.js移动端从一个购物车入门vuex环境搭建
- vue.js移动端app实战3:从一个购物车入门vue
- vue.js移动端app实战3:从一个购物车入门vue
- vue.js移动端app实战3:从一个购物车入门vuex
- 03、vue.js 之数据渲染
- Vue.js 数据绑定渲染Demo
- Vue.js框架练习之购物车
- Vue.JS实战:简单的购物车
- vue.js条件渲染
- 关于淘宝购物车的界面搭建
- 原生js编写移动端加入购物车动画
- vue.js 数据渲染成功仍报错的问题
- Vue.js v-bind遇到的数据渲染问题
- Vue购物车和地址选配
- vue.js移动端配置flexible.js
- vue 脚手架的搭建和目录结构
- VUE —— 结构渲染
- leetcode264-Ugly Number II
- 程序员必须逛的同性交友网站(GitHub)!
- 单一文件的断点续传
- angularjs 动态从后台获取下拉框的值
- opencv mat (matrix)数据结构
- Vue.js搭建移动端购物车界面-基本结构和数据渲染
- 根据backtrace_symbols查错误代码行号
- 新的历程
- HAWQ + MADlib 玩转数据挖掘之(三)——向量
- tensorflow-MNIST机器学习入门
- 排序算法之冒泡排序
- 阿里云简单网站部署常用代码
- springmvc中RequestMethod.GET方式不适用于json数据格式的参数接收
- img 鼠标悬空放大,及点击放大