Bagaimana untuk melakukan carian Lenovo dalam vue

Dengan perkembangan teknologi Internet yang berterusan, enjin carian telah menjadi saluran penting untuk orang ramai mendapatkan maklumat. Dalam kejuruteraan perisian, aplikasi teknologi enjin carian semakin meluas. Sebagai contoh, apabila membangunkan tapak web atau aplikasi, kami biasanya perlu melaksanakan beberapa bentuk fungsi carian untuk membantu pengguna mencari maklumat yang mereka perlukan dengan cepat.

Dalam teknologi hadapan semasa, Vue.js ialah rangka kerja JavaScript yang sangat popular yang menggunakan corak MVVM dan mempunyai ciri seperti pengikatan data responsif dan komponenisasi. Jika anda perlu melaksanakan fungsi carian dalam Vue.js, bagaimanakah anda harus melakukannya? Artikel ini akan memperkenalkan keseluruhan proses daripada carian Lenovo kepada pemaparan data.

1. Laksanakan carian Lenovo

Sebelum melaksanakan fungsi carian, kita perlu memahami carian Lenovo terlebih dahulu. Carian bersekutu bermakna semasa proses memasukkan kata kunci, apabila kandungan input terus berubah, sistem akan secara automatik menggesa hasil carian yang berkaitan, supaya pengguna dapat mencari maklumat sasaran dengan lebih cepat.

Untuk memantau peristiwa input kotak carian, anda boleh menggunakan arahan model v dalam Vue.js. Apabila pengguna memasukkan teks, arahan v-model akan mengikat nilai kotak input kepada atribut data bagi contoh Vue, dan data terikat akan dikemas kini secara automatik setiap kali pengguna memasukkan teks.

Kami boleh memantau acara input untuk memaparkan hasil carian Lenovo semasa menaip. Pelaksanaan khusus adalah seperti berikut:

<template>
  <div>
    <input v-model="keyword" @input="debounce" />
    <ul v-show="results.length">
      <li v-for="(item, index) in results" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      keyword: '',
      results: []
    }
  },
  methods: {
    debounce() {
      // 对搜索请求进行防抖处理，避免频繁请求
      clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.getResults()
      }, 500)
    },
    getResults() {
      // 发送搜索请求，获取联想搜索结果
      fetch('/search?q=' + this.keyword)
        .then(res => res.json())
        .then(data => {
          this.results = data.results
        })
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan fungsi nyahlantun untuk nyahlantun acara input. Ini berkesan boleh mengelakkan permintaan carian yang kerap disebabkan oleh pengguna menaip terlalu cepat dan mengurangkan tekanan pada pelayan. Dalam fungsi getResults, kami menghantar permintaan melalui API pengambilan untuk mendapatkan hasil carian Lenovo. Simpan hasil carian dalam atribut hasil bagi contoh Vue, dan kemudian ikat terus atribut hasil dalam templat untuk memaparkan hasil carian ramalan.

2. Laksanakan pemaparan data

Melalui langkah di atas, kami telah melaksanakan fungsi carian Lenovo. Seterusnya, kita perlu mengikat hasil carian dengan data sebenar untuk mencapai pemaparan dinamik hasil. Memandangkan hasil carian biasanya dipaparkan dalam bentuk senarai, kami boleh menggunakan komponenisasi untuk melengkapkan bahagian fungsi ini.

Pertama, kita perlu menulis komponen data untuk mengurus data sebenar. Dalam komponen ini, kita boleh menggunakan prop untuk menerima parameter yang diluluskan oleh komponen lain, dan kemudian mendapatkan dan memulakan data melalui data dan fungsi kitaran hayat yang dipasang.

<template>
  <div>
    <ul>
      <li v-for="(item, index) in list" :key="index">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    keyword: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      list: []
    }
  },
  mounted() {
    // 根据关键词加载实际数据
    this.loadData()
  },
  methods: {
    loadData() {
      fetch('/data?q=' + this.keyword)
        .then(res => res.json())
        .then(data => {
          this.list = data.list
        })
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan prop untuk menerima parameter kata kunci dan mendapatkan serta memulakan data melalui fungsi loadData. Simpan data yang diperoleh dalam atribut senarai bagi contoh Vue, dan kemudian ikat terus atribut senarai dalam templat untuk melengkapkan pemaparan data sebenar.

Seterusnya, kita perlu menyedari kaitan antara komponen data dan komponen carian melalui komponen induk. Kaedah pelaksanaan khusus adalah untuk memantau perubahan dalam pembolehubah kata kunci dalam komponen induk dan menghantar pembolehubah kepada komponen data.

<template>
  <div>
    <SearchBox @search="onSearch" />
    <DataList :keyword="keyword" />
  </div>
</template>

<script>
import SearchBox from './SearchBox.vue'
import DataList from './DataList.vue'

export default {
  components: {
    SearchBox,
    DataList
  },
  data() {
    return {
      keyword: ''
    }
  },
  methods: {
    onSearch(keyword) {
      this.keyword = keyword
    }
  }
}
</script>

Dalam kod di atas, kami menggunakan dua komponen, SearchBox dan DataList. Dengar acara carian dalam Kotak Carian melalui acara @search, dan kemudian hantar kata kunci carian kepada komponen DataList. Dengan cara ini, apabila kata kunci carian berubah, perubahan atribut kata kunci dalam DataList akan dicetuskan, dengan itu mengemas kini hasil carian secara automatik.

3. Ringkasan

Melalui pengenalan di atas, kita dapat melihat bahawa melaksanakan fungsi carian dalam Vue.js bukanlah perkara yang sangat rumit. Gunakan arahan v-model untuk memantau peristiwa input kotak carian, dan kemudian gunakan API pengambilan untuk menghantar permintaan untuk mendapatkan hasil carian. Dari segi pemaparan data, kami boleh menggunakan idea pembahagian untuk mencapai pemaparan dinamik data sebenar. Akhir sekali, komponen data dan komponen carian dipautkan melalui komponen induk untuk mencapai fungsi carian yang lengkap.

Atas ialah kandungan terperinci Bagaimana untuk melakukan carian Lenovo dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!