视频学习网址：http://www.imooc.com/learn/796
源码打包：https://codeload.github.com/fachaoshao/Vue-ShoppingCart/zip/master（before为老师未写功能的源码，after为实现功能后的源码）；
注意：以上源码请在 Apache 打开状态打开浏览；
该教程在功能上实现了：
1）将 .json文件数据发送http请求，通过遍历数组将数据渲染到页面；
2）创建过滤器实现了价格加“￥”和保留2位小数，分局部过滤器和全局过滤器；
3）实现了全选和取消全选的功能，通过v-bind:class
4）实现商品金额的计算和删除功能；
5）收货地址的卡片选择和设置默认地址；
下面说说我在该课程中get到的知识
在近期对 Vue 2.0 轮番轰炸般的学习之后，了解到 vue 这个框架是一个轻量级、高性能的js框架，在处理高并发的事件时vue较原生js或者jquery具有非常好的优势，因为他是一个MVVM模式（Model-View-ViewModel）的一个设计模式，以数据驱动为为核心思想，当数据发生变化的时候，用户界面发生相应的变化，开发者不需要手动的去修改dom.也就是说，vuejs帮我们封装了数据和dom对象操作的映射，我们只需要关心数据的逻辑处理，数据的变化就能够自然的通知页面进行页面的重新渲染。
MVVM框架
Vuejs的数据驱动是通过MVVM这种框架来实现的。MVVM框架主要包含3个部分:model、view和 viewmodel。
Model:指的是数据部分，对应到前端就是javascript对象
View:指的是视图部分，对应前端就是dom
Viewmodel:就是连接视图与数据的中间件
数据(Model)和视图(View)是不能直接通讯的，而是需要通过ViewModel来实现双方的通讯。当数据变化的时候，viewModel能够监听到这种变化，并及时的通知view做出修改。同样的，当页面有事件触发时，viewMOdel也能够监听到事件，并通知model进行响应。Viewmodel就相当于一个观察者，监控着双方的动作，并及时通知对方进行相应的操作，这样就形成了以数据的双向绑定。
数据响应原理
数据（model）改变 驱动 视图（view）自动更新
首先，vuejs在实例化的过程中，会对遍历传给实例化对象选项中的data 选项，遍历其所有属性并使用 Object.defineProperty 把这些属性全部转为 getter/setter。
同时每一个实例对象都有一个watcher实例对象，他会在模板编译的过程中,用getter去访问data的属性，watcher此时就会把用到的data属性记为依赖，这样就建立了视图与数据之间的联系。当之后我们渲染视图的数据依赖发生改变（即数据的setter被调用）的时候，watcher会对比前后两个的数值是否发生变化，然后确定是否通知视图进行重新渲染。
这样就实现了所谓的数据对于视图的驱动。
下面详细说下慕课网《使用vue2.0实现购物车和地址选配功能》功能实现的总结
1）将 .json文件数据发送http请求，通过遍历数组将数据渲染到页面；
在methods:里面定义方法：发送http请求，获得json数据
cartView: function () {
// var _this = this;
this.$http.get('data/cartData.json').then(res=>{
//此处使用了箭头函数，使得内部的this与外部this保持一致，可以不用上面声明的
//_this了
this.productList = res.data.result.list;
// this.totalMoney = res.data.result.totalMoney;
})
},使用了v-for，v-model，v-bind（：），v-if，v-on（@click）等基本api指令，将数据渲染到页面
2）创建过滤器实现了价格加“￥”和保留2位小数，分局部过滤器和全局过滤器；
局部过滤器，写在new Vue({})的 选项 里面
filters:{// 局部过滤器，在作用域内调用
formatMoney:function(value){
return "￥"+value.toFixed(2)+ '元'
}
}通过管道符号改变数据内容 {{ item.productPrice | formatMoney }} ￥19.00元
全局过滤器
Vue.filter('money',function(value,type) {// 全局过滤器，在全局范围内可用
return "￥"+value.toFixed(2) + type;
});参考（https://cn.vuejs.org/v2/guide/migration.html#过滤器参数符号-变更）
3）实现了全选和取消全选的功能，通过v-bind:class
单选按钮：
<a href="javascript:;" class="item-check-btn" v-bind:class="{'check':item.checked}" v-on:click="selectedProduct(item)"
>selectedProduct: function (item) {
if(typeof item.checked == "undefined"){
// Vue.set(item,'checked',true); // 全局注册
this.$set(item,'checked',true)
}else{
item.checked = !item.checked;
};
this.calcTotalPrice();
},
全选/取消全选按钮：
绑定一个点击函数，传值为true，就全选，false就取消全选
注意到：var _this = this;是es5的语法。要是采用es6的箭头函数，内部this就和外部this保持一致了
这里的思路是：传入的flag（true/false）保存在checkAllFlag中，遍历productList item.checked没被创建，我创建一个，设置他们的值都为checkAllFlag，若创建了，直接设置为checkAllFlag。这个遍历的过程就达到了一个 全选/取消全选 的目的。
<span class="item-check-btn" :class="{'check':checkAllFlag}" @click="checkAll(true)">全选按钮<a href="javascript:void 0" class="item-del-btn" @click="checkAll(false)">取消全选按钮checkAll: function (flag) {
this.checkAllFlag = flag;
var _this = this;
this.productList.forEach(function(item,index){
if(typeof item.checked == "undefined"){
// Vue.set(item,'checked',true); // 全局注册
_this.$set(item,'checked',_this.checkAllFlag)
}else{
item.checked = _this.checkAllFlag
}
});
this.calcTotalPrice();
},4）实现商品金额的计算和删除功能；
这里有单个商品的金额计算和总金额的计算
单个商品的金额计算：{{ item.productPrice * item.productQuantity | money('元')}}
总金额的计算：{{totalMoney | money('元')}}
然后就是改变单个商品数量以及选中商品或者全选商品，要是的总金额动态改变
首先定义一个函数：calcTotalPrice，设置this.totalMoney = 0;为什么呢？因为你每次金额变更前都得把总金额设置为0吧，不然在前面的基础上运算，比如我前面点击选中了，总金额变了，然后我取消了，总金额依然是之前的，所以得设置this.totalMoney = 0，每次计算前清0；
遍历数组productList
_this.totalMoney += item.productPrice*item.productQuantity; 叠加数组红所有商品金额就是总金额了
之后考虑选中与未选中以及全选和取消全选导致的总金额变化，所以他们都得调一次this.calcTotalPrice();实现总金额的计算；
changeMoney:function (product,way) {
if(way>0){
product.productQuantity++;
}else{
product.productQuantity--;
if(product.productQuantity < 1){
product.productQuantity = 1
}
};
this.calcTotalPrice();
},
selectedProduct: function (item) {
if(typeof item.checked == "undefined"){
// Vue.set(item,'checked',true); // 全局注册
this.$set(item,'checked',true)
}else{
item.checked = !item.checked;
};
this.calcTotalPrice();
},
checkAll: function (flag) {
this.checkAllFlag = flag;
var _this = this;
this.productList.forEach(function(item,index){
if(typeof item.checked == "undefined"){
// Vue.set(item,'checked',true); // 全局注册
_this.$set(item,'checked',_this.checkAllFlag)
}else{
item.checked = _this.checkAllFlag
}
});
this.calcTotalPrice();
},
calcTotalPrice:function(){
var _this = this;
this.totalMoney = 0;
this.productList.forEach(function(item,index){
if(item.checked){
_this.totalMoney += item.productPrice*item.productQuantity;
}
});
},5）收货地址的卡片选择和设置默认地址；
首先依然是遍历出 .json里面的地址，注意到这里的 v-for="(address,index) in filterAddress"，相比angular中的ng-repeat = "(index,address) in filterAddress" , angularjs是先写下标，再写值，注意啊，正好相反。vue 1.0中也是(index,address)与angualr相同；
这里我就把js代码都放上来了，不分段截取了
可以看到也是先发送$http请求，获取数据，注意获取的数据保存在response.data中，而不是子response中，做项目是可以查看下；
为了做加载更多，我们先让它显示3条数据，所以我们设置limitNum:3, 在computed中 return this.addressList.slice(0,this.limitNum)，所有我们得遍历filterAddress 的数据，当我们点击more时，@click="loadMore"，触发loadMore函数，this.limitNum = this.addressList.length，就可以加载addressList中所有的地址了
卡片地址选择：把点击的index赋值给currentIndex，当index==currentIndex时，显示被选中，这个挺重要的
<li v-for="(address,index) in filterAddress" :class="{'check':index == currentIndex}" @click="currentIndex = index">new Vue({
el:'.container',
data:{
addressList:[],
limitNum:3,
currentIndex:0,
shippingMethods:1
},
mounted: function () {
this.$nextTick(function () {
this.getAddressList()
})
},
methods:{
getAddressList:function(){
this.$http.get("data/address.json").then(response=>{
console.log(response)
var res = response.data;
this.addressList = res.result;
})
},
loadMore:function(){
this.limitNum = this.addressList.length
},
setDefault:function(addressId){
this.addressList.forEach(function(address,index){
if(address.addressId == addressId){
address.isDefault = true;
}else{
address.isDefault = false;
}
})
}
},
computed:{
filterAddress:function(){
return this.addressList.slice(0,this.limitNum)
}
}
})v-if="!address.isDefault" @click="setDefault(address.addressId)">设为默认<div class="addr-opration addr-default" v-if="address.isDefault">默认地址最后就是配送方式了
<li v-bind:class="{'check':shippingMethods == 1}" @click="shippingMethods=1">标准配送<li class="name" v-bind:class="{'check':shippingMethods == 2}" @click="shippingMethods=2">高级配送当点击高级配送时shippingMethods == 2，通过修改shippingMethods值决定显示谁！
上述文字都是个人见解，不当之处，还请各位指正！
参考文献：
https://cn.vuejs.org/v2/guide/reactivity.html
http://www.cnblogs.com/caizhenbo/p/6418284.html
http://www.cnblogs.com/caizhenbo/p/6710174.html
418
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
