VUE3 クイック スタート: Vue.js 命令を使用してタブを切り替える

この記事は、初心者が Vue.js 3 をすぐに使い始めて、簡単なタブ切り替え効果を実現できるようにすることを目的としています。 Vue.js は、再利用可能なコンポーネントの構築、アプリケーションの状態の簡単な管理、ユーザー インターフェイスの操作の処理に使用できる人気の JavaScript フレームワークです。 Vue.js 3 はフレームワークの最新バージョンで、以前のバージョンと比較して大きな変更が加えられていますが、基本原理は変わっていません。この記事では、読者が Vue.js の一般的な構文と概念に慣れることを目的として、Vue.js の命令を使用してタブ切り替え効果を実装します。

最初のステップでは、Vue インスタンスを作成し、それを HTML ページ上の DOM 要素にマウントする必要があります。 Vue.js 3 では、Vue インスタンスを作成する方法は Vue.js 2 と似ており、オブジェクトをパラメータとして渡すだけです。また、Vue インスタンスでデータ プロパティ tabs を宣言する必要があります。これには、タブのタイトルとコンテンツが含まれます。

<div id="app">
  <ul>
    <li v-for="(tab, index) in tabs" :key="index" @click="activeTabIndex = index">{{ tab.title }}</li>
  </ul>
  <div v-for="(tab, index) in tabs" :key="index" v-show="activeTabIndex === index">{{ tab.content }}</div>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      tabs: [
        {
          title: 'Tab 1',
          content: 'This is the content for Tab 1'
        },
        {
          title: 'Tab 2',
          content: 'This is the content for Tab 2'
        },
        {
          title: 'Tab 3',
          content: 'This is the content for Tab 3'
        }
      ],
      activeTabIndex: 0
    }
  }
})

app.mount('#app')
</script>

上記のコードでは、v-for ディレクティブを使用してループ タブ配列を走査し、:key ディレクティブを使用して各要素に一意の識別子を設定し、@click ディレクティブでタブをバインドします。イベントでは、タブがクリックされると、そのインデックス値が activeTabIndex データ プロパティに割り当てられます。同時に、v-show コマンドを使用して、activeTabIndex の値に応じて、対応するタブのコンテンツを表示または非表示にします。

これで、Vue インスタンスが正常に作成され、HTML ページにマウントされました。次に、タブの外観を改善するためにスタイルを記述する必要があります。

ul {
  display: flex;
  list-style: none;
  padding: 0;
  background-color: #eee;
}

li {
  padding: 10px;
  cursor: pointer;
}

li:hover {
  background-color: #ddd;
}

li.active {
  background-color: #fff;
}

div {
  padding: 20px;
  border: 1px solid #ccc;
  background-color: #fff;
}

上記のスタイルでは、背景色、境界線、パディングなど、タブ リストとタブ コンテンツ ブロックのいくつかの基本的なスタイルを設定します。さらに、タブの li 要素に :hover スタイルと .active スタイルも定義しました。マウスをタブの上に置くと背景色が変わり、タブがアクティブなときは背景色が白に変わります。

これまでに、タブの基本的なレイアウトとスタイルが完成しました。最後に、タブの切り替えがスムーズかつ正確であることを確認するために、Vue インスタンスで最終作業を行う必要があります。

<div id="app">
  <ul>
    <li v-for="(tab, index) in tabs" :key="index" :class="{ active: activeTabIndex === index }" @click="activeTabIndex = index">{{ tab.title }}</li>
  </ul>
  <div v-for="(tab, index) in tabs" :key="index" v-show="activeTabIndex === index">{{ tab.content }}</div>
</div>

<script>
const app = Vue.createApp({
  data() {
    return {
      tabs: [
        {
          title: 'Tab 1',
          content: 'This is the content for Tab 1'
        },
        {
          title: 'Tab 2',
          content: 'This is the content for Tab 2'
        },
        {
          title: 'Tab 3',
          content: 'This is the content for Tab 3'
        }
      ],
      activeTabIndex: 0
    }
  },
  watch: {
    activeTabIndex(newValue, oldValue) {
      console.log(`The active tab index has changed from ${oldValue} to ${newValue}`)
    }
  },
  mounted() {
    console.log('Vue app has been mounted to the DOM')
  }
})

app.mount('#app')
</script>

上記のコードでは、:class ディレクティブを使用して、タブのアクティブ化状態に応じて li 要素の CSS クラスを動的にバインドし、タブのスタイルを設定します。また、watch 属性を使用して activeTabIndex の変更を監視し、変更情報をコンソールに出力します。最後に、マウントされたライフサイクル フック関数を使用して、Vue アプリケーションが DOM に正常にマウントされたことを確認します。

これで、完全な Vue.js 3 タブ コンポーネントの例が完成しました。この記事を学習することで、命令、データ プロパティ、計算プロパティ、ライフ サイクル フックなどを含む、Vue.js で一般的に使用される構文と概念を理解できたはずです。

もちろん、この記事は Vue.js の氷山の一角にすぎません。今後の研究では、ルーティング、状態管理、プラグインなどにさらに注意を払う必要があります。この記事が、Vue.js 3 を学習しようとしている開発者や愛好家にとって役立つことを願っています。

以上がVUE3 クイック スタート: Vue.js 命令を使用してタブを切り替えるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。