Amalan komponen Vue: pembangunan komponen kotak carian

Amalan komponen Vue: pembangunan komponen kotak carian

Dengan perkembangan Internet, fungsi carian menjadi semakin biasa dalam pelbagai aplikasi. Untuk memudahkan pengguna menanyakan maklumat dengan pantas, kotak carian telah menjadi ciri standard setiap tapak web. Dalam artikel ini, kami akan membangunkan komponen kotak carian melalui Vue.js.

Komponen kotak carian kami perlu mempunyai fungsi berikut:

1. Kotak input boleh bertindak balas kepada input pengguna dalam masa nyata dan mencari apabila pengguna memasukkan
2. Pengguna boleh mengklik butang carian di sebelah kanan kotak input untuk mencari;
3. Pengguna boleh Lihat hasil carian di bawah kotak carian.

Untuk melaksanakan komponen ini, kita perlu melakukan langkah berikut:

1. Pasang perpustakaan Vue.js dan axios

Sebelum mula menulis komponen, kita perlu memasang perpustakaan Vue.js dan axios terlebih dahulu. Vue.js ialah rangka kerja progresif untuk membina antara muka pengguna, dan axios ialah perpustakaan untuk menghantar permintaan HTTP Kedua-duanya perlu dipasang melalui npm. Masukkan arahan berikut dalam terminal untuk memasang:

npm install vue axios --save

2. Buat komponen

Kami dengan cepat membina projek Vue melalui Vue CLI dan mencipta fail SearchBox.vue dalam direktori src/komponen, yang merupakan komponen kotak carian kami.

3. Menulis komponen SearchBox.vue

Dalam fail SearchBox.vue, kita perlu mengisytiharkan komponen dan menentukan templat, data, kaedah dan lain-lain dalam komponen. Berikut ialah contoh kod SearchBox.vue yang mudah:

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

Dalam kod di atas, kami mula-mula mencipta div kotak carian dalam templat dan meletakkan kotak input dan butang carian di dalamnya. Kami mengikat nilai kotak input kepada atribut searchText melalui v-model Apabila nilai kotak input berubah, nilai searchText juga akan berubah dengan sewajarnya.

Kami akan memanggil kaedah carian apabila pengguna memasukkan kandungan dan mengklik butang carian. Dalam kaedah carian, kami menggunakan perpustakaan axios untuk menghantar permintaan HTTP dan meminta antara muka bahagian belakang untuk mendapatkan data. Dalam contoh ini, kami menggunakan API maya yang disediakan oleh JSONPlaceholder. Kandungan yang dimasukkan oleh pengguna akan dihantar ke antara muka sebagai parameter pertanyaan, dan hasil yang dikembalikan oleh pertanyaan akan dipaparkan dalam ul di bawah.

Akhir sekali, kami juga menggunakan atribut berskop untuk mentakrifkan skop bagi gaya komponen Kotak Carian untuk menghalang gaya daripada menjejaskan komponen lain.

4. Menggunakan komponen SearchBox dalam komponen induk

Sekarang kita telah selesai menulis komponen SearchBox, mari lihat cara menggunakannya dalam komponen induk. Dalam komponen induk, kami hanya merujuk komponen dan lulus dalam sifat yang diperlukan. Contohnya:

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

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

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

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

Dalam kod di atas, kami memperkenalkan komponen SearchBox dan mendaftarkannya sebagai komponen dalam komponen induk. Gaya boleh ditetapkan melalui

.

Pada ketika ini, kami telah berjaya melaksanakan komponen kotak carian mudah. Apabila pengguna memasukkan kata kunci carian, kami akan menanyakan data yang sepadan daripada antara muka belakang dan memaparkan hasil pertanyaan kepada pengguna dalam masa nyata.

Kesimpulan

Vue.js ialah salah satu rangka kerja bahagian hadapan yang paling popular pada masa ini Ciri pengaturcaraan berasaskan komponen membolehkan kami membangunkan pelbagai aplikasi yang kompleks dengan lebih cekap dan mudah. Dalam artikel ini, kami melaksanakan komponen kotak carian melalui Vue.js Dengan membuat seketika komponen dan berkomunikasi dengan komponen induk-anak, kami melaksanakan pengikatan dua hala data, penyebutan kaedah dan pencetus peristiwa. Kuasai pengetahuan asas Vue.js ini dan saya percaya anda pada asasnya telah menguasai cara membangunkan komponen Vue yang mudah.

Atas ialah kandungan terperinci Amalan komponen Vue: pembangunan komponen kotak carian. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!