Vue.js搭建移动端购物车界面－基本结构和数据渲染

本文介绍了如何使用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搭建移动端购物车界面－基本结构和数据渲染相关推荐

移动端cube界面设计html,滴滴开源基于 Vue.js 的移动端组件库 cube-ui
原标题:滴滴开源基于 Vue.js 的移动端组件库 cube-ui 开源最前线(ID:OpenSourceTop) 猿妹整编综合自:https://didi.github.io/cube-ui/ ...
【014】基于Vue.js的移动端购物商城网站(含源码、课设报告)
文章目录一.项目介绍二.代码及报告获取一.项目介绍基于Vue.js的移动端购物商城网站(含源码.课设报告),代码获取放在文末了,码字不易,感谢点赞~ 一.系统概述本部分主要是对项目进行简要描 ...
vue.js搭建个人博客
博客2.0更新啦博客2.0 博客地址:mangoya.cn 整体样式基本没有变化,主要变化是前后端重构,之前的1.0版本后端为php,并非博主所开发,这次重构调整了数据结构和所熟悉的语言,采 ...
Mint UI —— 基于 Vue.js 的移动端组件库
写文章登录 Mint UI -- 基于 Vue.js 的移动端组件库杨奕 8 个月前 Mint UI GitHub:https://github.com/ElemeFE/mint-ui 项目主页:h ...
vue ssr搭建服务端渲染项目
什么是服务器端渲染 (SSR) Vue.js 是构建客户端应用程序的框架.默认情况下,可以在浏览器中输出 Vue 组件,进行生成 DOM 和操作 DOM.然而,也可以将同一个组件渲染为服务器端的 HT ...
TSINGSEE青犀视频使用Vue.js搭建前端启动后共享屏幕无法获取音视频流问题解决
TSINGSEE青犀视频云边端架构产品的前端搭建大多是通过Vue来完成的,Vue的核心库只关注视图层,非常容易与其它库或已有项目整合,并且有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页 ...
了解MVVM,vue.js搭建属于你的饿了吗项目
1.MVVM框架 view <=> viewModel <=> model 视图(DOM) 通讯(观察者) 数据(js对象) 基本概 ...
vue+vant搭建移动端框架
主要内容 1.vant/rem移动端适配的解决方案 2. vue/cli二次配置及优化处理 3.基于注册动态模式实现loading 4.掌握vuex永久化存储 1 创建一个vue项目 1.1安装vue ...
基于 Vue.js 的移动端组件库mint-ui实现无限滚动加载更多
通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无 ...

Vue.js搭建移动端购物车界面－基本结构和数据渲染

Vue.js搭建移动端购物车界面－基本结构和数据渲染相关推荐

最新文章

热门文章