[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最基礎的資料顯示與方法撰寫，寫出來的時候還蠻有成就感的，也希望對你有幫助！
