vue 2.0 购物车功能实现详解（根据慕课网视频）

思路：

• 通过VueResource获取后台数据，浏览器控制台调试是否获取成功，用钩子函数mounted，确保当所有DOM挂载在页面上时，再请求
• 写好页面布局，设置接口，通过v-for实现页面渲染
• 通过filters过滤器实现渲染的数据格式化
• 实现商品数量加减功能（通过判断函数传参【-1,1】即可快速做到），同时控制数量最小只能减到1
• 实现选择商品功能，$set添加一个属性记录商品是否被选中状态，通过控制类名改变样式，实现 选择状态图标 的改变
• 实现全选和全取消功能,.forEach遍历商品列表，每个加上$set创造出的被选择状态或未被选择状态
• 计算结账总价格。每次计算前必须清0，遍历商品列表，每次计算（数量*单价），再商品相加
• 删除商品，用indexOf判断出已选择的商品位置，用splice 把商品从商品列表中删除。

知识点：

代码加详细注释vue文件：

<template>
	<div>
		<h1>购物车{
  {test}}</h1>
		<div>
			<ul v-for="item in productList">
				<!-- {'checked':item.ischecked} 通过布尔动态改变类名 -->
				<li class="select" :class="{'checked':item.ischecked}" @click="selectedItem(item)" ></li>
				<li><img :src="item.productImage" alt=""></li>
				<li>{
  {item.productName}}</li>
				<li>{
  {item.productPrice|chineseYuan('元')}}</li>
				<li class="inp">
					<a href="javascript:;" @click="changeQuantity(item,-1)">-</a>
					<input type="text&