[Vue學習筆記](六)實戰 — 簡易購物車
這次來到了比較有趣的部分,要應用之前所學的v-bind,v-for等指令來實現一個購物車的功能,一個基本的購物車通常有以下元素:
- 商品名稱
- 價格
- 數量
- 操作
舉知名的電商平台蝦皮網站的購物車,如下圖所示,我們這次的目的就是寫出一個這樣的效果。
這篇文章會教你做出如下的效果,建議在開始看之前,先想一下或直接實作看看能不能做得出來,真的做不出來再繼續往下看,這個範例也是參考Vue書本中的範例,但我撰寫code時完全沒有看書裡的程式碼,除非遇到真的想不出來的問題才會去看,這樣的練習才會讓自己進步,推薦給你~
ㄧ、Coding前準備
步驟ㄧ:創建資料夾
一般開發網站不會把所有程式都寫在一起,因此我們會將html、css、js分開撰寫,所以先創建一個資料夾,並放入index.html、main.js、style.css檔案,如下圖:
步驟二:下載所需圖案及icon
接下來我們要下載我們會用到的icon,
提供一個網站,裡面的icon是免費無版權的
因此先到裡面下載我們需要的icon,放入images資料夾中,我就下載了一個消息的icon及一個購物車。
步驟三:引用Vue.js、js及css
我在這邊是使用網址直接引入,會方便很多,記得,Vue的程式要放在body最底部或直接放在body下面,不可放在head中,因為一開始時DOM還沒被解析完成,放在head中會無法建立Vue實例。
二、開摳購物車囉!
(ㄧ)新增資料
我們可以先在main.js的data中放置我們的商品清單,因為有多個物品,所以我們要用一個叫做itemList的陣列去包住多個物件,一個商品中含有特殊的編號(id)、名稱、價格、數量、圖片位址(原諒我很懶惰直接使用unsplash的圖片)
(二)新增html架構
這邊我們先用純html+css來建立這樣一個基本購物車的架構,這邊大家可以自己去想像自己的購物車想要長什麼樣子 ,我的看起來會是這樣子
HTML的部分
CSS的部分:
目前的html結構是靜態的,可以看到裡面的文字都是自己加上去的,還未使用到Vue的功用,button也還沒有功能,現在看來,因為只有一個item,所以Html的程式量不多,當item有上百上千個的時候,程式就是好幾百行,但使用Vue我們可以輕鬆避免,只要寫好架構,一切交給data與vue。
(三)添加Vue的程式
增加v-for與加入內插表達式
首先我們先為整個html加上一層item_container,來包住所有的item_body,並在裡面加上v-for, v-for="(item, index) in itemList"
,itemList是data中包含所有物件的陣列,而item就代表裡面的每一個item,index是Vue默認給的參數,代表在此陣列的索引。
<div class=”item_container” v-for=”(item,index) in itemList” :key=”item.id” >
(要改)這邊一定要新增綁定key,key是一個能區別每個item的屬性,如果沒有新增會報錯
接著就會看到我們的網頁變為下面這樣,因為itemList有四個物件,所以我們會看到同樣的內容被渲染了四次。
接著我們就來修改item_body裡面的細節,讓網頁顯示的是data中的內容。
這時就會用到內插表示item的內容,
- 名稱:
{{item.name}}
- 價格:
{{item.price}}
- 圖片:使用v-bind綁定src,綁定為item的imgUrl
- 總價: 我們可以在內差法直接計算價格,所以可以直接寫
{{item.price * item.count}}
為了方便查看amount的效果,我有去更改data中的數量,所以現在我們的網站搖身一變,變為直接使用資料的動態網站囉~
添加按鈕功能
接下來我們來讓按鈕有功能,首先先看到count左右兩側的+-按鈕,
現在當我們點擊按鈕時,要觸發一個事件去對item的個數做加減,所以我們先在button加及減各自加上一個v-on事件
<button @click=”handleSub(item)”>-</button>{{item.count}}<button @click=”handlePlus(item)”>+</button>
當按下+這個按鈕時,則會執行methods中的handlePlus函式, — 按鈕則是handleSub,這邊我們把「item」傳進去,這個item就是我們點到哪一個商品時,會將這個商品的item傳進去,而item中都有一個count的屬性,所以我們只要讓count值++或減減就可以了,這邊要注意的是,count>1才能讓count--否則值會變成負的。
methods:{ handlePlus: function(item){ console.log(item); item.count++; }, handleSub: function(item){ console.log(item); if(item.count>1){ item.count--; } },
}
處理完加減按鈕後,還有一個刪除的按鈕功能需要完成,這邊按鈕傳入的會是index(索引)因為我們要對整個itemList做操作,而不是只對單一個item,所以要傳入我們想要刪除掉的索引內容。
<button @click=”handledelete(index)”>刪除</button>
methods中則添加,handledelete(),this是整個Vue物件,裡面包含著所有data與methods等,所以我們可以找到itemList,並使用splice這個方法將index這個位置的元素刪除。
handledelete: function(index){ this.itemList.splice(index,1);}
這麼一來我們就完成購物車所有的基本功能囉!
完成品
所有程式碼如下:
本篇github連結
我是Andy,謝謝你看完這篇文章,如果文章有幫助到你的話,希望不吝於幫我拍手 🙌🙌
透過購物車這個小案例,讓我們更了解Vue最基礎的資料顯示與方法撰寫,寫出來的時候還蠻有成就感的,也希望對你有幫助!