一、准备阶段
1、预备知识
2、过滤器filter:对接口返回的字段进行一个业务转换
3、引入已创建好的cart.html、adress.html、css文件、img文件、data文件(.json文件相当于数据库)
二、购物车实现
1、创建一个vue的实例
(1)创建package.json
(2)安装Vue(--save:把软件安装到开发的这个仓库中去),将vue.min.js复制放在js/lib文件夹下
(3)安装vue-resource,将vue-resource.min.js复制放在js/lib文件夹下
在项目中隐藏了文件夹node_modules,但是在电脑的文件里有显示
(4)创建cart.js文件(Vue实例)
2、通过v-for指令渲染产品数据
(1)使用resource插件调用json数据
this.$http.get("data/cartData.json",{"id":123}).then(function(res){}
(2)v-for渲染产品数据
<ul class="cart-item-list">
<li v-for="(item,index)in productList">
<img v-bind:src="item.productImage" alt="烟">
<div class="item-name">{{item.productName}}</div>
<dd v-for="part in item.parts" v-text="part.partsName"></dd>(v-for里面可以套v-for)
<div class="item-price">{{item.productPrice}}</div>
<input type="text" value="0" disabled v-model="item.productQuantity">
<div class="item-price-total">{{item.productPrice*item.productQuantity}}</div>
3、vue过滤器的使用
(1)ES6语法:箭头函数:res=>{}
res=>{}它的作用域指向外层,
内层的this和外层的this达到同一个级别(=>相当于function;res相当于参数;{函数体})
cartView:function(){
let _this=this;
this.$http.get("data/cartData.json",{"id":123}).then(res=>{
this.productList=res.body.result.list;
this.totalMoney=res.body.result.totalMoney;
});
}
(2)filters对数据金额进行转换
a. 对商品的金额进行格式化:
属性值 | 过滤器名:<div class="item-price">{{item.productPrice | formatMoney}}</div>
filters:{ //(局部)过滤器
formatMoney:function(value){
return "¥"+value.toFixed(2); //返回货币符号和两位小数
}
}
b. 对总金额进行格式化:<div class="item-price-total">{{item.productPrice*item.productQuantity | formatMoney}}</div>
c. 全局过滤器(写在vue实例之外)
Vue.filter("money",function(value,type){
return "¥" +value.toFixed(2)+type;
})
<div class="item-price-total">{{item.productPrice*item.productQuantity | money('元')}}</div>
4、单件商品金额计算和单选全选功能
(1)单件商品金额计算:
<a href="javascript:void 0" v-on:click="changeMoney(item,-1)">-</a>
<a href="javascript:void 0" @click="changeMoney(item,+1)">+</a>
changeMoney:function(product,way){
if(way>0){
product.productQuantity++;
}else{
product.productQuantity--;
if(product.productQuantity<1){
product.productQuantity=1;
}
}
}
(2)单击选择商品
a. 当在<a>标签中的class中添加check时,选择商品
b. 在<a>标签中绑定class,class是个object,object对象有一个键和值
<div class="cart-tab-1">
<div class="cart-item-check">
<a href="javascript:void 0" class="item-check-btn" v-bind:class="{'check':item.checked}" @click="selectedProduct(item)">
c. 在cart.js中
selectedProduct:function(item){
if(typeof item.checked=='undefined'){ //判断item里的checked是否存在
//Vue.set(item,"checked",true); //Vue全局注册,在item里面添加一个checked属性
this.$set(item,"checked",true); //局部注册
}else{
item.checked=!item.checked;
}
}
(3)全选与取消全选
在cart.html:
<span class="item-check-btn" :class="{'check':checkAll}" @click="selectedAll(true)">
<a href="javascript:void 0" class="item-del-btn" @click="selectedAll(false)">
在cart.js中:
selectedAll:function(flag){
this.checkAll=flag;
var _this=this;
this.productList.forEach(function(item,index){
if(typeof item.checked=='undefined'){
_this.$set(item,"checked",true);
}else{
item.checked=_this.checkAll;
}
});
}
5、商品总金额计算、删除功能
(1)商品总金额计算
a. <div class="item-total">
Item total: <span class="total-price">{{totalMoney | formatMoney}}</span>
</div>
b. calTotalPrice:function(){
var _this=this;
_this.totalMoney=0;//遍历之前总金额清零
this.productList.forEach(function(item,index){
if(item.checked){
_this.totalMoney+=item.productPrice*item.productQuantity;
}
})
}
c. 在changeMoney、selectedProduct、selectedAll方法里调用calTotalPrice方法
(2)删除功能
在cart.html中:
<div class="md-modal modal-msg md-modal-transition" id="showModal" v-bind:class="{'md-show':delFlag}"> //双向绑定,控制提示框的显示与隐藏
<a href="javascript:void 0" class="item-edit-btn" @click="delConfirm(item)">
<button class="md-close" @click="delFlag=false">关闭</button>
<div class="md-overlay" v-if="delFlag"></div> //遮罩层,点击删除时一起弹出来的阴影层
<button class="btn btn--m" id="btnModalConfirm" @click="delProduct">Yes</button>
<button class="btn btn--m btn--red" id="btnModalCancel" @click="delFlag=false">No</button>
在cart.js中:
delConfirm:function(item){
this.delFlag=true;
this.curProduct=item;
},
delProduct:function(){
var index=this.productList.indexOf(this.curProduct);//获取当前商品的索引
this.productList.splice(index,1);
this.delFlag=false;
}
三、地址列表案例
1、通过v-for指令渲染地址数据以及数组过滤
(1)构建Vue实例
new Vue({
el:'.container',
data:{
addressList:[]
},
mounted:function(){//钩子函数
this.$nextTick(function(){
this.getAddressList();
}) ;
},
filters:{
},
methods:{
getAddressList:function(){ /*渲染地址*/
}
})
}
}
});
(2)使用resource插件调用json数据
this.$http.get("data/address.json").then(response=>{}
(3)使用v-for渲染出地址
<li v-for="(item,index) in addressList">
<dt>{{item.userName}}</dt>
<dd class="address">{{item.streetName}}</dd>
<dd class="tel">{{item.tel}}</dd>
<div class="addr-opration addr-set-default" v-if="!item.isDefault">
<a href="javascript:;" class="addr-set-default-btn" ><i>设为默认</i></a>
</div>
<div class="addr-opration addr-default" v-if="item.isDefault">默认地址</div>
(4)默认只显示3张地址卡片,实现对数据的过滤
<li v-for="(item,index) in filterAddress">
computed:{
filterAddress:function(){
return this.addressList.slice(0,this.limitNum);
}
}
(5)点击more,显示所有地址卡片
<a class="addr-more-btn up-down-btn" href="javascript:" @click="limitNum=addressList.length">
在指令里面不要使用this
2、卡片选择、设置默认等功能实现
(1) 卡片选择(每一张卡片都对应着一个索引)
<li v-for="(item,index) in filterAddress" v-bind:class="{'check':index==currentIndex}" @click="currentIndex=index">
(2)设为默认
当新的地址设为默认后,原默认地址取消
<a href="javascript:;" class="addr-set-default-btn" @click="setDefault(item.addressId)"><i>设为默认</i></a>
setDefault:function(addressId){ /*选择默认地址*/
this.addressList.forEach(function(address,index){
if(address.addressId==addressId){
address.isDefault=true;
}else{
address.isDefault=false;
}
})
}
(3) 配送方式选择
<li v-bind:class="{'check':shippingMethod==1}" @click="shippingMethod=1">
<div class="name">标准配送</div>
<li v-bind:class="{'check':shippingMethod==2}" @click="shippingMethod=2">
<div class="name">高级配送</div>
3、删除地址功能
与购物车中删除商品功能相似
4、修改地址功能
在address.html中
<div class="md-modal modal-msg md-modal-transition" id="showModalw" v-bind:class="{'md-show':revFlag}">
<a href="javascript:;" class="addr-edit-btn" @click="revConfirm(item)">
<button class="md-close" @click="revFlag=false">关闭</button>
在address.js中
revConfirm:function(item){
this.revFlag=true;
this.currentIndex=item;
}