Vue コンポーネントの実践: 検索ボックス コンポーネントの開発

Vue コンポーネントの実践: 検索ボックス コンポーネントの開発

インターネットの発展に伴い、さまざまなアプリケーションで検索機能がますます一般的になってきています。ユーザーが情報をすばやく検索できるようにするために、検索ボックスはすべての Web サイトの標準機能になっています。この記事では、Vue.js を使用して検索ボックス コンポーネントを開発します。

検索ボックス コンポーネントには次の機能が必要です:

1. 入力ボックスはユーザー入力にリアルタイムで応答し、ユーザーが入力したときに検索できます。ユーザーはクリックして入力できます。ボックスの右側にある検索ボタンを使用して検索します。
2. ユーザーは、検索ボックスの下に検索結果を表示できます。
3. このコンポーネントを実装するには、次の手順を実行する必要があります:

Vue.js と axios ライブラリをインストールします

1. Beforeコンポーネントの作成を始めるには、まず Vue.js と axios ライブラリをインストールする必要があります。 Vue.js はユーザー インターフェイスを構築するための先進的なフレームワークであり、axios は HTTP リクエストを送信するためのライブラリであり、どちらも npm 経由でインストールする必要があります。ターミナルに次のコマンドを入力してインストールします。

npm install vue axios --save

コンポーネントの作成

2. Vue CLI を使用して Vue プロジェクトを簡単に構築し、src/components ディレクトリに SearchBox を作成します。 .vue ファイル。これは検索ボックス コンポーネントです。

SearchBox.vue コンポーネントの作成

3. SearchBox.vue ファイルでは、コンポーネントを宣言し、テンプレート、データ、メソッドなどを定義する必要があります。成分。以下は、簡単な SearchBox.vue コード例です。

<template>
  <div class="search-box">
    <input type="text" v-model="searchText" @input="search" />
    <button @click="search">搜索</button>
    <ul>
      <li v-for="result in searchResults" :key="result.id">{{ result.title }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'SearchBox',
  data() {
    return {
      searchText: '',
      searchResults: [],
    };
  },
  methods: {
    search() {
      axios
        .get('https://jsonplaceholder.typicode.com/posts', {
          params: { title: this.searchText },
        })
        .then((response) => {
          this.searchResults = response.data;
        })
        .catch((error) => {
          console.error(error);
        });
    },
  },
};
</script>

<style scoped>
.search-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #eaeaea;
  padding: 10px;
  border-radius: 5px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 5px;
}
</style>

上記のコードでは、まずテンプレート内に検索ボックス div を作成し、その中に入力ボックスと検索ボタンを配置します。 v-model を通じて入力ボックスの値を searchText 属性にバインドします。入力ボックスの値が変更されると、それに応じて searchText の値も変更されます。

ユーザーがコンテンツを入力して検索ボタンをクリックしたときに、検索メソッドを呼び出します。検索メソッドでは、axios ライブラリを使用して HTTP リクエストを送信し、バックエンド インターフェイスにデータの取得を要求します。この例では、JSONPlaceholder によって提供される仮想 API を使用します。ユーザーが入力した内容はクエリ パラメータとしてインターフェイスに渡され、クエリによって返された結果は以下の ul に表示されます。

最後に、スタイルが他のコンポーネントに影響を与えないように、scoped 属性を使用して SearchBox コンポーネントのスタイルのスコープを定義します。

親コンポーネントでの SearchBox コンポーネントの使用

4. SearchBox コンポーネントの作成が完了したので、親コンポーネントでの使用方法を見てみましょう。親コンポーネントでは、コンポーネントを参照し、必要なプロパティを渡すだけです。例:

<template>
  <div class="app">
    <SearchBox />
  </div>
</template>

<script>
import SearchBox from '@/components/SearchBox.vue';

export default {
  components: {
    SearchBox,
  },
};
</script>

<style>
.app {
  margin: 20px;
}
</style>

上記のコードでは、SearchBox コンポーネントを導入し、親コンポーネント内のコンポーネントとして登録しました。スタイルは

で設定できます。

これまでのところ、単純な検索ボックス コンポーネントを正常に実装できました。ユーザーが検索キーワードを入力すると、バックエンド インターフェイスから対応するデータをクエリし、クエリ結果をリアルタイムでユーザーに表示します。

結論

Vue.js は現在最も人気のあるフロントエンド フレームワークの 1 つであり、そのコンポーネントベースのプログラミング機能により、さまざまな複雑なアプリケーションをより効率的かつ便利に開発できます。この記事では、Vue.js を介して検索ボックス コンポーネントを実装し、コンポーネントをインスタンス化し、親子コンポーネントと通信することで、データの双方向バインディング、メソッドの呼び出し、イベントのトリガーを実装しました。これらの Vue.js の基本知識をマスターすれば、簡単な Vue コンポーネントの開発方法は基本的にマスターできたと思います。

以上がVue コンポーネントの実践: 検索ボックス コンポーネントの開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。