一、基础知识
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时，有两种方式，对象或者数组。
<div v-bind:class="{ active: isActive }"></div>
<div v-bind:class="[activeClass, errorClass]"></div>
- v-if 根据v-if的布尔值来判断是插入、移除元素
- v-show
-v-on 绑定事件 缩写是@ - v-for 循环遍历列表
<li v-for="item in items">
{{ item.message }}
</li>
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。
<div class="addr-opration addr-set-default" v-if="!item.isDefault" @click="setDefault(item.addressId)">
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，非常巧妙的做法。
<li v-for="(item,index) in addressFilter" :class="{'check':currentIndex==index}" @click="currentIndex=index">
三、 问题总结
1、v-text和v-html区别是什么？
2、v-show和v-if区别是什么？
v-show 的元素始终会被渲染并保留在DOM中，v-show知识简单的切换元素的CSS属性display，而且v-show不支持<template>元素，也不支持v-else，v-if全部支持。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
3、loadMore时，如果只有两个列表不足三个咋办
slice时，在默认的3和长度之间选取最小值。
computed:{
addressFilter:function(){
return this.addressList.slice(0,Math.min(this.itemNum,this.addressList.length);
}
},
网友评论