對(duì)應(yīng)的關(guān)鍵注釋在代碼中給出，下面結(jié)合Vue.js的代碼，對(duì)主要部分進(jìn)行解釋。 

一、Vue組件基本格式

一個(gè)Vue組件的基本代碼如下：

new Vue({ 
 el:'#app', 
 data: {}, 
 filters: {}, 
 mounted: function() {}, 
 methods: {} 
});

在JS代碼中，使用new Vue即可聲明一個(gè)Vue組件。Vue組件主要包括以下幾個(gè)字段。
1.  el字段：el字段用來定義該組件在HTML中的哪個(gè)位置生效，需要傳入HTML中某個(gè)元素的id值。這里傳入了#app，表示HTML中id為app的元素內(nèi)部都是這個(gè)Vue組件的作用范圍。
2. data字段：data字段定義了Vue組件中的數(shù)據(jù)，可能在HTML中進(jìn)行渲染。在本應(yīng)用中，商品的價(jià)格、名稱、圖片鏈接等信息，都是使用Vue組件中data字段內(nèi)的數(shù)據(jù)進(jìn)行渲染的。
3. filter字段：filter字段是一個(gè)過濾器，在本應(yīng)用中，針對(duì)價(jià)格等需要格式化的文本，就可以使用filter進(jìn)行過濾。
4. mounted字段：mounted字段通常定義一個(gè)方法，這個(gè)方法將在頁面加載完成時(shí)自動(dòng)執(zhí)行，在React等框架中都有類似的機(jī)制。
5. method字段：method字段用來定義Vue組件中需要用到的方法，這個(gè)字段的內(nèi)容往往是需要投入時(shí)間最多的部分，例如頁面中選擇商品、增加數(shù)量等邏輯，都是在這個(gè)字段中進(jìn)行編輯的。
以上就是一個(gè)vue組件的主要組成部分，下面對(duì)各個(gè)部分功能的代碼編寫進(jìn)行簡(jiǎn)要介紹。 

二、數(shù)據(jù)渲染

數(shù)據(jù)渲染部分，要渲染的數(shù)據(jù)都存放在data中。每一個(gè)商品的信息都被模擬存儲(chǔ)在了cart.json的文件中。我們可以實(shí)現(xiàn)數(shù)據(jù)自動(dòng)加載，基本思路是：在method字段中定義一個(gè)方法，用來加載cart.json中的數(shù)據(jù)，并將其存放到data字段中定義的對(duì)應(yīng)變量中。在mouted字段中，自動(dòng)調(diào)用這個(gè)方法。這樣就實(shí)現(xiàn)了頁面加載完成后自動(dòng)加載數(shù)據(jù)。對(duì)應(yīng)的JS代碼和注釋如下：

data: { 
 //存放商品json數(shù)據(jù)信息 
 productList: [] 
 } 
methods: { 
  //cartView()方法用來加載數(shù)據(jù)，并將數(shù)據(jù)存儲(chǔ)在這個(gè)Vue組件中的productList變量中 
  cartView: function() { 
  var _this = this; 
  //使用vue-resource模塊加載數(shù)據(jù)，類似Jquery中的AJAX，返回?cái)?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指令。這個(gè)指令用來循環(huán)遍歷Vue中的數(shù)據(jù)，代碼如下：

 
  
  
   
   
   
   
   
   
  {{ item.productName}} 
   
   
  
 
   
贈(zèng)送:
 
    
  
 
   
  

通過v-for指令，遍歷了變量productList中的數(shù)據(jù)，并在內(nèi)部的HTML中調(diào)用。利潤(rùn)item.productImage獲取對(duì)應(yīng)圖片URL地址；item.productName獲取商品名稱等。這樣，就自動(dòng)生成了一個(gè)商品信息列表。

關(guān)于“Vue.js怎么搭建移動(dòng)端購物車界面”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue.js怎么搭建移動(dòng)端購物車界面”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。