Vue を使用して Baidu のような検索効果を実装する方法

Vue を使用して Baidu のような検索効果を実装するには、特定のコード例が必要です

Baidu 検索エンジンは、常に国内ユーザーによって最もよく使用されている検索エンジンの 1 つです。ユニークな検索効果もユーザーに優れたエクスペリエンスをもたらします。中でもBaidu検索を模したドロップダウンボックスエフェクトも人気です。この記事では、Vue を使用して Baidu のような検索効果を実装する方法を紹介し、具体的なコード例を示します。

まず、Vue プロジェクトを作成する必要があります。プロジェクトのエントリ ファイル (main.js) に、Vue と関連コンポーネントを導入します。

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
}).$mount('#app');

次に、検索ボックスとドロップダウン ボックスの機能を実装するために、プロジェクトに App.vue という名前のコンポーネントを作成する必要があります。 。 App.vue では、まずデータ属性 searchText を定義します。これは、検索入力ボックスの値をバインドするために使用されます。

<template>
  <div>
    <input type="text" v-model="searchText" @input="search">
    <ul v-show="showList">
      <li v-for="item in searchList" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      searchList: [],
      showList: false
    }
  },
  methods: {
    search() {
      if (this.searchText === '') {
        this.showList = false;
        return;
      }
      this.showList = true;
      // 调用百度搜索API获取搜索结果
      this.searchList = this.getBaiduSearchResult();
    },
    getBaiduSearchResult() {
      // 使用axios发送HTTP请求获取搜索结果
      // 注意：这里只是模拟，实际使用时应该替换为真实接口
      return axios.get('https://www.baidu.com/sugrec')
        .then(response => response.data.g);
    }
  }
}
</script>

上記のコードでは、v-model 命令を使用して、次の値をバインドします。検索入力ボックスから searchText へのプロパティは双方向にバインドされているため、入力するたびに searchText の値が自動的に更新されます。同時に入力ボックスのinputイベント内でsearchメソッドを呼び出し、検索結果を取得してドロップダウンボックスを表示します。

検索メソッドでは、まず検索ボックスの値が空かどうかを確認します。空の場合はドロップダウン ボックスを非表示にして戻り、そうでない場合はドロップダウン ボックスを表示して getBaiduSearchResult メソッドを呼び出します。検索結果を取得します。ここでは、axios ライブラリを使用して HTTP リクエストを送信し、GET リクエストを通じて Baidu 検索の関連付け機能をシミュレートします。

最後に、HTTP リクエストを送信するには、axios ライブラリを App.vue に導入する必要があります。

npm install axios --save

上記の手順を完了した後、テンプレート内の App コンポーネントを使用する必要があります。表示するルートコンポーネント ページ全体の構造。ルート コンポーネントのテンプレートを次のように変更します。

<template>
  <div id="app">
    <h1>仿百度搜索特效</h1>
    <App/>
  </div>
</template>

上記のコードでは、ルート コンポーネントに App コンポーネントを配置して表示し、ページ全体の構造が完成します。

最後に、Vue および関連ライブラリの CDN リンクをプロジェクトに導入する必要があります。次のコードを public/index.html ファイルに追加できます。

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>

この時点で、Baidu 検索模倣の Vue 実装が完了しました。プロジェクトを実行し、検索ボックスにキーワードを入力すると、Baidu 検索のようなドロップダウン ボックス効果を実現できます。

実際の使用では、CSS を使用して検索ボックスのスタイルを美しくし、コードのロジックとパフォーマンスをさらに最適化することもできます。この記事が、Vue を使用して Baidu のような検索効果を実装する方法を理解するのに役立つことを願っています。

以上がVue を使用して Baidu のような検索効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。