Vue.js搭建移動端購物車介面－基本結構和資料渲染
阿新 • • 發佈：2019-01-11
本文介紹瞭如何使用Vue搭建一個移動端購物車介面，最終實現的功能包括：
1. 選擇要最終購買的物品
2. 選擇每件物品購買的數量
3. 實時更新所選擇物品的總價格
HTML部分
首先給出HTML部分程式碼和註釋，顯示了整個介面的結構。
<body> <div class="checkout"> <div id="app"> <div class="container"> <div class="cart"> <div class="checkout-title"> <span>購物車</span> </div> <!-- table --> <div class="item-list-wrap"> <divclass="cart-item"> <divclass="cart-item-head"> <ul> <li>商品資訊</li> <li>商品金額</li> <li>商品數量</li> <li>總金額</li> <li>編輯</li> </ul> </div> <ulclass="cart-item-list"> <!--productList在Vue元件中的data定義，包含全部資料，使用v-for進行遍歷顯示--> <li v-for="item inproductList"> <divclass="cart-tab-1"> <divclass="cart-item-check"> <!--Vue2.0中想為HTML標籤繫結屬性，必須使用v-bind:，繫結內容為物件，這裡為a標籤繫結check屬性，屬性值為item中的checked值--> <[email protected]是v-on:click的縮寫，為這個按鈕綁定了點選事件，對應Vue元件methods中定義的方法selectProduct--> <ahref="javascript:void 0" class="item-check-btn"v-bind:class="{'check': item.checked}"@click="selectedProduct(item)"> <svgclass="icon icon-ok"><usexlink:href="#icon-ok"></use></svg> </a> </div> <divclass="cart-item-pic"> <imgv-bind:src="item.productImage" alt="煙"> </div> <divclass="cart-item-title"> <divclass="item-name">{{ item.productName }}</div> </div> <divclass="item-include"> <dl> <dt>贈送:</dt> <ddv-for="part in item.parts"v-text="part.partsName"></dd> </dl> </div> </div> <divclass="cart-tab-2"> <!--使用過濾器，|後面加Vue元件filter中定義的過濾器名稱--> <divclass="item-price">{{ item.productPrice |formatMoney}}</div> </div> <divclass="cart-tab-3"> <divclass="item-quantity"> <divclass="select-self select-self-open"> <divclass="quantity"> <!--繫結changeMoney()方法，調整商品數量--> <ahref="javascript:;"@click="changeMoney(item,-1)">-</a> <inputtype="text" :value="item.productQuantity" disabled> <ahref="javascript:;"@click="changeMoney(item,1)">+</a> </div> </div> <divclass="item-stock">有貨</div> </div> </div> <divclass="cart-tab-4"> <divclass="item-price-total">{{ item.productPrice*item.productQuantity| money('元')}}</div> </div> <div class="cart-tab-5"> <divclass="cart-item-operation"> <!--delConfirm方法控制刪除時的彈框顯示狀態--> <ahref="javascript:void 0" class="item-edit-btn"@click="delConfirm(item)"> <svg class="iconicon-del"><use xlink:href="#icon-del"></use></svg> </a> </div> </div> </li> </ul> </div> </div> <!-- footer --> <div class="cart-foot-wrap"> <divclass="cart-foot-l"> <divclass="item-all-check"> <ahref="javascript:void 0"> <spanclass="item-check-btn" :class="{'check':checkAllFlag}"@click="checkAll(true)"> <svg class="iconicon-ok"><usexlink:href="#icon-ok"></use></svg> </span> <span v-show="!checkAllFlag">全選</span> </a> </div> <divclass="item-all-del"> <ahref="javascript:void 0" class="item-del-btn"@click="checkAll(false)"> <spanv-show="checkAllFlag">取消全選</span> </a> </div> </div> <divclass="cart-foot-r"> <divclass="item-total"> <!--totalMoney是商品總金額，在Vue元件中通過方法被修改--> Item total: <span class="total-price">{{totalMoney| money('元')}}</span> </div> <divclass="next-btn-wrap"> <ahref="address.html" class="btn btn--red" style="width:200px">結賬</a> </div> </div> </div> </div> </div> <!--繫結一個md-show類，通過delFlag變數控制這個類，這個類可以讓彈框顯示或隱藏--> <div class="md-modal modal-msg md-modal-transition"id="showModal" v-bind:class="{'md-show':delFlag}"> <div class="md-modal-inner"> <div class="md-top"> <!--關閉按鈕，通過改變delFlag值控制彈框狀態--> <buttonclass="md-close" @click="delFlag = false">關閉</button> </div> <div class="md-content"> <divclass="confirm-tips"> <pid="cusLanInfo">你確認刪除此訂單資訊嗎?</p> </div> <div class="btn-wrapcol-2"> <!--選擇yes則呼叫delProduct刪除元素--> <button class="btnbtn--m" id="btnModalConfirm"@click="delProduct">Yes</button> <button class="btnbtn--m btn--red" id="btnModalCancel"@click="delFlag=false">No</button> </div> </div> </div> </div> <!--遮罩層，整個都是通過delFlag進行控制的，v-if根據表示式的真假條件渲染元素--> <div class="md-overlay"v-if="delFlag"></div> </div> </div> </body>
對應的關鍵註釋在程式碼中給出，下面結合Vue.js的程式碼，對主要部分進行解釋。
一、Vue元件基本格式
一個Vue元件的基本程式碼如下：
new Vue({
el:'#app',
data: {},
filters: {},
mounted: function() {},
methods: {}
});在JS程式碼中，使用new Vue即可宣告一個Vue元件。Vue元件主要包括以下幾個欄位。
1. el欄位：el欄位用來定義該元件在HTML中的哪個位置生效，需要傳入HTML中某個元素的id值。這裡傳入了#app，表示HTML中id為app的元素內部都是這個Vue元件的作用範圍。
2. data欄位：data欄位定義了Vue元件中的資料，可能在HTML中進行渲染。在本應用中，商品的價格、名稱、圖片連結等資訊，都是使用Vue元件中data欄位內的資料進行渲染的。
3. filter欄位：filter欄位是一個過濾器，在本應用中，針對價格等需要格式化的文字，就可以使用filter進行過濾。
4. mounted欄位：mounted欄位通常定義一個方法，這個方法將在頁面載入完成時自動執行，在React等框架中都有類似的機制。
5. method欄位：method欄位用來定義Vue元件中需要用到的方法，這個欄位的內容往往是需要投入時間最多的部分，例如頁面中選擇商品、增加數量等邏輯，都是在這個欄位中進行編輯的。
以上就是一個vue元件的主要組成部分，下面對各個部分功能的程式碼編寫進行簡要介紹。
二、資料渲染
資料渲染部分，要渲染的資料都存放在data中。每一個商品的資訊都被模擬儲存在了cart.json的檔案中。我們可以實現資料自動載入，基本思路是：在method欄位中定義一個方法，用來載入cart.json中的資料，並將其存放到data欄位中定義的對應變數中。在mouted欄位中，自動呼叫這個方法。這樣就實現了頁面載入完成後自動載入資料。對應的JS程式碼和註釋如下：
data: {
//存放商品json資料資訊
productList: []
}
methods: {
//cartView()方法用來載入資料，並將資料儲存在這個Vue元件中的productList變數中
cartView: function() {
var _this = this;
//使用vue-resource模組載入資料，類似Jquery中的AJAX，返回資料存放在res.body中
this.$http.get("data/cartData.json", {"id":123}).then(function(res) {
_this.productList =res.body.result.list;
// _this.totalMoney = res.body.result.totalMoney;
});
}
}
mounted: function() {
//執行程式碼放在$nextTick中，保證頁面結構載入完畢後再執行函式
this.$nextTick(function() {
this.cartView(); //使用this呼叫methods中定義的cartView()方法
})
}完成了這部分程式碼，所有商品的資料就存放在了元件中變數名為productList的欄位中。
在前端HTML部分的進行呼叫，需要使用v-for指令。這個指令用來迴圈遍歷Vue中的資料，程式碼如下：
<ul class="cart-item-list">
<li v-for="item in productList">
<div class="cart-tab-1">
<div class="cart-item-check">
</div>
<div class="cart-item-pic">
<img v-bind:src="item.productImage" alt="煙">
</div>
<div class="cart-item-title">
<div class="item-name">{{ item.productName}}</div>
</div>
<div class="item-include">
<dl>
<dt>贈送:</dt>
<dd v-for="part in item.parts"v-text="part.partsName"></dd>
</dl>
</div>
</div>
</ul>通過v-for指令，遍歷了變數productList中的資料，並在內部的HTML中呼叫。利潤item.productImage獲取對應圖片URL地址；item.productName獲取商品名稱等。這樣，就自動生成了一個商品資訊列表。
下一部分將介紹邏輯程式碼的編寫