VUE3 入門チュートリアル: Vue.js プラグインを使用してタイムラインコンポーネントをカプセル化する-Vue.js-php.cn

VUE3 入門チュートリアル: Vue.js プラグインを使用してタイムラインコンポーネントをカプセル化する

王林

リリース： 2023-06-15 21:09:01

オリジナル

3267 人が閲覧しました

Vue.js は、フロントエンド開発で広く使用されている非常に人気のある JavaScript フレームワークです。 Vue.js の継続的な開発に伴い、VUE3 の新しいバージョンも次々とリリースされています。この記事では、Vue.js プラグインを使用してタイムラインコンポーネントをカプセル化する方法に関する入門チュートリアルを紹介します。

まず、タイムラインコンポーネントの基本構造を理解する必要があります。タイムラインコンポーネントを使用すると、時間やイベントの内容など、一定期間にわたるイベントを表示できます。一般に、タイムラインはイベントが発生した順序で配置されるため、ユーザーはタイムライン上のイベント間の関係をより直観的に理解できるようになります。ここでは、Vue.jsを使用してこの機能を実装します。

次に、Vue.js をインストールする必要があります。次の手順に従って、コマンドラインでインストールを完了できます。

npm install vue

ログイン後にコピー

インストールが完了したら、タイムラインコンポーネントの構築を開始できます。まず、Vue.js コンポーネントを作成する必要があります。このコンポーネントでは、データとメソッドを定義する必要があります。

コンポーネントでは、コンポーネントのデータを保存するデータオブジェクトを定義する必要があります。このデータオブジェクトには、時間、イベントの説明など、多くの属性を含めることができます。ここでは 5 つのプロパティのみを定義します。

data() {
  return {
    events: [
      { time: "2022-01-01", event: "New Year's Day" },
      { time: "2022-02-12", event: "Chinese New Year" },
      { time: "2022-04-15", event: "Tax Day" },
      { time: "2022-05-09", event: "Mother's Day" },
      { time: "2022-06-20", event: "Father's Day" }
    ]
  }
}

ログイン後にコピー

このデータオブジェクトでは、イベント配列を使用してイベントを保存します。配列内の各要素には、時間とイベントという 2 つの属性が含まれます。 time 属性はイベントが発生した時刻を示し、event 属性は具体的なイベントの内容を示します。

次に、Vue.js コンポーネントでタイムラインの HTML 構造をレンダリングするメソッドを定義する必要があります。このメソッドでは、イベント配列を反復処理し、イベントごとに HTML 要素を生成します。ここでは、Vue.js のテンプレート構文を使用して DOM 要素を作成および更新します。

methods: {
  renderTimeline() {
    return this.events.map(event => {
      return `<div>
                <div class="time">${event.time}</div>
                <div class="event">${event.event}</div>
              </div>`
    }).join('')
  }
}

ログイン後にコピー

このメソッドでは、map メソッドを使用してイベント配列を走査します。配列内の要素ごとに、時刻とイベントを含む div 要素を作成し、それらを文字列に連結します。最後に、join メソッドを使用してすべての文字列を HTML 文字列に連結し、それを返します。

これで、タイムラインコンポーネントの構築のほとんどが完了しました。このコンポーネントをより便利に使用するには、Vue.js プラグインを使用してカプセル化する必要があります。基本的なタイムラインプラグインの構造は次のとおりです。

const TimelinePlugin = {
  install(Vue) {
    Vue.component('timeline', {
      data() {},
      methods: {},
      template: `<div class="timeline-container">{{renderTimeline()}}</div>`
    })
  }
}

ログイン後にコピー

このプラグインでは、プラグインとコンポーネントという 2 つの主要な部分を使用します。プラグインは、Vue.js インスタンスに登録およびインストールできる機能モジュールです。ここでは、Vue.jsのインストール方法を利用してこのプラグインをインストールします。このメソッドは、Vue.js をパラメーターとして受け取り、コンポーネントをグローバルコンポーネントとして登録する必要があります。

コンポーネントは、定義したタイムラインコンポーネントです。ここでは、先ほど定義したデータ、メソッド、テンプレートをVue.componentに記述し、タイムラインコンポーネントとして登録します。最後に、クラス timeline-container を持つ div コンテナーにそれを結合します。

次に、このプラグインを Vue.js アプリケーションにインポートする必要があります。 main.js では次のように実行できます。

import Vue from 'vue'
import TimelinePlugin from './timeline-plugin.js'

Vue.use(TimelinePlugin)

new Vue({ 
  el: '#app'
})

ログイン後にコピー

main.js では、import ステートメントを使用して TimelinePlugin プラグインをアプリケーションにインポートします。次に、Vue.jsの使用方法を使用してプラグインをインストールします。最後に、Vue.js インスタンスを作成し、#app という ID を持つ DOM 要素にバインドします。

最後に、タイムラインコンポーネントをレンダリングするために HTML ファイル内に DOM 要素を作成する必要があります。これを行うことができます:

<html>
  ...
  <body>
    <div id="app">
      <timeline></timeline>
    </div>
    <script src="js/main.js"></script>
  </body>
</html>

ログイン後にコピー

この HTML 例では、ID #app を持つ div コンテナを作成し、そこにタイムラインコンポーネントを挿入します。最後に、main.js ファイルをページのスクリプトファイルとして設定し、HTML にインポートします。

これで、基本的なタイムラインコンポーネントが完成し、Vue.js プラグインとしてカプセル化されました。 Vue.js アプリケーションで非常に便利に使用できます。 Vue.js と VUE3 の仕組みについて詳しく知りたい場合は、関連するドキュメントを確認してください。

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

VUE3 入門チュートリアル: Vue.js プラグインを使用してタイムライン コンポーネントをカプセル化する

VUE3 入門チュートリアル: Vue.js プラグインを使用してタイムラインコンポーネントをカプセル化する