這篇文章將為大家詳細(xì)講解有關(guān)Vue.js如何搭建移動端購物車界面,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
讓客戶滿意是我們工作的目標(biāo),不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶,將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴,公司提供的服務(wù)項目有:主機(jī)域名、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、自貢網(wǎng)站維護(hù)、網(wǎng)站推廣。本文介紹了如何使用Vue搭建一個移動端購物車界面,最終實現(xiàn)的功能包括:
1. 選擇要最終購買的物品
2. 選擇每件物品購買的數(shù)量
3. 實時更新所選擇物品的總價格
HTML部分
首先給出HTML部分代碼和注釋,顯示了整個界面的結(jié)構(gòu)。
<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"> <divclassdivclass="cart-item"> <divclassdivclass="cart-item-head"> <ul> <li>商品信息</li> <li>商品金額</li> <li>商品數(shù)量</li> <li>總金額</li> <li>編輯</li> </ul> </div> <ulclassulclass="cart-item-list"> <!--productList在Vue組件中的data定義,包含全部數(shù)據(jù),使用v-for進(jìn)行遍歷顯示--> <li v-for="item inproductList"> <divclassdivclass="cart-tab-1"> <divclassdivclass="cart-item-check"> <!--Vue2.0中想為HTML標(biāo)簽綁定屬性,必須使用v-bind:,綁定內(nèi)容為對象,這里為a標(biāo)簽綁定check屬性,屬性值為item中的checked值--> <!--@click是v-on:click的縮寫,為這個按鈕綁定了點擊事件,對應(yīng)Vue組件methods中定義的方法selectProduct--> <ahrefahref="javascript:void 0" class="item-check-btn"v-bind:class="{'check': item.checked}"@click="selectedProduct(item)"> <svgclasssvgclass="icon icon-ok"><usexlink:hrefusexlink:href="#icon-ok"></use></svg> </a> </div> <divclassdivclass="cart-item-pic"> <imgv-bind:srcimgv-bind:src="item.productImage" alt="煙"> </div> <divclassdivclass="cart-item-title"> <divclassdivclass="item-name">{{ item.productName }}</div> </div> <divclassdivclass="item-include"> <dl> <dt>贈送:</dt> <ddv-forddv-for="part in item.parts"v-text="part.partsName"></dd> </dl> </div> </div> <divclassdivclass="cart-tab-2"> <!--使用過濾器,|后面加Vue組件filter中定義的過濾器名稱--> <divclassdivclass="item-price">{{ item.productPrice |formatMoney}}</div> </div> <divclassdivclass="cart-tab-3"> <divclassdivclass="item-quantity"> <divclassdivclass="select-self select-self-open"> <divclassdivclass="quantity"> <!--綁定changeMoney()方法,調(diào)整商品數(shù)量--> <ahrefahref="javascript:;"@click="changeMoney(item,-1)">-</a> <inputtypeinputtype="text" :value="item.productQuantity" disabled> <ahrefahref="javascript:;"@click="changeMoney(item,1)">+</a> </div> </div> <divclassdivclass="item-stock">有貨</div> </div> </div> <divclassdivclass="cart-tab-4"> <divclassdivclass="item-price-total">{{ item.productPrice*item.productQuantity| money('元')}}</div> </div> <div class="cart-tab-5"> <divclassdivclass="cart-item-operation"> <!--delConfirm方法控制刪除時的彈框顯示狀態(tài)--> <ahrefahref="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"> <divclassdivclass="cart-foot-l"> <divclassdivclass="item-all-check"> <ahrefahref="javascript:void 0"> <spanclassspanclass="item-check-btn" :class="{'check':checkAllFlag}"@click="checkAll(true)"> <svg class="iconicon-ok"><usexlink:hrefusexlink:href="#icon-ok"></use></svg> </span> <span v-show="!checkAllFlag">全選</span> </a> </div> <divclassdivclass="item-all-del"> <ahrefahref="javascript:void 0" class="item-del-btn"@click="checkAll(false)"> <spanv-showspanv-show="checkAllFlag">取消全選</span> </a> </div> </div> <divclassdivclass="cart-foot-r"> <divclassdivclass="item-total"> <!--totalMoney是商品總金額,在Vue組件中通過方法被修改--> Item total: <span class="total-price">{{totalMoney| money('元')}}</span> </div> <divclassdivclass="next-btn-wrap"> <ahrefahref="address.html" class="btn btn--red" >結(jié)賬</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"> <!--關(guān)閉按鈕,通過改變delFlag值控制彈框狀態(tài)--> <buttonclassbuttonclass="md-close" @click="delFlag = false">關(guān)閉</button> </div> <div class="md-content"> <divclassdivclass="confirm-tips"> <pidpid="cusLanInfo">你確認(rèn)刪除此訂單信息嗎?</p> </div> <div class="btn-wrapcol-2"> <!--選擇yes則調(diào)用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進(jìn)行控制的,v-if根據(jù)表達(dá)式的真假條件渲染元素--> <div class="md-overlay"v-if="delFlag"></div> </div> </div> </body>
對應(yīng)的關(guān)鍵注釋在代碼中給出,下面結(jié)合Vue.js的代碼,對主要部分進(jìn)行解釋。
一、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的元素內(nèi)部都是這個Vue組件的作用范圍。
2. data字段:data字段定義了Vue組件中的數(shù)據(jù),可能在HTML中進(jìn)行渲染。在本應(yīng)用中,商品的價格、名稱、圖片鏈接等信息,都是使用Vue組件中data字段內(nèi)的數(shù)據(jù)進(jìn)行渲染的。
3. filter字段:filter字段是一個過濾器,在本應(yīng)用中,針對價格等需要格式化的文本,就可以使用filter進(jìn)行過濾。
4. mounted字段:mounted字段通常定義一個方法,這個方法將在頁面加載完成時自動執(zhí)行,在React等框架中都有類似的機(jī)制。
5. method字段:method字段用來定義Vue組件中需要用到的方法,這個字段的內(nèi)容往往是需要投入時間最多的部分,例如頁面中選擇商品、增加數(shù)量等邏輯,都是在這個字段中進(jìn)行編輯的。
以上就是一個vue組件的主要組成部分,下面對各個部分功能的代碼編寫進(jìn)行簡要介紹。
二、數(shù)據(jù)渲染
數(shù)據(jù)渲染部分,要渲染的數(shù)據(jù)都存放在data中。每一個商品的信息都被模擬存儲在了cart.json的文件中。我們可以實現(xiàn)數(shù)據(jù)自動加載,基本思路是:在method字段中定義一個方法,用來加載cart.json中的數(shù)據(jù),并將其存放到data字段中定義的對應(yīng)變量中。在mouted字段中,自動調(diào)用這個方法。這樣就實現(xiàn)了頁面加載完成后自動加載數(shù)據(jù)。對應(yīng)的JS代碼和注釋如下:
data: { //存放商品json數(shù)據(jù)信息 productList: [] } methods: { //cartView()方法用來加載數(shù)據(jù),并將數(shù)據(jù)存儲在這個Vue組件中的productList變量中 cartView: function() { var _this = this; //使用vue-resource模塊加載數(shù)據(jù),類似Jquery中的AJAX,返回數(shù)據(jù)存放在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() { //執(zhí)行代碼放在$nextTick中,保證頁面結(jié)構(gòu)加載完畢后再執(zhí)行函數(shù) this.$nextTick(function() { this.cartView(); //使用this調(diào)用methods中定義的cartView()方法 }) }
完成了這部分代碼,所有商品的數(shù)據(jù)就存放在了組件中變量名為productList的字段中。
在前端HTML部分的進(jìn)行調(diào)用,需要使用v-for指令。這個指令用來循環(huán)遍歷Vue中的數(shù)據(jù),代碼如下:
<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中的數(shù)據(jù),并在內(nèi)部的HTML中調(diào)用。利潤item.productImage獲取對應(yīng)圖片URL地址;item.productName獲取商品名稱等。這樣,就自動生成了一個商品信息列表。
關(guān)于“Vue.js如何搭建移動端購物車界面”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢,專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場景需求。
本文題目:Vue.js如何搭建移動端購物車界面-創(chuàng)新互聯(lián)
文章網(wǎng)址:http://muchs.cn/article32/csgesc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供定制網(wǎng)站、品牌網(wǎng)站設(shè)計、微信公眾號、微信小程序、移動網(wǎng)站建設(shè)、定制開發(fā)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容