応答性の高い製品リストレイアウト | Vue.js チュートリアル

はじめに

このプロジェクトでは、切り替え機能付きの応答型の製品リストレイアウトを作成する方法を学びます。この機能により、ユーザーは製品アイテムのグリッドビューとリストビューの間を簡単に切り替えることができます。

👀 プレビュー

responsive layout switching demo

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

プロジェクト構造を設定し、各ファイルとフォルダの目的を理解する方法
JSON ファイルからデータを取得し、製品リストにデータを埋め込む方法
Vue.js を使用してレイアウト切り替え機能を実装する方法
選択されたビューに基づいてグリッドとリストレイアウトを条件付きでレンダリングする方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

Vue.js プロジェクトを効果的に構築する
Axios を使用して JSON ファイルからデータを取得する
v-ifやv-elseのような Vue.js ディレクティブを使用して条件付きでコンテンツをレンダリングする
ユーザーインタラクションを処理し、UI を適切に更新する

プロジェクト構造を設定する

このステップでは、Layout Switch プロジェクトのプロジェクト構造を設定する方法を学びます。以下の手順に従ってこのステップを完了します。

このプロジェクトのプロジェクトフォルダを開きます。ディレクトリ構造は以下の通りです。

├── css
├── images
├── js
│    ├── axios.min.js
│    └── vue.js
├── goodsList.json
└── index.html

各フォルダとファイルの目的を把握します。
- css：このフォルダはスタイルファイル用です。
- images：このフォルダは画像用です。
- js/vue.js：これは Vue 2.x のファイルです。
- js/axios.min.js：これは Axios のファイルです。
- goodsList.json：これは要求に必要なデータです。
- index.html：これにはページのレイアウトとロジックが含まれています。
WebIDE の右下隅にある「Go Live」ボタンをクリックして、プロジェクトを実行します。
VM の上部にある「Web 8080」を開き、手動で更新してページを表示します。

データ取得を実装する

このステップでは、プロジェクトに必要なデータを取得する方法を学びます。以下の手順に従ってこのステップを完了します。

index.html ファイルで、ファイルの下部にある <script> タグを探します。
<script> タグの中で、new Vue() を使って新しい Vue インスタンスを作成します。
Vue インスタンスの data オプションの中で、goodsList プロパティを追加し、空の配列として初期化します。
Vue インスタンスの mounted フックの中で、Axios を使って goodsList.json ファイルからデータを取得します。
取得したデータで goodsList データプロパティを更新します。

あなたのコードはこのようになるはずです。

var vm = new Vue({
  el: "#app",
  data: {
    goodsList: []
  },
  mounted() {
    axios.get("./goodsList.json").then((res) => (this.goodsList = res.data));
  }
});

レイアウト切り替えを実装する

このステップでは、製品リストのレイアウトを切り替える機能を実装する方法を学びます。以下の手順に従ってこのステップを完了します。

index.html ファイルで、<div class="bar"> 要素を探します。
この要素の中に、それぞれ grid-icon と list-icon のクラス名を持つ 2 つの <a> 要素を追加します。

<div class="bar">
  <a class="grid-icon"></a>
  <a class="list-icon"></a>
</div>

Vue インスタンスに changeBar というデータプロパティを作成し、現在のレイアウトを追跡します。初期値を 0 に設定します。つまり、グリッドレイアウトがデフォルトになります。

var vm = new Vue({
  el: "#app",
  data: {
    changeBar: 0
    //...
  }
});

各 <a> 要素に @click イベントをバインドします。grid-icon がクリックされたとき、changeBar を 0 に設定し、grid-icon に active クラスを追加します。list-icon から active クラスを削除します。

<div class="bar">
  <a
    class="grid-icon"
    :class="changeBar == 0? 'active' : ''"
    @click="changeBar = 0"
  ></a>
  <!--... -->
</div>

各 <a> 要素に @click イベントをバインドします。list-icon がクリックされたとき、changeBar を 1 に設定し、list-icon に active クラスを追加します。grid-icon から active クラスを削除します。

<div class="bar">
  <!--... -->
  <a
    class="list-icon"
    :class="changeBar == 1? 'active' : ''"
    @click="changeBar = 1"
  ></a>
</div>

v-if と v-else ディレクティブを使用して、changeBar の値に基づいてグリッドとリストのレイアウトを条件付きでレンダリングします。

<ul class="grid" v-if="changeBar == 0">
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.large" />
    </a>
  </li>
</ul>
<ul class="list" v-else>
  <li v-for="item in goodsList">
    <a :href="item.url" target="_blank">
      <img :src="item.image.small" />
    </a>
    <p>{{item.title}}</p>
  </li>
</ul>

プロジェクトを完成させる

この最後のステップでは、完成したプロジェクトを見直し、要件を満たしていることを確認します。

goodsList.json ファイルから正しくデータが取得されていることを確認します。
レイアウト切り替え機能が期待通りに機能することを確認します。
- グリッドアイコンをクリックすると、レイアウトがグリッドビューに切り替わり、グリッドアイコンに active クラスが追加されます。
- リストアイコンをクリックすると、レイアウトがリストビューに切り替わり、リストアイコンに active クラスが追加されます。
アイコンをクリックしてレイアウトが期待通りに変更されることを確認しながら、プロジェクトをテストします。

おめでとうございます！あなたは Layout Switch プロジェクトを完了しました。あなたは以下のことを学びました。