VUE3 入門: Vue.js を使用したカルーセル コンポーネントのカプセル化手順

Vue.js は、開発者がユーザー インターフェイスをより簡単かつ迅速に構築できるようにする人気のフロントエンド フレームワークです。このうち、命令は Vue.js の中核となる概念であり、DOM 要素の動作を変更したり、さまざまな機能を実装したりできます。

この記事では、初心者が Vue.js 命令の使用をすぐにマスターできるように、Vue.js でカルーセル コンポーネントをカプセル化する命令の使用方法を紹介します。

1. 事前準備

このチュートリアルを開始する前に、まず Vue.js をインストールする必要があります。 Vue 3.x バージョンの方がパフォーマンスが良く、API が便利なので、使用することをお勧めします。

2. Vue コンポーネントの作成

まず、Vue コンポーネントを作成し、HTML、CSS、JavaScript コードを記述します。

HTML：

<div id="app">
  <div class="slider">
    <img v-for="image in images" :key="image" :src="image" alt="slider">
  </div>
</div>

CSS：

.slider {
  width: 600px;
  height: 400px;
  margin: 0 auto;
  position: relative;
}

.slider img {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

JavaScript：

const app = Vue.createApp({
  data() {
    return {
      images: [
        "https://picsum.photos/id/237/600/400",
        "https://picsum.photos/id/238/600/400",
        "https://picsum.photos/id/239/600/400"
      ]
    };
  }
});

app.mount("#app");

3. カルーセル命令のカプセル化

次に、カスタムを使用します。カルーセルコンポーネントをカプセル化する命令。まず、v-slider ディレクティブを Vue コンポーネントに追加し、次にこのディレクティブを directive オプションで定義し、bind と updateカルーセル ロジックをフックに実装します。

JavaScript:

const app = Vue.createApp({
  data() {
    return {
      images: [
        "https://picsum.photos/id/237/600/400",
        "https://picsum.photos/id/238/600/400",
        "https://picsum.photos/id/239/600/400"
      ]
    };
  },
  directives: {
    slider: {
      bind(el, binding) {
        el.sliderIndex = 0;
        el.sliderInterval = setInterval(() => {
          el.style.backgroundImage = `url(${binding.value[el.sliderIndex]})`;
          el.sliderIndex++;
          if (el.sliderIndex === binding.value.length) {
            el.sliderIndex = 0;
          }
        }, 2000);
      },
      update(el, binding) {
        clearInterval(el.sliderInterval);
        el.sliderIndex = 0;
        el.sliderInterval = setInterval(() => {
          el.style.backgroundImage = `url(${binding.value[el.sliderIndex]})`;
          el.sliderIndex++;
          if (el.sliderIndex === binding.value.length) {
            el.sliderIndex = 0;
          }
        }, 2000);
      },
      unbind(el) {
        clearInterval(el.sliderInterval);
      }
    }
  }
});

app.mount("#app");

bind フックでは、カルーセル インデックスとタイマーを初期化し、タイマーに背景画像を設定します。 update フックでは、まず前のタイマーとカルーセル インデックスをクリアし、次にそれらをリセットします。

最後に、unbind フックで、メモリ リークを避けるためにタイマーをクリアします。

4. カルーセル コマンドを使用する

カルーセル コマンドのカプセル化が完了したので、それを Vue コンポーネントの HTML で使用できるようになります。

<div id="app">
  <div class="slider" v-slider="images"></div>
</div>

v-slider ディレクティブでは、images 配列をパラメーターとしてディレクティブに渡しました。ここの images は、Vue コンポーネントで定義された画像配列です。

これまでのところ、命令を使用してカルーセル コンポーネントをカプセル化することに成功しました。

5. 概要

この記事では、命令を使用して Vue.js でカルーセル コンポーネントをカプセル化する方法を紹介します。カスタム ディレクティブを使用すると、DOM の動作の調整が必要なさまざまな機能を簡単に実装できます。このチュートリアルが Vue.js を学習する初心者に役立つことを願っています。

以上がVUE3 入門: Vue.js を使用したカルーセル コンポーネントのカプセル化手順の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。