Cara menggunakan Vue untuk melaksanakan kesan carian seperti Baidu

Cara menggunakan Vue untuk melaksanakan kesan carian seperti Baidu memerlukan contoh kod khusus

Enjin carian Baidu sentiasa menjadi salah satu enjin carian yang paling banyak digunakan oleh pengguna domestik, dan kesan cariannya yang unik juga telah membawa manfaat yang besar kepada pengguna pengalaman. Antaranya, kesan kotak drop-down yang meniru carian Baidu juga sangat popular. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan carian seperti Baidu dan memberikan contoh kod khusus.

Pertama, kita perlu mencipta projek Vue. Dalam fail kemasukan projek (main.js), perkenalkan Vue dan komponen yang berkaitan:

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

Vue.config.productionTip = false;

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

Seterusnya, kita perlu mencipta komponen bernama App.vue dalam projek untuk melaksanakan fungsi kotak carian dan kotak lungsur. Dalam App.vue, kami mula-mula mentakrifkan searchText atribut data, yang digunakan untuk mengikat nilai kotak input carian:

<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>

Dalam kod di atas, kami menggunakan arahan model v untuk mengikat nilai input carian secara dwiarah kotak ke atribut searchText, supaya nilai searchText akan dikemas kini secara automatik setiap kali anda memasukkan. Pada masa yang sama, kami memanggil kaedah carian dalam acara input kotak input Fungsi kaedah ini adalah untuk mendapatkan hasil carian dan memaparkan kotak drop-down.

Dalam kaedah carian, mula-mula tentukan sama ada nilai kotak carian kosong Jika ia kosong, sembunyikan kotak lungsur dan kembalikan jika tidak, paparkan kotak lungsur dan hubungi kaedah getBaiduSearchResult untuk mendapatkan carian keputusan. Pustaka axios digunakan di sini untuk menghantar permintaan HTTP dan mensimulasikan fungsi perkaitan carian Baidu melalui permintaan GET.

Akhir sekali, kami perlu memperkenalkan perpustakaan axios ke dalam App.vue untuk menghantar permintaan HTTP:

npm install axios --save

Selepas melengkapkan langkah di atas, kami perlu menggunakan komponen Aplikasi dalam templat komponen akar untuk memaparkan keseluruhan halaman struktur. Ubah suai templat komponen akar seperti berikut:

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

Dalam kod di atas, kami meletakkan komponen Apl ke dalam komponen akar untuk paparan, supaya struktur keseluruhan halaman selesai.

Akhir sekali, kami perlu memperkenalkan pautan CDN untuk Vue dan perpustakaan berkaitan ke dalam projek. Anda boleh menambah kod berikut pada fail awam/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>

Pada ketika ini, kami telah menyelesaikan pelaksanaan Vue bagi tiruan carian Baidu. Anda boleh menjalankan projek dan memasukkan kata kunci dalam kotak carian untuk mencapai kesan kotak lungsur turun seperti carian Baidu.

Dalam penggunaan sebenar, anda juga boleh menggunakan CSS untuk mencantikkan gaya kotak carian dan mengoptimumkan lagi logik dan prestasi kod. Saya harap artikel ini dapat membantu anda memahami cara menggunakan Vue untuk melaksanakan kesan carian seperti Baidu!

Atas ialah kandungan terperinci Cara menggunakan Vue untuk melaksanakan kesan carian seperti Baidu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!