走进Vue时代进阶篇(01)：重构电商购物车模块

kk_miles 发布于2019-08-21 18:43 / 953人阅读

摘要：欢迎你们跟着闰土大叔走进时代。其中购买数量可以增加或减少，每类商品还可以从购物车中移除。后记这大概就是一次用重构电商项目中的购物车模块的所有实现过程。作者闰土大叔链接来源掘金著作权归作者所有。

前言

从这篇文章开始，我准备给大家分享一些关于Vue.js这门框架的技巧性系列文章，正好我们公司项目中也用到了Vue。所以，教是最好的学。进阶篇比较适合于二三线城市，还在小厂打拼的童鞋们。欢迎你们跟着闰土大叔走进MVVM时代。

首先，需要声明一点，本篇文章不会从基础开始讲起，因为Vue官方文档已经讲得很清楚了，我就不再赘述了。所以，之前对Vue这门框架不太熟悉的童鞋可以先去官网上看看基础知识，比如Vue的模板语法、计算属性、条件渲染、列表渲染、事件处理、表单输入绑定以及Class与Style绑定等。进阶篇我会侧重讲点官网入门指南没讲到的、偏技巧性的东西。

那么接下来，搬好小板凳，正文从这开始～

在开始写购物车的业务代码前，我们需要对需求进行分析，这样有助于我们理清业务逻辑。首先，购物车需要展示一个已加入购物车的商品列表，包含商品的名称、单价、购买数量和操作等信息，还需要实时显示购买的总价。其中购买数量可以增加或减少，每类商品还可以从购物车中移除。最终实现的效果如下图所示：

在明确需求之后，我们就可以开始动手敲代码了。基础篇都会以直接引入Vue.js文件为例。先在index.html中引入Vue.js，然后创建一个根元素来挂载Vue实例，在data选项内写入我们需要的数据列表，里面包含了商品名称、单价、购买数量。这里需要说明一下，在实际业务中，这个列表是通过Ajax从服务端动态获取的，这里只做示例：

 1 var app = new Vue({
 2       el:"#app",
 3       data:{
 4         list:[
 5           {
 6             id:1,
 7             name:"iphone X",
 8             price:8388,
 9             count:1
10           },
11           {
12             id:2,
13             name:"apple watch3",
14             price:2888,
15             count:1
16           },
17           {
18             id:3,
19             name:"MackBook Pro",
20             price:12488,
21             count:1
22           }
23         ]
24       }
25 })

数据构建好之后，我们便可以在index.html中展示列表了，毫无疑问的是，肯定会用到v-for指令。为了考虑到用户体验，我们在这里需要做一点小小的优化。因为每个商品都是可以从购物车删除的，所以当列表为空时，在页面显示一个“购物车为空”的提示会更加友好，我们可以通过判断数组list的长度来实现该功能：

 1 
 2     
31     购物车为空
32

Tips: 解决Vue初始化慢导致页面闪动的最佳实践

相信眼尖的同学会发现一个比较陌生的指令v-cloak，它究竟是干嘛的？官网指南里也没提到啊...
这里抖一个小包袱，论解决Vue初始化慢导致页面闪动的最佳实践。你可能会发现，当网速较慢、Vue.js文件还没加载完时，在页面上会显示 {{ 插值 }} 的字样，知道Vue创建实例、编译模板时，DOM才会被替换，所以这个过程屏幕是有闪动的。于是，v-cloak指令应运而生，你只需要在根元素上添加上这个指令，然后在CSS中添加上一句：

1 [v-cloak]{
2       display:none;
3 }

就可以完美的解决这个问题了。但需要注意的是，v-cloak对于简单的项目很实用，但是在具有webpack工程化的项目里，项目的HTML结构只有一个空的div元素，剩余的内容都是由路由去挂载不同组件完成的，所以不再需要v-cloak。
让我们接着说回购物车的事情。总价totalPrice是依赖于商品列表而动态变化的，所以我们要考虑用计算属性来实现，顺便将结果转化为带有“千位分隔符”的数字。

 1 computed:{
 2       totalPrice: function(){
 3             var total = 0;
 4             for(var i=0;i
这段代码的难点在于千位分隔符的转换（每隔三位数加进一个逗号），各位童鞋可以查阅正则匹配的相关内容后尝试了解replace()的正则含义。
最后就剩下商品列表的渲染和相关的几个操作了。先是用v-for指令把数组list循环出来。商品序号、名称、单价、数量都是直接使用插值来完成的，在第4列的两个按钮

GPU云服务器云服务器进阶篇 webrtc进阶信令篇 webrtc进阶-信令篇 php中购物车模块

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90755.html

Laravel 教程 - 实战 iBrand 开源电商 API 系统

摘要：最佳实践良好的编码规范单元测试持续集成文档，从一开始就形成良好的编码习惯。真实的电商业务所有的业务需求来自真实的客户，并且线上良好运营中。重要通知： Laravel + 小程序的开源电商版本源码已经在 github 上拉，欢迎提交 issue 和 star :) 开源电商 Server 端: Laravel API源码开源电商 client 端：小程序源码 iBrand 简介...

iOS122 2019-06-28 18:26 评论0 收藏0
前端

摘要：建议阅读博客前端工程基础篇链接书籍深入浅出链接服务器端的是在年正式提出并开源的，传统的都运行在浏览器这样的宿主环境中，而基于谷歌浏览器的引擎构建的运行环境，使用了一个事件驱动非阻塞式的模型，将带入服务器领域。 1.网页布局HTML+CSS 技能要求学会用工具（如PS）切图，将设计稿还原成网页布局掌握常规布局方法：文档流布局，flex布局，grid布局，居中，浮动…… HTML5...

187J3X1 2019-08-29 16:10 评论0 收藏0
前端

摘要：建议阅读博客前端工程基础篇链接书籍深入浅出链接服务器端的是在年正式提出并开源的，传统的都运行在浏览器这样的宿主环境中，而基于谷歌浏览器的引擎构建的运行环境，使用了一个事件驱动非阻塞式的模型，将带入服务器领域。 1.网页布局HTML+CSS 技能要求学会用工具（如PS）切图，将设计稿还原成网页布局掌握常规布局方法：文档流布局，flex布局，grid布局，居中，浮动…… HTML5...

Drinkey 2019-08-26 12:09 评论0 收藏0
前端

摘要：建议阅读博客前端工程基础篇链接书籍深入浅出链接服务器端的是在年正式提出并开源的，传统的都运行在浏览器这样的宿主环境中，而基于谷歌浏览器的引擎构建的运行环境，使用了一个事件驱动非阻塞式的模型，将带入服务器领域。 1.网页布局HTML+CSS 技能要求学会用工具（如PS）切图，将设计稿还原成网页布局掌握常规布局方法：文档流布局，flex布局，grid布局，居中，浮动…… HTML5...

LittleLiByte 2019-08-02 11:03 评论0 收藏0