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="") 购物车为空
好了，到这里，一个小小的购物车就这样做好咯