購物車案例功能：
- 創(chuàng)建一個Vue實例
- v-for渲染產(chǎn)品數(shù)據(jù)
- Filter對金額和圖片進(jìn)行格式化
- v-on實現(xiàn)產(chǎn)品金額的動態(tài)計算
功能比較簡單爬骤，但是涉及到平時項目中常見的業(yè)務(wù)邏輯。可謂麻雀雖小剃幌，五臟俱全。
數(shù)據(jù)渲染
- vue-resource插件來獲取后端數(shù)據(jù)（推薦使用vue-axios葵硕，官網(wǎng)說vue-resource已不再維護(hù)）竞穷，這里用的是本地的json數(shù)據(jù)來模擬。引入vue.js 暖途，vue-resource.js卑惜， 自己的js.
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="js/lib/vue-resource.js"></script>
<script src="js/cart1.js"></script>
cart.js中創(chuàng)建vue實例，data中聲明個productList:[]來渲染數(shù)據(jù)驻售，methods中聲明函數(shù)cartView()來獲取數(shù)據(jù),mounted函數(shù)來執(zhí)行這個cartView（mounted函數(shù)是el中的模板html,dom渲染完成再執(zhí)行）
new Vue({
el: '#app',
data: {
productList: []
},
mounted () {
this.$nextTick(function () {
this.cartView()
})
},
methods:{
cartView() {
this.$http.get('../data/cartData.json').then(res => {
this.productList = res.data.result.list;
})
}
}
})
注意我使用都是es6的寫法露久，這里使用箭頭函數(shù)，就不需要再獲取父級作用域的this了欺栗。省略了var_ this = this
官網(wǎng)說毫痕，mounted函數(shù)應(yīng)該這樣使用保險一些：
mounted: function () {
this.$nextTick(function () {
// 代碼保證 this.$el 在 document 中
})
}
直接打開html是一定會出問題的，因為這里使用ajax來模擬獲取后臺數(shù)據(jù)產(chǎn)生了跨域迟几，我使用了live-server插件來熱啟動消请，在本地的服務(wù)器上查看。
過濾器
使用過濾器來美化一下價格的樣式类腮，加上￥臊泰，并保留小數(shù)點2位。
filters: {
money(value, type) {
return '￥' + value.toFixed(2) + type
}
},
<div class="item-price">{{item.productPrice | money('元')}}</div>
全局注冊過濾器可以在其它頁面引用蚜枢，局部過濾器只能在這個實例中使用
Vue.filter('money', function (value, type) {
return '$' + value.toFixed(2) + type
})
業(yè)務(wù)邏輯
- 商品數(shù)量的加減功能
changeNumber(item, way) {
if( way < 0) {
item.productQuantity --;
if(item.productQuantity < 1) {
item.productQuantity = 1
}
}else{
item.productQuantity ++;
}
},
<a @click="changeNumber(item,-1)">-</a>
<input type="text" value="0" disabled v-model="item.productQuantity">
<a @click="changeNumber(item, 1)">+</a>
changeNumber接受2個參數(shù)缸逃，第一個表示商品，第二個表示加或減
- 單選按鈕的確認(rèn)和取消
因為給的json數(shù)據(jù)里沒有商品的選中和取消屬性厂抽，我們就通過Vue.set來給商品注冊這個屬性需频，綁定class，如果為true修肠，check樣式就顯示贺辰。并通過綁定點擊事件來取反，來達(dá)到選擇和取消。
selectProduct(item) {
if (typeof item.checked == 'undefined') {
this.$set(item, 'checked', true)
}else{
item.checked = !item.checked
}
}
<a class="item-check-btn" :class="{'check': item.checked}" @click="selectProduct(item)">
- 全選按鈕的確認(rèn)和取消
這個功能我們就可以在data中注冊個屬性來表示饲化。聲明屬性checkAll:false 莽鸭，并綁定到class上，表示默認(rèn)的是沒有選中吃靠。綁定點擊事件硫眨，傳入?yún)?shù)true表示全選，此時checkAllFlag中this.checkAll = true巢块，全選生效礁阁。同理，傳入false族奢，this.checkAll = false姥闭，取消全選
<span class="item-check-btn" :class="{'check':checkAll}" @click="checkAllFlag(true)">
<a class="item-del-btn" :class="{'check':checkAll}" @click="checkAllFlag(false)" >
checkAllFlag(flag) {
this.checkAll = flag;
}
那么，怎么通過全選達(dá)到商品也被選中的效果呢越走？
checkAllFlag(flag) {
this.checkAll = flag;
this.productList.forEach((item, index) => {
if(typeof item.checked == 'undefined') {
this.$set(item, 'checked', flag)
}else{
item.checked = flag
}
})
}
全選的時候棚品，傳入?yún)?shù)true，checkAll屬性為true廊敌，同時铜跑，遍歷商品的列表，給商品注冊checked：true骡澈。取消全選同理锅纺。
- 總金額的計算
定義一個方法來計算總計額返回給data里的totalMoney.注意的是商品被選中的時，即item.checked為true時肋殴，totalMoney才計算囤锉。
calcTotalMoney() {
this.totalMoney = 0;
this.productList.forEach((item, index) => {
if(item.checked) {
this.totalMoney += item.productPrice*item.productQuantity
}
})
}
- 刪除訂單功能
data中聲明delFlag默認(rèn)為false，小垃圾桶圖標(biāo)綁定事件疼电，刪除界面v-bind:class=“{‘md-show’: delFlag}” 嚼锄，md-show樣式在delFlag=true的時候應(yīng)用了。關(guān)閉按鈕綁定點擊事件delFlag=false蔽豺，這里注意的是有一個遮罩層区丑，用v-if=“delFlag”來控制顯示和隱藏。
小垃圾桶綁定事件delConfirm(item)修陡，讓curProduct變量來保存此時的商品item沧侥。
delConfirm(item) {
this.delFlag = true;
this.curProduct = item //聲明curProduct屬性來保存此時的item
},
然后在刪除功能中，獲取這個商品item的index魄鸦，再用splice方法刪除宴杀。
delProduct() {
var index = this.productList.indexOf(this.curProduct)
this.productList.splice(index, 1);
this.delFlag = false
}
好了，到這里拾因，購物車的一些基本功能基本上都實現(xiàn)了旺罢。
地址選配功能
跟購物車功能類似旷余，或許數(shù)據(jù)，掛在到mounted函數(shù)上扁达，這里不同的是用計算屬性computed獲取數(shù)組的3項正卧，然后在dom中渲染，
computed: {
filterAddress: function () {
return this.addressList.slice(0, this.limitNum) //獲取addressList的前三個
}
},
<li v-for="(item,index) in filterAddress" ></li>
列表選項問題跪解，配送方式的點擊選中如下實現(xiàn)：
<li :class="{'check':shippingMethod == 1}" @click="shippingMethod = 1">
<div class="name">標(biāo)準(zhǔn)配送</div>
<div class="price">Free</div>
</li>
<li :class="{'check':shippingMethod == 2}" @click="shippingMethod = 2">
<div class="name">高級配送</div>
<div class="price">180</div>
</li>
地址列表如下實現(xiàn)：
<li v-for="(item,index) in filterAddress" :class="{'check': index == currentIndex}" @click="currentIndex = index">
點擊此地址炉旷，將索引index賦值給currentIndex,那么cunrrentIndex==index成立時，check樣式實現(xiàn)叉讥。
這里是很好的2種不同情況下的實現(xiàn)方式窘行，在以后的項目中可能會經(jīng)常遇到。
