VUE3 基本チュートリアル: Vue.js プラグインを使用してラベル セレクター コンポーネントをカプセル化する

JavaScript 言語の人気が高まるにつれて、Web 開発も人気が高まっています。ここ数年、JS フレームワークとライブラリの人気が高まっています。最も人気のあるフレームワークの 1 つは Vue.js です。この使いやすく強力なフレームワークはますます多くの開発者を魅了し、Web 開発をより迅速かつ効率的にしています。

Vue.js では、コンポーネントはアプリケーション開発の重要な部分です。 Vue.js を使用すると、コンポーネント化された方法でコードを作成でき、複雑なアプリケーションを、それぞれが独自の関数とプロパティを持つ複数の小さなコンポーネントに分割できます。これにより、コードの保守と拡張が容易になると同時に、アプリケーションのパフォーマンスと再利用性も向上します。

この記事では、Vue.js のもう 1 つの中心的な概念であるプラグインを紹介します。 Vue.js プラグインを使用してタグ セレクター コンポーネントをラップする方法を学びます。このコンポーネントを作成し、プラグインとしてパッケージ化し、Vue.js アプリケーションで使用する方法を検討します。

コンポーネントの作成を開始

まず、コンポーネントを作成しましょう。ここでは、ユーザーがタグのセットを選択するために使用できる単純なタグ セレクター コンポーネントを作成します。コンポーネント、プロップ、メソッドなど、Vue.js に関連するいくつかの概念を使用します。これらの概念に慣れていない場合は、まず Vue.js の基本を学ぶことをお勧めします。

Vue CLI を使用して Vue.js アプリケーションを作成します。コマンド ラインで次のコマンドを実行して、新しいアプリケーションを作成します。

vue create tag-selector

次に、入力ボックスとオプション リストを含む TagSelector という名前のコンポーネントを作成します。ユーザーは入力ボックスにタグ名を入力し、オプションのリストからタグを選択できます。

<template>
  <div class="tag-selector">
    <input type="text" v-model="inputValue" v-on:keydown.enter="addTag()" />
    <div class="tags">
      <span class="tag" v-for="(tag, index) in tags" :key="index">
        {{ tag }}
        <button v-on:click="removeTag(index)">x</button>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "TagSelector",
  data() {
    return {
      tags: [],
      inputValue: ""
    };
  },
  methods: {
    addTag() {
      if (this.inputValue && !this.tags.includes(this.inputValue)) {
        this.tags.push(this.inputValue);
        this.inputValue = "";
      }
    },
    removeTag(index) {
      this.tags.splice(index, 1);
    }
  }
};
</script>

<style>
.tag-selector {
  display: flex;
  flex-direction: column;
  width: 300px;
}

input[type="text"] {
  padding: 5px;
  border: none;
  border-bottom: 1px solid grey;
}

.tags {
  margin-top: 10px;
}

.tag {
  display: inline-block;
  padding: 5px;
  border: 1px solid grey;
  border-radius: 5px;
  margin-right: 5px;
}
</style>

このコンポーネントには、ユーザーが選択したタグを保存するために使用される tags という名前の配列があります。ユーザーからの入力を取得するために使用される inputValue という変数もあります。 addTag メソッドとremoveTag メソッドは、それぞれタグの追加と削除に使用されます。

次に、このコンポーネントをプラグインとしてカプセル化する必要があります。

コンポーネントをプラグインとしてパッケージ化する

コンポーネントをカプセル化するには、その中にプラグインを記述する必要があります。 Vue.js プラグインは、少なくとも 1 つのインストール メソッドを含む JavaScript オブジェクトである必要があります。このメソッドは Vue.js のインストール中に呼び出され、最初の引数として Vue.js インスタンスを受け取ります。この場合、インストール メソッドでコンポーネント (TagSelector) を登録する必要があります。

また、Vue.js の組み込みバージョン チェック機能を使用して、プラグインが Vue.js バージョンと互換性があることを確認する必要があります。最後に、Vue.js アプリケーションで使用できるように、完成したプラグインを別の JavaScript ファイルにパッケージ化する必要があります。

以下はプラグイン コードです:

import TagSelector from "./TagSelector.vue";

const install = function(Vue) {
  Vue.component("tag-selector", TagSelector);
};

export default { install };

// version check
const version = Number(Vue.version.split(".")[0]);

if (version >= 2) {
  // Vue.js v2.x.x
  Vue.use(install);
} else {
  console.error("This plugin only works with Vue.js version 2 or above!");
}

以前に作成したコンポーネント (./TagSelector.vue) をインポートし、それを登録するためのインストール メソッドを作成しました。また、バージョン チェックを実行して、プラグインが Vue.js v2.0 以降と互換性のあるアプリケーションで動作することを確認しました。最後に、プラグイン オブジェクト全体をエクスポートして、別のファイルにパッケージ化できるようにします。

プラグインの使用

これで、プラグインを作成し、別のファイルにパッケージ化しました。これを Vue.js アプリケーションに追加し、タグの選択に使用できます。

まず、このプラグインを Vue.js アプリケーションにインポートする必要があります。このファイルを npm や cdn などのリポジトリから取得して、アプリケーションに追加できます。

import TagSelectorPlugin from "tag-selector-plugin";
import Vue from "vue";

Vue.use(TagSelectorPlugin);

これで、プラグインがアプリケーションにインポートされました。プラグインを使用するには、次のコードをテンプレートに追加するだけです。

<tag-selector></tag-selector>

これにより、アプリケーション内に tag-selector というカスタム要素が作成され、タグ セレクター コンポーネントとして表示されます。このカスタム要素と、プラグインで定義されているすべてのプロパティおよびメソッドの間で対話できます。

結論

この記事では、Vue.js プラグインを使用して単純なタグ セレクター コンポーネントをカプセル化する方法と、Vue.js アプリケーションでプラグインを使用する方法を紹介しました。プラグインの作成方法を学ぶことは、開発者が関数やコンポーネントを簡単にカプセル化し、複数のアプリケーションで使用できるようになるため、Vue.js 開発の非常に重要な部分です。この記事が Vue.js をより使いやすくするのに役立つことを願っています。

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