VUE3 開発入門チュートリアル: Vue.js コンポーネントを使用してデータ フィルターをカプセル化する

Vue.js は人気のある JavaScript フレームワークであり、Vue 3 はその最新バージョンです。この記事では、初心者が Vue 3 の開発プロセスをよりよく理解できるように、Vue.js コンポーネントを使用してデータ フィルターをカプセル化する方法を紹介します。

ステップ 1: Vue.js をインストールする
Vue.js を使用してアプリケーションを開発するには、まず Vue.js をインストールする必要があります。 npm または Yarn を使用して Vue.js をインストールできます。ターミナルに次のコマンドを入力してインストールします。

npm install vue

or

yarn add vue

ステップ 2: Vue.js アプリケーションを作成する
Vue.js をインストールした後、新しいアプリケーションを作成する必要があります。アプリケーションは、Vue CLI ツールを使用して作成できます。ターミナルに次のコマンドを入力します。

vue create my-app

これにより、my-app という新しいアプリケーションが作成されます。アプリケーションを作成するときに、特定の構成設定を使用することも選択できます。プロジェクトが作成されたら、cd コマンドを使用してプロジェクトに入ります。

cd my-app

これで、次のコマンドを使用してプロジェクトを開始できます。

npm runserve

または

yarnserve

これで、アプリケーションは正常に開始されました。ブラウザを開き、アドレスバーに http://localhost:8080 と入力してアクセスします。

ステップ 3: データ フィルター コンポーネントを作成する
Vue.js アプリケーションを作成したら、データ フィルター コンポーネントの作成を開始できます。データ フィルターはデータを受信し、条件に基づいてフィルターします。次のコード例を使用して、データ フィルター コンポーネントを作成します。

<template>
  <div>
    <div>
      <label>Filter:</label>
      <input type="text" v-model="filterText" />
    </div>
    <ul>
      <li v-for="item in filteredData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      filterText: '',
    };
  },
  computed: {
    filteredData() {
      const filterText = this.filterText.toLowerCase();
      return this.data.filter(item => {
        return item.name.toLowerCase().includes(filterText);
      });
    },
  },
};
</script>

このコード例では、まず入力フィールドとリストを含むテンプレートを定義します。また、ユーザーが入力したフィルター条件を保存する filterText というデータ属性も定義します。

次に、フィルター条件に基づいてデータをフィルターする、filteredData という計算プロパティを定義します。この計算されたプロパティは、データ プロパティ (props オブジェクトで定義) を入力として受け入れ、それをフィルター関数に渡します。この計算されたプロパティでは、filter() メソッドを使用してデータをフィルターし、名前フィールドに基づいて照合します。

最後に、コンポーネントをデフォルトのエクスポートとして設定し、親コンポーネントで使用します。

ステップ 4: データ フィルター コンポーネントの導入
これでデータ フィルター コンポーネントが作成されました。これを親コンポーネントに導入できます。以下のサンプル コードでデータ フィルター コンポーネントの使用方法を示します。

<template>
  <div>
    <filterable-list :data="items" />
  </div>
</template>

<script>
import FilterableList from './FilterableList.vue';

export default {
  components: {
    FilterableList,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'pear' },
      ],
    };
  },
};
</script>

この例では、items という名前のデータ配列を作成し、それを FilterableList コンポーネントの data プロパティに渡します。次に、FilterableList コンポーネントを親コンポーネントにインポートし、コンポーネント オブジェクトのプロパティとして設定します。最後に、テンプレートで FilterableList コンポーネントを使用します。

ステップ 5: アプリケーションを実行する
基本的な Vue.js データ フィルター コンポーネントが完成したので、アプリケーションを再起動してその効果を確認できます。ターミナルに次のコマンドを入力します:

npm runserve

または

yarnserve

そして、http://localhost:8080 を開きます。ブラウザにアクセスすると、一連の項目とフィルター入力ボックスが表示されるはずです。何かを入力すると、入力した値に基づいてリストがフィルターされます。

結論
この記事では、Vue.js とコンポーネントを使用してデータ フィルターを作成する方法を学びました。 Vue.js のコンポーネント化されたアーキテクチャと計算されたプロパティを使用して、フィルタリング機能を実装しました。これは非常に基本的な Vue.js コンポーネントであり、ニーズに応じて改善および拡張できます。 Vue.js の初心者の場合、これは Vue.js 開発プロセスをより深く理解するのに役立つ優れた出発点です。

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