Tutorial pengenalan pembangunan VUE3: Menggunakan komponen Vue.js untuk merangkum penapis data

Vue.js ialah rangka kerja JavaScript yang popular dan Vue 3 ialah versi terbaharunya. Artikel ini akan memperkenalkan cara menggunakan komponen Vue.js untuk merangkum penapis data untuk membantu pemula memahami dengan lebih baik proses pembangunan Vue 3.

Langkah 1: Pasang Vue.js
Untuk menggunakan Vue.js untuk membangunkan aplikasi, kami perlu memasang Vue.js terlebih dahulu. Anda boleh menggunakan npm atau benang untuk memasang Vue.js. Masukkan arahan berikut dalam terminal untuk memasang.

npm install vue

atau

yarn add vue

Langkah 2: Buat aplikasi Vue.js
Selepas memasang Vue.js, Anda perlu membuat aplikasi baru. Aplikasi boleh dibuat menggunakan alat Vue CLI. Masukkan arahan berikut dalam terminal.

vue create my-app

Ini akan mencipta aplikasi baharu yang dipanggil my-app. Semasa membuat aplikasi, kami juga boleh memilih untuk menggunakan tetapan konfigurasi tertentu. Setelah projek dibuat, gunakan arahan cd untuk memasuki projek.

cd my-app

Sekarang kita boleh memulakan projek menggunakan arahan berikut.

npm run serve

atau

yarn serve

Kini permohonan telah dimulakan dengan jayanya. Buka penyemak imbas dan masukkan http://localhost:8080 dalam bar alamat untuk mengakses.

Langkah 3: Buat komponen penapis data
Setelah kami mempunyai aplikasi Vue.js, kami boleh mula mencipta komponen penapis data. Penapis data akan menerima data dan menapisnya berdasarkan syarat. Kami akan menggunakan contoh kod berikut untuk mencipta komponen penapis data.

<template>
  <div>
    <div>
      <label>Filter:</label>
      <input type="text" v-model="filterText" />
    </div>
    <ul>
      <li v-for="item in filteredData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      filterText: '',
    };
  },
  computed: {
    filteredData() {
      const filterText = this.filterText.toLowerCase();
      return this.data.filter(item => {
        return item.name.toLowerCase().includes(filterText);
      });
    },
  },
};
</script>

Dalam contoh kod ini, kami mula-mula menentukan templat yang mengandungi medan input dan senarai. Kami juga mentakrifkan atribut data yang dipanggil filterText, yang menyimpan kriteria penapis yang dimasukkan oleh pengguna.

Seterusnya, kami mentakrifkan sifat terkira yang dipanggil filteredData yang menapis data berdasarkan kriteria penapis. Sifat yang dikira ini menerima sifat data (ditakrifkan dalam objek props) sebagai inputnya dan menghantarnya ke dalam fungsi penapis. Dalam sifat yang dikira ini, kami menggunakan kaedah penapis() untuk menapis data dan padanan berdasarkan medan nama.

Akhir sekali, kami menetapkan komponen sebagai eksport lalai dan menggunakannya dalam komponen induk.

Langkah 4: Perkenalkan komponen penapis data
Kami kini telah mencipta komponen penapis data yang boleh kami perkenalkan ke dalam komponen induk kami. Kami menunjukkan cara menggunakan komponen penapis data dalam kod sampel di bawah.

<template>
  <div>
    <filterable-list :data="items" />
  </div>
</template>

<script>
import FilterableList from './FilterableList.vue';

export default {
  components: {
    FilterableList,
  },
  data() {
    return {
      items: [
        { id: 1, name: 'apple' },
        { id: 2, name: 'banana' },
        { id: 3, name: 'pear' },
      ],
    };
  },
};
</script>

Dalam contoh ini, kami mencipta tatasusunan data yang dipanggil item dan menyerahkannya kepada sifat data komponen FilterableList. Seterusnya, kami mengimport komponen FilterableList ke dalam komponen induk dan menetapkannya sebagai harta objek komponen. Akhir sekali, kami menggunakan komponen FilterableList dalam templat.

Langkah 5: Jalankan aplikasi
Memandangkan kami telah melengkapkan komponen penapis data asas Vue.js, kami boleh memulakan semula aplikasi untuk melihat ia berkesan. Taip arahan berikut dalam terminal:

npm run serve

atau

yarn serve

dan buka http://localhost:8080 dalam penyemak imbas anda , anda sepatutnya melihat set item dan kotak input penapis. Masukkan apa sahaja dan senarai akan ditapis berdasarkan nilai yang anda masukkan.

Kesimpulan
Dalam artikel ini, kami mempelajari cara membuat penapis data menggunakan Vue.js dan komponen. Kami menggunakan seni bina komponen Vue.js dan sifat pengiraan untuk melaksanakan fungsi penapisan. Ini adalah komponen Vue.js yang sangat asas yang boleh anda perbaiki dan lanjutkan mengikut keperluan anda. Jika anda seorang pemula Vue.js, ini adalah titik permulaan yang bagus untuk membantu anda memahami proses pembangunan Vue.js dengan lebih baik.

Atas ialah kandungan terperinci Tutorial pengenalan pembangunan VUE3: Menggunakan komponen Vue.js untuk merangkum penapis data. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!