初心者のための VUE3 入門: Vue.js コンポーネントを使用したアコーディオン エフェクトの作成

Vue.js は、インタラクティブな Web アプリケーションの構築を容易にする人気の JavaScript フレームワークです。 Vue の最新バージョンである Vue3 では、パフォーマンスと開発エクスペリエンスが大幅に向上しています。この記事では、初心者向けに Vue.js コンポーネントを使用してアコーディオン効果を作成する方法を紹介します。

アコーディオンエフェクトとは何ですか?

アコーディオン効果は Web サイトのデザイン効果で、通常、FAQ、製品機能リスト、製品分類などの領域を表示するために使用されます。アコーディオン効果は、ユーザーが領域をクリックして下のコンテンツを展開/折りたたむことができる展開可能なデザインで表示されます。

Vue.js アプリケーションの作成

Vue.js を使用してアコーディオン コンポーネントの作成を開始する前に、Vue.js アプリケーションのインフラストラクチャをセットアップする必要があります。ここでは、Vue CLI を使用して、Vue.js アプリケーションを迅速に構築します。

まず、次のコマンドを使用して Vue CLI をインストールする必要があります:

npm install -g @vue/cli

次に、Vue CLI を使用して新しいプロジェクトを作成できます:

vue create accordion-app

ここでは「accordion-app」 " はアプリケーションの名前です。アプリケーションには任意の名前を付けることができます。次に、コマンド ライン ウィザードに従って、新しい Vue.js プロジェクトを構成および作成します。

生成された Vue.js アプリ プロジェクト ディレクトリで、Vue.js アプリケーションのルート コンポーネントである App.vue ファイルを見つけます。ファイルを開き、次の HTML および CSS コードをテンプレート内に追加します。

<template>
  <div class="accordion">
    <div class="accordion-group" v-for="accordionItem in accordionItems" :key="accordionItem.id">
      <div class="accordion-header" @click="toggleAccordion(accordionItem.id)">
        {{accordionItem.title}}
      </div>
      <div class="accordion-content" :class="{'is-active': accordionItem.isActive}">
        {{accordionItem.content}}
      </div>
    </div>
  </div>
</template>

<style>
.accordion {
  .accordion-group {
    .accordion-header {
      cursor: pointer;
      padding: 1rem;
      background-color: #eee;
      border: 1px solid #ccc;
      font-weight: bold;
    }

    .accordion-content {
      background-color: #fff;
      padding: 1rem;
      border: 1px solid #ccc;
      display: none;

      &.is-active {
        display: block;
      }
    }
  }
}
</style>

上記のコード スニペットでは、vue-for ディレクティブを使用して「accordionItems」配列を反復処理し、タイトルとコンテンツを追加します。また、タイトルのクリック イベントも設定しました。これを使用して、アコーディオン領域の展開または縮小を制御できます。アコーディオン効果の実装は、主にアコーディオン領域の CSS スタイル「is-active」を制御することによって実現されます。

データ セクションに次のコードを追加します。

<script>
export default {
  data() {
    return {
      accordionItems: [
        {
          id: 1,
          title: "Accordion Group 1",
          content:
            "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ut fringilla lorem, in consectetur purus. Mauris maximus nisi quis purus consequat aliquet. Morbi elementum cursus mi eget vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras viverra sem vel ex consectetur pharetra. Nulla facilisi."
        },
        {
          id: 2,
          title: "Accordion Group 2",
          content:
            "Donec facilisis libero sapien, quis viverra urna euismod nec. Aenean dignissim fringilla tortor, in aliquam elit bibendum ut. Maecenas et est vel turpis tincidunt suscipit. In hac habitasse platea dictumst. Sed at justo a turpis tristique tincidunt. Nam pharetra tortor eget bibendum fringilla. Donec nec bibendum magna. Mauris sit amet nisl urna. Nunc tempor enim quis metus blandit, in laoreet nisl fringilla."
        },
        {
          id: 3,
          title: "Accordion Group 3",
          content:
            "Ut tempus malesuada purus, vel posuere metus fermentum a. Duis non magna id dui auctor dapibus. Morbi vulputate accumsan iaculis. Fusce eu urna vulputate, bibendum arcu cursus, ornare dolor. Duis elementum ac eros at bibendum. Aliquam aliquam velit vel ante sagittis, vel laoreet leo posuere. Nunc ac urna eleifend, euismod enim sit amet, consectetur erat."
        }
      ]
    };
  },
  methods: {
    toggleAccordion(id) {
      this.accordionItems.forEach(item => {
        if (item.id === id) {
          item.isActive = !item.isActive;
        } else {
          item.isActive = false;
        }
      });
    }
  }
};
</script>

データ セクションのコードでは、3 つのオブジェクトで構成される配列を定義します。各オブジェクトはアコーディオン内のグループを表します。 「toggleAccordion」のようなメソッドでは、アコーディオン グループをループし、クリック イベントを使用して、クリックされたアコーディオン グループの一意の識別子 ID を抽出します。次に、その「id」に関連付けられたグループを確認し、その「isActive」プロパティを反対の値に設定します。また、他のアコーディオン グループの "is-active" プロパティを "false" に設定して、1 つのアコーディオン グループが展開されると他のアコーディオン グループが閉じられるようにします。

アコーディオン エフェクトの Vue.js 実装が完了しました。これで、npm を実行してアプリケーションを実行できます。

npm run serve

次に、ブラウザを開いて http://localhost:8080 にアクセスすると、ページ上にアコーディオン グループがレンダリングされるのが確認できるはずです。

結論

この記事では、Vue.js コンポーネントを使用してアコーディオン エフェクトを作成する方法を紹介しました。 Vue.js でインフラストラクチャをセットアップし、必要な HTML と CSS コードを追加し、Vue.js を使用してアコーディオン効果を実装する JavaScript コードを作成しました。これは Vue.js の無数の可能性の一例にすぎず、初心者が使い始めるためのガイドとして役立つことを願っています。 Vue.js をさらに学習したい開発者は、公式ドキュメントと Vue.js コミュニティ リソースを参照して、Vue.js を深く理解し、その機能についてさらに学ぶことをお勧めします。

以上が初心者のための VUE3 入門: Vue.js コンポーネントを使用したアコーディオン エフェクトの作成の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。