Vue.jsはモバイル端末のショッピングカートのインターフェイスを構築します。

10186 ワード

Vue.js 移動端ショッピング？カー

本文は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"> 
  <divclassdivclass="cart-item"> 
  <divclassdivclass="cart-item-head"> 
   <ul> 
   <li>    </li> 
   <li>    </li> 
   <li>    </li> 
   <li>   </li> 
   <li>  </li> 
   </ul> 
  </div> 
  <ulclassulclass="cart-item-list"> 
   <!--productList Vue    data  ，      ，  v-for      --> 
   <li v-for="item inproductList"> 
   <divclassdivclass="cart-tab-1"> 
   <divclassdivclass="cart-item-check"> 
   <!--Vue2.0   HTML      ，    v-bind:，       ，   a    check  ，    item  checked --> 
   <!--@click v-on:click   ，            ，  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()  ，      --> 
    <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              --> 
   <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" 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       --> 
  <buttonclassbuttonclass="md-close" @click="delFlag = false">  </button> 
  </div> 
  <div class="md-content"> 
  <divclassdivclass="confirm-tips"> 
  <pidpid="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値に入る必要があります。ここには、HTMLの中のidがappであるということを示す菗apが伝えられています。内部はこのVueコンポーネントの役割範囲です。
2.dataフィールド：dataフィールドはVueコンポーネントのデータを定義しています。HTMLでレンダリングが可能です。本アプリケーションでは、商品の価格、名前、リンクなどの情報は、Vueコンポーネントのdataフィールド内のデータを使ってレンダリングされます。
3.filterフィールド：filterフィールドはフィルタであり、本アプリケーションでは価格などの書式設定が必要なテキストに対して、filterを使ってフィルタリングすることができます。
4.mountedフィールド：mountedフィールドは通常、ページローディングが完了すると自動的に実行され、Reactなどのフレームにも同様のメカニズムがあります。
5.methodフィールド：methodフィールドは、Vueコンポーネントの中で必要な方法を定義するために使用されます。このフィールドの内容は、しばしば投入時間が一番多い部分です。たとえば、ページの中で商品を選択したり、数量を増やすなどのロジックは、このフィールドで編集します。
以上は一つのvueコンポーネントの主要な構成部分です。各部分の機能コードの作成について簡単に紹介します。
二、データレンダリング
データレンダリング部分は、レンダリングするデータをダタに保存します。各商品の情報はアナログでcart.jsonのファイルに保存されています。データの自動ロードが実現できます。基本的な考え方は、cart.jsonのデータをロードするための方法をmethodフィールドで定義し、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は商品名などを取得します。これにより、商品情報リストが自動的に生成されます。
次の部分は論理コードの作成を紹介します。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

mbda表現はjavaバックグラウンドのパケット順序付け過程の解析を解決します。

JavaでMongoDB接続を取得する方法詳細