摘要:歡迎你們跟著閏土大叔走進(jìn)時(shí)代。其中購(gòu)買數(shù)量可以增加或減少,每類商品還可以從購(gòu)物車中移除。后記這大概就是一次用重構(gòu)電商項(xiàng)目中的購(gòu)物車模塊的所有實(shí)現(xiàn)過(guò)程。作者閏土大叔鏈接來(lái)源掘金著作權(quán)歸作者所有。
前言
從這篇文章開(kāi)始,我準(zhǔn)備給大家分享一些關(guān)于Vue.js這門框架的技巧性系列文章,正好我們公司項(xiàng)目中也用到了Vue。所以,教是最好的學(xué)。進(jìn)階篇比較適合于二三線城市,還在小廠打拼的童鞋們。歡迎你們跟著閏土大叔走進(jìn)MVVM時(shí)代。
首先,需要聲明一點(diǎn),本篇文章不會(huì)從基礎(chǔ)開(kāi)始講起,因?yàn)閂ue官方文檔已經(jīng)講得很清楚了,我就不再贅述了。所以,之前對(duì)Vue這門框架不太熟悉的童鞋可以先去官網(wǎng)上看看基礎(chǔ)知識(shí),比如Vue的模板語(yǔ)法、計(jì)算屬性、條件渲染、列表渲染、事件處理、表單輸入綁定以及Class與Style綁定等。進(jìn)階篇我會(huì)側(cè)重講點(diǎn)官網(wǎng)入門指南沒(méi)講到的、偏技巧性的東西。
那么接下來(lái),搬好小板凳,正文從這開(kāi)始~
在開(kāi)始寫購(gòu)物車的業(yè)務(wù)代碼前,我們需要對(duì)需求進(jìn)行分析,這樣有助于我們理清業(yè)務(wù)邏輯。首先,購(gòu)物車需要展示一個(gè)已加入購(gòu)物車的商品列表,包含商品的名稱、單價(jià)、購(gòu)買數(shù)量和操作等信息,還需要實(shí)時(shí)顯示購(gòu)買的總價(jià)。其中購(gòu)買數(shù)量可以增加或減少,每類商品還可以從購(gòu)物車中移除。最終實(shí)現(xiàn)的效果如下圖所示:
在明確需求之后,我們就可以開(kāi)始動(dòng)手敲代碼了。基礎(chǔ)篇都會(huì)以直接引入Vue.js文件為例。先在index.html中引入Vue.js,然后創(chuàng)建一個(gè)根元素來(lái)掛載Vue實(shí)例,在data選項(xiàng)內(nèi)寫入我們需要的數(shù)據(jù)列表,里面包含了商品名稱、單價(jià)、購(gòu)買數(shù)量。這里需要說(shuō)明一下,在實(shí)際業(yè)務(wù)中,這個(gè)列表是通過(guò)Ajax從服務(wù)端動(dòng)態(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中展示列表了,毫無(wú)疑問(wèn)的是,肯定會(huì)用到v-for指令。為了考慮到用戶體驗(yàn),我們?cè)谶@里需要做一點(diǎn)小小的優(yōu)化。因?yàn)槊總€(gè)商品都是可以從購(gòu)物車刪除的,所以當(dāng)列表為空時(shí),在頁(yè)面顯示一個(gè)“購(gòu)物車為空”的提示會(huì)更加友好,我們可以通過(guò)判斷數(shù)組list的長(zhǎng)度來(lái)實(shí)現(xiàn)該功能:
1
2
31 購(gòu)物車為空
32
Tips: 解決Vue初始化慢導(dǎo)致頁(yè)面閃動(dòng)的最佳實(shí)踐
相信眼尖的同學(xué)會(huì)發(fā)現(xiàn)一個(gè)比較陌生的指令v-cloak,它究竟是干嘛的?官網(wǎng)指南里也沒(méi)提到啊...
這里抖一個(gè)小包袱,論解決Vue初始化慢導(dǎo)致頁(yè)面閃動(dòng)的最佳實(shí)踐。你可能會(huì)發(fā)現(xiàn),當(dāng)網(wǎng)速較慢、Vue.js文件還沒(méi)加載完時(shí),在頁(yè)面上會(huì)顯示 {{ 插值 }} 的字樣,知道Vue創(chuàng)建實(shí)例、編譯模板時(shí),DOM才會(huì)被替換,所以這個(gè)過(guò)程屏幕是有閃動(dòng)的。于是,v-cloak指令應(yīng)運(yùn)而生,你只需要在根元素上添加上這個(gè)指令,然后在CSS中添加上一句:
1 [v-cloak]{
2 display:none;
3 }
就可以完美的解決這個(gè)問(wèn)題了。但需要注意的是,v-cloak對(duì)于簡(jiǎn)單的項(xiàng)目很實(shí)用,但是在具有webpack工程化的項(xiàng)目里,項(xiàng)目的HTML結(jié)構(gòu)只有一個(gè)空的div元素,剩余的內(nèi)容都是由路由去掛載不同組件完成的,所以不再需要v-cloak。
讓我們接著說(shuō)回購(gòu)物車的事情。總價(jià)totalPrice是依賴于商品列表而動(dòng)態(tài)變化的,所以我們要考慮用計(jì)算屬性來(lái)實(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è)逗號(hào)),各位童鞋可以查閱正則匹配的相關(guān)內(nèi)容后嘗試了解replace()的正則含義。
最后就剩下商品列表的渲染和相關(guān)的幾個(gè)操作了。先是用v-for指令把數(shù)組list循環(huán)出來(lái)。商品序號(hào)、名稱、單價(jià)、數(shù)量都是直接使用插值來(lái)完成的,在第4列的兩個(gè)按鈕
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/90755.html
摘要:最佳實(shí)踐良好的編碼規(guī)范單元測(cè)試持續(xù)集成文檔,從一開(kāi)始就形成良好的編碼習(xí)慣。真實(shí)的電商業(yè)務(wù)所有的業(yè)務(wù)需求來(lái)自真實(shí)的客戶,并且線上良好運(yùn)營(yíng)中。 重要通知: Laravel + 小程序的開(kāi)源電商版本源碼已經(jīng)在 github 上拉,歡迎提交 issue 和 star :) 開(kāi)源電商 Server 端: Laravel API源碼 開(kāi)源電商 client 端:小程序源碼 iBrand 簡(jiǎn)介...
摘要:建議閱讀博客前端工程基礎(chǔ)篇鏈接書籍深入淺出鏈接服務(wù)器端的是在年正式提出并開(kāi)源的,傳統(tǒng)的都運(yùn)行在瀏覽器這樣的宿主環(huán)境中,而基于谷歌瀏覽器的引擎構(gòu)建的運(yùn)行環(huán)境,使用了一個(gè)事件驅(qū)動(dòng)非阻塞式的模型,將帶入服務(wù)器領(lǐng)域。 1.網(wǎng)頁(yè)布局HTML+CSS 技能要求 學(xué)會(huì)用工具(如PS)切圖,將設(shè)計(jì)稿還原成網(wǎng)頁(yè)布局 掌握常規(guī)布局方法:文檔流布局,flex布局,grid布局,居中,浮動(dòng)…… HTML5...
摘要:建議閱讀博客前端工程基礎(chǔ)篇鏈接書籍深入淺出鏈接服務(wù)器端的是在年正式提出并開(kāi)源的,傳統(tǒng)的都運(yùn)行在瀏覽器這樣的宿主環(huán)境中,而基于谷歌瀏覽器的引擎構(gòu)建的運(yùn)行環(huán)境,使用了一個(gè)事件驅(qū)動(dòng)非阻塞式的模型,將帶入服務(wù)器領(lǐng)域。 1.網(wǎng)頁(yè)布局HTML+CSS 技能要求 學(xué)會(huì)用工具(如PS)切圖,將設(shè)計(jì)稿還原成網(wǎng)頁(yè)布局 掌握常規(guī)布局方法:文檔流布局,flex布局,grid布局,居中,浮動(dòng)…… HTML5...
摘要:建議閱讀博客前端工程基礎(chǔ)篇鏈接書籍深入淺出鏈接服務(wù)器端的是在年正式提出并開(kāi)源的,傳統(tǒng)的都運(yùn)行在瀏覽器這樣的宿主環(huán)境中,而基于谷歌瀏覽器的引擎構(gòu)建的運(yùn)行環(huán)境,使用了一個(gè)事件驅(qū)動(dòng)非阻塞式的模型,將帶入服務(wù)器領(lǐng)域。 1.網(wǎng)頁(yè)布局HTML+CSS 技能要求 學(xué)會(huì)用工具(如PS)切圖,將設(shè)計(jì)稿還原成網(wǎng)頁(yè)布局 掌握常規(guī)布局方法:文檔流布局,flex布局,grid布局,居中,浮動(dòng)…… HTML5...
閱讀 2644·2023-04-26 02:17
閱讀 1617·2021-11-24 09:39
閱讀 1078·2021-11-18 13:13
閱讀 2642·2021-09-02 15:11
閱讀 2776·2019-08-30 15:48
閱讀 3410·2019-08-30 14:00
閱讀 2440·2019-08-29 13:43
閱讀 664·2019-08-29 13:07
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要