vue基础篇实战总结一：购物车实战

上周看完了vue基础篇 本想继续看进阶篇 本着基础不牢地动山摇的原则 特地总结重新再写一遍基础篇中实战开发过的一些小东西，以加深熟练度
如果还没有开始vue学习的朋友可以看这本书，还不错
链接：https://pan.baidu.com/s/110W8Rv0ZtxpQdmh3UQNx8A
提取码：qwd1

ok，接下来开始我的总结之路把！
第一个实战：
开发一个购物车
首先，咱们先把长相弄出来(也就是HTML和css) 我使用了pug模板引擎 和 bootstrap框架 这俩都很简单的 百度就花几个小时就自己可以搞定
(pug)HTML:

.container(style="margin-top:100px")
            .row
                #app1
                    #pay_car(v-cloak)
                        template
                            table
                                thead
                                    tr
                                        th 商品ID
                                        th 商品名称
                                        th 商品单价
                                        th 购买数量
                                        th 操作
                                        th 选中
                                tbody
                                    template
                                        tr
                                        tr
                                            td
                                            td
                                            td
                                            td
                                            td
                                            td
                            div 总价:$yen;
                                button 全选
                        div 购物车为空

看上去 十分简单 也很好理解 至于那里有两个template，template这个东西 可以用来传值 通俗点就是template下面的子元素可以使用template的参数吧(不太知道怎么形容-.-) 子元素使用这个参数之后就可以干些事情了下面会接着说
CSS:

[v-cloak]{
    display: none;
}

table{
    border: 1px solid #e9e9e9;
    border-collapse:collapse;
    border-spacing: 0;
    empty-cells: show;
}

th,td{
    padding: 8px 16px;
    border:1px solid #e9e9e9;
    text-align: center;
}

th{
    background:#f7f7f7;
    color:#5c6b77;
    font-weight: 600;
    white-space: nowrap;
}

CSS十分简洁 那个v-cloak就是防止加载vue的时候出现闪烁的一个vue指令 不用太纠结这个
好了，接下来开始写js,一个一个解释一下吧，data里面有两个数据 一个是叫types的数组，用于表示商品的种类 一个是叫list的二维数组 用于表示商品信息 list二维数组里的一个数组代表一类商品，而下面的computed计算属性有一个函数是totalprice是用于当数据变更的时候及时计算当前总价，响应式的更新视图，比如我删掉一个数据 那总价就相应减少这个函数就这意思。
然后四个函数分别是手动减少增加移除和全选。 整个功能就这些 很简单的一个购物车

var par_car = new Vue({
    el:'#pay_car',
    data:{
        types:[
            {type:'LOL'},
            {type:'家用电器'}
        ],
        list:[
            [
                {
                    id:1,
                    name:'瑞文-冠军之刃',
                    price:79,
                    count:1,
                    is_choose:false
                },
                {
                    id:2,
                    name:'亚索-西部牛仔',
                    price:45,
                    count:2,
                    is_choose:false
                },
                {
                    id:3,
                    name:'盖伦-钢铁军团',
                    price:99,
                    count:5,
                    is_choose:false
                }
            ],
            [
                {
                    id:1,
                    name:'洗衣机',
                    price:4999,
                    count:1,
                    is_choose:false
                },
                {
                    id:2,
                    name:'微波炉',
                    price:345,
                    count:2,
                    is_choose:false
                },
                {
                    id:3,
                    name:'电磁炉',
                    price:199,
                    count:5,
                    is_choose:false
                }
            ]
        ]
    },
    computed:{
        totalprice:function(){

        }
    },
    methods:{
        handleReduce:function(){

        },
        handleAdd:function(){

        },
        handleRemove:function(){

        },
        chooseAll:function(){
            
        }
    }
})

好了，现在来完善一下HTML
HTML: 下面多了很多很多东西啊 我从上解释到下 你可以边看这段文字边看代码
首先 第一个template那 多了个v-if="list.length"这个就是如果list数组为0 也就是没有商品了(你移除的时候)都没有商品了就不显示整个功能区了，然后这个时候你看最后一行有一个v-else指令 当没有商品时候就显示下面那个玩意 也就是 "购物车为空"这段话
接着，下面tbody的template多了个v-for 用来遍历list的一级数组，记住别用div或者其他东西 用了你的值传不到下面，下面接收不到就渲染不出来。当然你也可以用props父传子传值，这是后面的实战了这里可用可不用。
好 接着下面tr又是一次遍历二级数组 其实就是一个循环嵌套 这样理解就行了。
然后主要是下面 按钮一个减号和一个加号的中间还显示当前商品的数量
点击减号按钮就去执行函数，加号按钮一样
减号按钮还有一个指令:disabled 也很好理解 就是当前商品数量为1的时候就无法使用按钮
后面也没啥了 双向绑定是否被选中的值 这对计算总价有用处 选中的计算 没选中的就不计算。
然后有个全选按钮就调用函数就可以了。

.container(style="margin-top:100px")
            .row
                #app1
                    #pay_car(v-cloak)
                        template(v-if="list.length")
                            table
                                thead
                                    tr
                                        th 商品ID
                                        th 商品名称
                                        th 商品单价
                                        th 购买数量
                                        th 操作
                                        th 选中
                                tbody
                                    template(v-for="(items,index) of list")
                                        tr {{types[index].type}}
                                        tr(v-for="(item,indexes) of items")
                                            td  {{item.id}}
                                            td  {{item.name}}
                                            td  {{item.price}}
                                            td
                                                button(@click="handleReduce()" :disabled="item.count===1" style="float:left") -
                                                div(style="float:left") {{item.count}}
                                                button(@click="handleAdd()" style="float:left") +
                                            td
                                                button(@click="handleRemove()") 移除 
                                            td
                                                input(type="checkbox",v-model="item.is_choose")
                            div 总价: ¥{{totalprice}}
                                button(@click="chooseAll" style="position:relative;right:0") 全选
                        div(v-else="") 购物车为空

接下来完善js 一会还会回来改一下HTML就结束了
js 先是点击减号按钮 减少数量的函数handleReduce():
这个函数很简单 只需要传入当前item的两个下标 然后在函数里面进行当前item的自减就可以了，只是当数量为1时无法减少，以防万一嘛。

 handleReduce:function(indexes,index){
            if(this.list[index][indexes].count===1){
                return;
            }
            this.list[index][indexes].count-=1;
        }

然后是增加函数,同理

handleAdd:function(indexes,index){
            this.list[index][indexes].count += 1; 
        }

然后是移除函数：

handleRemove:function(indexes,index){
            //直接从二级数组里面
            this.list[index].splice(indexes,1);
            //如果删除以后整个list[index]空了
            if(!this.list[index].length){
                this.list.splice(index,1);
                this.types.splice(index,1);
            }
        }

全选函数：

chooseAll:function(){
            //将所有item的is_choose置true
            for(let i = 0 ; i < this.list.length;i++){
                for(let j = 0; j < this.list[i].length;j++){
                    this.list[i][j].is_choose = true;
                }
            }
        }

最终的HTML

.container(style="margin-top:100px")
            .row
                #app1
                    #pay_car(v-cloak)
                        template(v-if="list.length")
                            table
                                thead
                                    tr
                                        th 商品ID
                                        th 商品名称
                                        th 商品单价
                                        th 购买数量
                                        th 操作
                                        th 选中
                                tbody
                                    template(v-for="(items,index) of list")
                                        tr {{types[index].type}}
                                        tr(v-for="(item,indexes) of items")
                                            td  {{item.id}}
                                            td  {{item.name}}
                                            td  {{item.price}}
                                            td
                                                button(@click="handleReduce(indexes,index)" :disabled="item.count===1" style="float:left") -
                                                div(style="float:left") {{item.count}}
                                                button(@click="handleAdd(indexes,index)" style="float:left") +
                                            td
                                                button(@click="handleRemove(indexes,index)") 移除 
                                            td
                                                input(type="checkbox",v-model="item.is_choose")
                            div 总价: ¥{{totalprice}}
                                button(@click="chooseAll" style="position:relative;right:0") 全选
                        div(v-else="") 购物车为空

好了，到这里，一个小小的购物车就这样做好咯