从这篇文章开始，我准备给大家分享一些关于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 <div id="app" v-clock>
2 <template v-if="list.length">
3 <table class="shopCar">
4 <thead>
5 <tr>
6 <th></th>
7 <th>商品名称</th>
8 <th>商品单价</th>
9 <th>购买数量</th>
10 <th>操作</th>
11 </tr>
12 </thead>
13 <tbody>
14 <tr v-for="(item, index) in list">
15 <td>{{ index+1 }}</td>
16 <td>{{ item.name }}</td>
17 <td>{{ item.price }}</td>
18 <td>
19 <button @click="handleReduce(index)" :disabled="item.count === 1">-</button>
20 {{ item.count }}
21 <button @click="handleAdd(index)">+</button>
22 </td>
23 <td>
24 <button @click="handleRemove(index)">移除</button>
25 </td>
26 </tr>
27 </tbody>
28 </table>
29 <h3>总价：¥ {{ totalPrice }}</h3>
30 </template>
31 <div v-else>购物车为空</div>
32 </div>相信眼尖的同学会发现一个比较陌生的指令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<this.list.length;i++){
5 var item = this.list[i];
6 total += item.price * item.count;
7 }
8 return total.toString().replace(/\B(?=(\d{3})+$)/g,',');
9 }
10 }这段代码的难点在于千位分隔符的转换（每隔三位数加进一个逗号），各位童鞋可以查阅正则匹配的相关内容后尝试了解replace()的正则含义。
最后就剩下商品列表的渲染和相关的几个操作了。先是用v-for指令把数组list循环出来。商品序号、名称、单价、数量都是直接使用插值来完成的，在第4列的两个按钮<button>用于增减购买数量，分别绑定了两个方法handleReduce和handleAdd，参数都是当前商品在数组list 中的索引。button中使用了v-bind和v-on两个指令（这里用的都是语法糖写法）。
Tips: 什么是语法糖语法糖就是指在不影响功能的情况下，添加了某种方法实现同样的效果。
让我们接着说回button绑定的动态属性disabled，每件商品购买数量最少是1件，所以当count为1时，不允许再继续减少，所以这里给<button>动态绑定了disabled特性来禁用按钮。
最后就是在methods选项内添加3个方法：
1 methods:{
2 handleReduce: function(index){
3 if(this.list[index].count === 1) return;
4 this.list[index].count--;
5 },
6 handleAdd: function(index){
7 this.list[index].count++;
8 },
9 handleRemove: function(index){
10 this.list.splice(index, 1);
11 }
12 }这3个方法都是直接对数组list的操作，没有太复杂的逻辑。需要说明的是，虽然在button上已经绑定了disabled特性，但是在handleReduce方法内又判断了一遍。这是因为在某些时候，可能不一定会用button标签，也可能是div、span等，给它们增加disabled是没有任何作用的，所以为了安全起见，在业务逻辑中再判断一次，避免因修改HTML模板后出现bug。
后记这大概就是一次用Vue重构电商项目中的购物车模块的所有实现过程。这可能是你们学习Vue.js框架的一小步，却是我当Vue讲师梦想迈出的一大步。
随时随地看视频
