Vueは商品詳細ページの商品タブ機能を実装します

この記事の例では、商品詳細ページ機能を実現するためのVueの商品タブの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

ユーザーが商品をクリックして商品詳細ページに入ると、最初の小さな画像に対応する大き​​な画像がデフォルトで表示されます。その後、マウスを小さな画像の上に移動すると、大きな画像も変化します。効果は次のとおりです。

実装コード:

shopitem.vue のテンプレート (HTML) には、上部に大きな画像、下部に小さな画像があります。マウスを小さな画像の上に移動すると、getUrl イベントがトリガーされます (パラメーターは、小さな画像の show 属性とインデックスです)。

item.json ファイル (私のデータ ファイルでは、デフォルトでは最初の小さい画像の表示が true になっており、デフォルトの大きい画像では最初の画像が表示されます。大きい画像と小さい画像のパスは同じですが、CSS で制御される画像のサイズは異なります)。

shopitem.vue の <script> メソッド (fechData() は vue-resource を使用してバックグラウンド データ、つまりローカル json ファイルを要求します。ローカル json ファイルは static フォルダーに保存されます。)

vuex (状態管理) の store.js ファイル コードはデータの永続性を実現します。

//ストアは倉庫に相当します。1 つのコンポーネントがデータを使用して変更し、別のコンポーネントが前のコンポーネントによって変更されたデータを使用します。//このようにして、vuex は異なるコンポーネント (異なるページ) 間でのデータ共有を実現します。//vuex の紹介
'vue' から Vue をインポートします。
'vuex' から Vuex をインポートします。
 
Vue.js で Vuex をビルドします。
 
//Vuex を使用してデータの永続性を実装する/* 1.state は主に vuex でデータを保存するために使用されます*/
var 状態 = {
 番号:1,
 情報：[]
}
 
// 2. 変異には、主に状態のデータを変更するために使用されるメソッドが含まれています var mutations={
 カウント（）{
  ++状態.数値;
 },
 // 値は書き込まれる必要があります状態
 storeItemInfo(状態、データ){
  state.info=データ;
// state.list.push(データ);
 }
}
 
 // 3. 計算プロパティと同様に、状態内のカウントデータが変更されると、ゲッター内のメソッドが送信され、新しい値を取得します var getters={
  計算されたカウント: (状態) => {
    状態.count*2を返します。
  }
}
 
// 3.vuex は Vuex.Store をインスタンス化します
定数ストア = 新しい Vuex.Store({
  状態、/* 略語 */
  突然変異、
  ゲッター
})
 
//4. ストアを公開する
デフォルトストアをエクスポートします。

これは、es6 関数、vuex、およびリクエスト データを使用してこの効果を実現するためのすべてのコードです。とにかく、私はようやく es6 関数の利点を理解しました。それが皆さんのお役に立てば幸いです。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。