摘要：歡迎你們跟著閏土大叔走進(jìn)時(shí)代。其中購買數(shù)量可以增加或減少，每類商品還可以從購物車中移除。后記這大概就是一次用重構(gòu)電商項(xiàng)目中的購物車模塊的所有實(shí)現(xiàn)過程。作者閏土大叔鏈接來源掘金著作權(quán)歸作者所有。

從這篇文章開始，我準(zhǔn)備給大家分享一些關(guān)于Vue.js這門框架的技巧性系列文章，正好我們公司項(xiàng)目中也用到了Vue。所以，教是最好的學(xué)。進(jìn)階篇比較適合于二三線城市，還在小廠打拼的童鞋們。歡迎你們跟著閏土大叔走進(jìn)MVVM時(shí)代。

首先，需要聲明一點(diǎn)，本篇文章不會從基礎(chǔ)開始講起，因?yàn)閂ue官方文檔已經(jīng)講得很清楚了，我就不再贅述了。所以，之前對Vue這門框架不太熟悉的童鞋可以先去官網(wǎng)上看看基礎(chǔ)知識，比如Vue的模板語法、計(jì)算屬性、條件渲染、列表渲染、事件處理、表單輸入綁定以及Class與Style綁定等。進(jìn)階篇我會側(cè)重講點(diǎn)官網(wǎng)入門指南沒講到的、偏技巧性的東西。

那么接下來，搬好小板凳，正文從這開始～

在開始寫購物車的業(yè)務(wù)代碼前，我們需要對需求進(jìn)行分析，這樣有助于我們理清業(yè)務(wù)邏輯。首先，購物車需要展示一個(gè)已加入購物車的商品列表，包含商品的名稱、單價(jià)、購買數(shù)量和操作等信息，還需要實(shí)時(shí)顯示購買的總價(jià)。其中購買數(shù)量可以增加或減少，每類商品還可以從購物車中移除。最終實(shí)現(xiàn)的效果如下圖所示：

在明確需求之后，我們就可以開始動手敲代碼了?；A(chǔ)篇都會以直接引入Vue.js文件為例。先在index.html中引入Vue.js，然后創(chuàng)建一個(gè)根元素來掛載Vue實(shí)例，在data選項(xiàng)內(nèi)寫入我們需要的數(shù)據(jù)列表，里面包含了商品名稱、單價(jià)、購買數(shù)量。這里需要說明一下，在實(shí)際業(yè)務(wù)中，這個(gè)列表是通過Ajax從服務(wù)端動態(tài)獲取的，這里只做示例：

 1 var app = new Vue({
 2       el:"#app",
 3       data:{
 4         list:[
 5           {
 6             id:1,
 7             name:"iphone X",
 8             price:8388,
 9             count:1
10           },
11           {
12             id:2,
13             name:"apple watch3",
14             price:2888,
15             count:1
16           },
17           {
18             id:3,
19             name:"MackBook Pro",
20             price:12488,
21             count:1
22           }
23         ]
24       }
25 })

數(shù)據(jù)構(gòu)建好之后，我們便可以在index.html中展示列表了，毫無疑問的是，肯定會用到v-for指令。為了考慮到用戶體驗(yàn)，我們在這里需要做一點(diǎn)小小的優(yōu)化。因?yàn)槊總€(gè)商品都是可以從購物車刪除的，所以當(dāng)列表為空時(shí)，在頁面顯示一個(gè)“購物車為空”的提示會更加友好，我們可以通過判斷數(shù)組list的長度來實(shí)現(xiàn)該功能：

 1 

 2     
31     
購物車為空
32   

相信眼尖的同學(xué)會發(fā)現(xiàn)一個(gè)比較陌生的指令v-cloak，它究竟是干嘛的？官網(wǎng)指南里也沒提到啊...
這里抖一個(gè)小包袱，論解決Vue初始化慢導(dǎo)致頁面閃動的最佳實(shí)踐。你可能會發(fā)現(xiàn)，當(dāng)網(wǎng)速較慢、Vue.js文件還沒加載完時(shí)，在頁面上會顯示 {{ 插值 }} 的字樣，知道Vue創(chuàng)建實(shí)例、編譯模板時(shí)，DOM才會被替換，所以這個(gè)過程屏幕是有閃動的。于是，v-cloak指令應(yīng)運(yùn)而生，你只需要在根元素上添加上這個(gè)指令，然后在CSS中添加上一句：

1 [v-cloak]{
2       display:none;
3 }

就可以完美的解決這個(gè)問題了。但需要注意的是，v-cloak對于簡單的項(xiàng)目很實(shí)用，但是在具有webpack工程化的項(xiàng)目里，項(xiàng)目的HTML結(jié)構(gòu)只有一個(gè)空的div元素，剩余的內(nèi)容都是由路由去掛載不同組件完成的，所以不再需要v-cloak。
讓我們接著說回購物車的事情?？們r(jià)totalPrice是依賴于商品列表而動態(tài)變化的，所以我們要考慮用計(jì)算屬性來實(shí)現(xiàn)，順便將結(jié)果轉(zhuǎn)化為帶有“千位分隔符”的數(shù)字。

 1 computed:{
 2       totalPrice: function(){
 3             var total = 0;
 4             for(var i=0;i
這段代碼的難點(diǎn)在于千位分隔符的轉(zhuǎn)換（每隔三位數(shù)加進(jìn)一個(gè)逗號），各位童鞋可以查閱正則匹配的相關(guān)內(nèi)容后嘗試了解replace()的正則含義。
最后就剩下商品列表的渲染和相關(guān)的幾個(gè)操作了。先是用v-for指令把數(shù)組list循環(huán)出來。商品序號、名稱、單價(jià)、數(shù)量都是直接使用插值來完成的，在第4列的兩個(gè)按鈕用于增減購買數(shù)量，分別綁定了兩個(gè)方法handleReduce和handleAdd，參數(shù)都是當(dāng)前商品在數(shù)組list 中的索引。button中使用了v-bind和v-on兩個(gè)指令（這里用的都是語法糖寫法）。

Tips: 什么是語法糖
語法糖就是指在不影響功能的情況下，添加了某種方法實(shí)現(xiàn)同樣的效果。
讓我們接著說回button綁定的動態(tài)屬性disabled，每件商品購買數(shù)量最少是1件，所以當(dāng)count為1時(shí)，不允許再繼續(xù)減少，所以這里給動態(tài)綁定了disabled特性來禁用按鈕。
最后就是在methods選項(xiàng)內(nèi)添加3個(gè)方法：

 1 methods:{
 2         handleReduce: function(index){
 3           if(this.list[index].count === 1) return;
 4           this.list[index].count--;
 5         },
 6         handleAdd: function(index){
 7           this.list[index].count++;
 8         },
 9         handleRemove: function(index){
10           this.list.splice(index, 1);
11         }
12 }

這3個(gè)方法都是直接對數(shù)組list的操作，沒有太復(fù)雜的邏輯。需要說明的是，雖然在button上已經(jīng)綁定了disabled特性，但是在handleReduce方法內(nèi)又判斷了一遍。這是因?yàn)樵谀承r(shí)候，可能不一定會用button標(biāo)簽，也可能是div、span等，給它們增加disabled是沒有任何作用的，所以為了安全起見，在業(yè)務(wù)邏輯中再判斷一次，避免因修改HTML模板后出現(xiàn)bug。
后記
這大概就是一次用Vue重構(gòu)電商項(xiàng)目中的購物車模塊的所有實(shí)現(xiàn)過程。這可能是你們學(xué)習(xí)Vue.js框架的一小步，卻是我當(dāng)Vue講師夢想邁出的一大步。
作者：閏土大叔 
鏈接：https://juejin.im/post/5a52e6... 
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。
想了解我的更多動態(tài)？歡迎關(guān)注我的微信公眾號：閏土大叔 ，或者添加我的個(gè)人微信號：wxd91traveler。