vue2.0实现购物车和地址选配功能

一、基础知识

1、创建vue实例

new Vue({
    el:"#app",
    data:{},
    mounted:function(){},//相当于window.onload
    filters:{},
    computed:{},
    methods:{},
})

2、常用指令

{{}}实现数据绑定
v-model 双向数据绑定，用于input，select，textarea
v-text 文本绑定
v-html 解析成html代码
v-bind 绑定html特性，比如class，style，src等，缩写是：，绑定class时，有两种方式，对象或者数组。

v-if 根据v-if的布尔值来判断是插入、移除元素
v-show
-v-on 绑定事件缩写是@
v-for 循环遍历列表


    {{ item.message }}

3、过滤器和computed的使用

二、实现细节

1、购物车列表的渲染

采用v-for渲染列表，数据采用{{}}实现和data数据绑定。

2、商品数量加减

表单，采用v-model进行双向绑定

3、总金额处的自动计算和格式化

计算采用商品数量*商品金额算出，格式化采用过滤器的方式

{{ item.productPrice*item.productQuantity | formatMoney}}

filters:{
        formatMoney:function(value){
            return '¥'+value.toFixed(2);
        }
    },

changeNum:function(item,type){
            if(type===1){
                item.productQuantity++;
            }else{
                item.productQuantity--;
            }
            if(item.productQuantity<1){
                item.productQuantity=1;
            }
            this.calcTotalMoney();

        },

4、选中商品

v-bind绑定class，：class=“{'check':item,checked}”，v-on点击事件@click=“selectItem（item）”
在selectItem事件里判断item是否有checked属性，如果没有添加属性并设为true，如果有的话就取反。
注意在添加属性事不能直接的item.checked=true,因为在data数据里没有这个属性，直接设置的结果不会更新渲染，所以要采用set方法。

selectItem:function(item){
            if(typeof item.checked=='undefined'){
                this.$set(item,"checked",true)
            }else{
                item.checked=!item.checked;
            }
            this.calcTotalMoney();
        },

5、全选和取消全选

给全选按钮添加checkAll事件，在checkAll函数中，遍历整个productList，将每一个item的checked属性设为true，如果之前没有就添加上，可以加一个参数，false时就是取消全选。

checkAllFunc:function(flag){
          var _this=this;
          this.checkAll=flag;
          this.productList.forEach(function(item){
            if(typeof item.checked=='undefined'){
                _this.$set(item,"checked",flag)
            }else{
                item.checked=flag;
            }
          })
          this.calcTotalMoney();

        },

6、计算总价钱

在选中商品、增减商品、全选和取消全选、删除商品都要重新计算总价钱，写一个calcTotalMoney的函数，在前面集中情况下调用即可。函数中即对有checked属性的列表进行遍历相加即可。

calcTotalMoney:function(){
            var _this=this;
            this.totalMoney=0;
            this.productList.forEach(function(item){
                if(item.checked){
                    _this.totalMoney+=item.productPrice*item.productQuantity;
                }

            })
        },

7、删除功能

点击删除按钮，出来确认删除的弹窗和遮罩，通过v-if设置他们的显示和隐藏即可，但是要传入item，以保证后边确认删除时知道删除的是哪个商品。
确认删除后采用indexOf记录删除的索引，用splice删除

confirmDel:function(item){
            this.showModal=true;
            this.curItem=item;
        },
        close:function(){
            this.showModal=false;
        },
deleteItem:function(){
            var index=this.productList.indexOf(this.curItem)
            this.productList.splice(index,1);
            this.close();
            this.calcTotalMoney();
        }

8、默认显示地址列表3个，点击more加载更多，回收more又变回三个

在data中设置初始itemNum：3，渲染列表时 item in addressList中的addressList可以改为一个计算方法，在computed中设置addressFilter方法，返回过滤后的addressList

computed:{
        addressFilter:function(){
             return this.addressList.slice(0,this.itemNum);
        }
    },

loadMore:function(){
            if(this.itemNum==3){
                this.itemNum=this.addressList.length;
            }else{
                this.itemNum=3;
            }
        },

9、设为默认

传入一个记录要设为默认的这个item的id，循环整个列表，如果这个id等于本身的id，就将他的isDefault设置为true，相反设置为false。

setDefault:function(id){
            this.addressList.forEach(function(item,index){
                if(item.addressId==id){
                    item.isDefault=true;
                }else{
                    item.isDefault=false;
                }
            })


        }

10、点击选中列表

在data中设置一个currentIndex，每次点击把这个item的index传给currentIndex，然后设置class，如果currentIndex==index即有这个class，非常巧妙的做法。

三、问题总结

1、v-text和v-html区别是什么？
2、v-show和v-if区别是什么？
v-show 的元素始终会被渲染并保留在DOM中，v-show知识简单的切换元素的CSS属性display，而且v-show不支持