Vue.js技巧性系列，学以致用

序言

从这篇文章开始，我打算给你们分享一些关于Vue.js这窗框架的方法性系列文章，刚好我们公司项目中也用到了Vue。所以，教是最好的学。进阶篇比较适宜于二三线城市，还在小厂打拼的童鞋们。欢迎大家跟随闰土阿姨走入MVVM时代。

首先，须要申明一点，本篇文章不会从基础开始讲起，由于Vue官方文档早已讲得很清楚了，我就不再赘言了。所以，之前对Vue这窗框架不太熟悉的童鞋可以先去官网上瞧瞧基础知识，例如Vue的模板句型、计算属性、条件渲染、列表渲染、事件处理、表单输入绑定以及Class与Style绑定等。进阶篇我会注重讲点官网入门手册没提到的、偏方法性的东西。

这么接出来用php做购物车加减按钮，搬好小板凳，正文从这开始～

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

在明晰需求以后，我们就可以开始动手敲代码了。基础篇就会以直接引入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

 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 }