实战篇：利用计算属性、指令等知识开发购物车（基础篇）
前5章内容基本涵盖了Vue.js最核心和最常用的知识点，掌握这些内容已经可以上手开发一些小功能了。本节则以Vue.js的计算属性、内置指令、方法等内容为基础，完成一个在业务中具有代表性的小功能：购物车。
在开始写代码前，要对需求进行分析,这样有利于我们理清业务逻辑尽可能还原设计与产品交互。
购物车需要展示一个已加入购物车的商品列表，包含商品名称、商品单价、购买数量和操作等信息，还需要实时显示购买的总价。其中购买数量可以增加和减少，每类商品还可以从购物车中移除。
在明确需求后，我们就可以开始编程了，因为业务代码较多，我们将HTML、CSS、JavaScript分离为三个文件，便于阅读和维护：
⚪ index.html(引入资源及模板)
⚪index.js(Vue实例及业务代码）
⚪styele.css（样式）
现在index.html中引入Vue.js和相关资源，创建一个根元素来挂载Vue实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>购物车实例</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="app" v-cloak></div>
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
<script src="index.js"></script>
</body>
</html>
tips:注意，这里将vue.min.js与index.js卸载body的最底部，如果写在head里，Vue实例将无法创建，因为此时DOM还没有解析完成。
本例需要用到Vue.js的computed、methods等选项，在index.js中先初始化实例：
var app = new Vue({
el:'#app',
data:{
},
computed:{
},
methods:{
}
});
我们需要的数据比较简单，只有一个列表，里面包含了商品名称、单价、购买数量。在实际业务中，这个列表是通过Ajax从服务的动态获取的，这里只做示例，所以直接写在data选项内，另外每个商品还应该有一个全局唯一的id。我们在data内写入列表list：
data:{
list:[
{id:1,name:'iPhone7',price:6188,count:1},
{id:2,name:'iPad Pro',price:5888,count:1},
{id:3,name:'MacBook Pro',price:21488,count:1},
]
}
数据构建好后，可以在index.html中展示列表了，毫无疑问，肯定会用到v-for，不过在此之前，我们先做一个小的优化。因为每个商品都是可以从购物车移除的，所以当列表为空时，在页面显示一个“购物车为空”的提示更友好，我们可以通过判断数组list的长度来实现该功能：
<div id="app" v-clock>
<template v-if="list.length">
</template>
<div v-else> 购物车为空</div>
<div>
<template>里的代码分两部分，一部分是商品列表信息，我们用表格table来展现；另一部分就是带有千位分隔符的商品总价（每隔三位数加进一个逗号），这部分代码如下：
<template v-if="list.length">
<table>
<thead>
<tr>
<th></th>
<td>商品名称</td>
<td>商品单价</td>
<td>购买数量</td>
<td>操作</td>
</tr>
</thead>
<!--商品列表的渲染和相关的几个操作-->
<tbody>
<tr v-for="(item,index) in list">
<td>{{index+1}}</td>
<td>item.name</td>
<td>item.price</td>
<td>
<button @click="handleReduce(index)" :disabled="item.count===1">-<button>
{{item.count}}
<button @click="handleAdd(index)">+</button>
</td>
<td>
<burron @click="handleRemove(index)">移除</button>
</td>
</tr>
</tbody>
</table>
<div>总价：￥{{totalPrice}}</div>
</template>
总价totalPrice是依赖于商品列表而动态变化的，所以我们用计算属性来实现，顺便将结果转为带有“前卫分隔符”的数字，在index.js的computed选项内写入,以及在index.js中将上述三个@click方法写入：
computed:{
totalPrice:function(){
var total = 0;
for(var i=0;i<this.list.length;i++){
var item = this.list[i];
total+=item.price * item.count;
}
return total.toString().replace(/\B(?\d{3})+$)/g,',';//难点（正则匹配）
}
};
methods:{
handleReduce:function(index){
if(this.list[index].count===1){
return;
}else{
this.list[index].count--;
}
},
handleAdd:function(index){
this.list[index].count++;
}，
handleRemove:function(index){
this.list.splice(index,1);
}
}
以上源代码整理如下：
