Bermula dengan Pembangunan VUE3: Menggunakan Vue.js untuk Menapis Senarai Data Secara Dinamik

Vue.js telah menjadi teras utama pembangunan web moden. Ia adalah rangka kerja JavaScript ringan yang menyediakan keupayaan pengikatan data dan komponen, menjadikannya lebih mudah bagi pembangun untuk membina aplikasi interaktif. Kini, versi baharu Vue.js, VUE3, juga telah dikeluarkan. Dalam artikel ini, kami akan menggunakan VUE3 untuk memperkenalkan melalui contoh cara melaksanakan penapisan dinamik senarai data dalam Vue.js.

1. Persediaan

Sebelum memulakan tutorial ini, anda perlu memasang alatan CLI Node.js dan Vue. Anda boleh menyemak versi melalui arahan berikut:

 node -v
 npm -v

Jika anda sedang menggunakan versi Node.js yang lebih rendah, anda boleh memuat turun versi terkini daripada tapak web rasmi Node.js. Selepas pemasangan selesai, anda boleh menggunakan arahan berikut dalam baris arahan untuk memasang Vue CLI:

npm install -g @vue/cli

2. Buat projek Vue.js

Dalam baris arahan, masukkan projek anda ingin mencipta direktori dan laksanakan arahan berikut:

vue create vue-demo
cd vue-demo

Selepas melaksanakan arahan di atas, antara muka baris arahan interaktif akan muncul, membolehkan anda menyesuaikan konfigurasi projek. Anda boleh memilih untuk mengkonfigurasi secara manual atau menggunakan konfigurasi lalai. Sila pilih mengikut keperluan anda sendiri.

3. Bina komponen senarai data

Secara lalai, Vue CLI akan menjana aplikasi Hello World. Kita perlu membina komponen baharu untuk memaparkan senarai data. Cipta fail komponen baharu List.vue dalam direktori src/components, dan kemudian tambah kod berikut dalam komponen:

<template>
  <div>
    <input type="text" v-model="search">
    <ul>
      <li v-for="item in filteredList">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: ["apple", "banana", "orange", "grape"],
      search: ""
    };
  },

  computed: {
    filteredList() {
      return this.list.filter(item => {
        return item.toLowerCase().includes(this.search.toLowerCase());
      });
    }
  }
};
</script>

Dalam kod di atas, kami mentakrifkan senarai tatasusunan dalam komponen untuk menyimpan data ke dipaparkan. Anda boleh menggantikannya dengan sumber data anda sendiri. Kemudian, kami menggunakan v-model untuk mengikat data kotak input kepada atribut carian dalam komponen. Dalam atribut yang dikira, kami mentakrifkan atribut terkira filteredList, yang akan menapis data dalam tatasusunan senarai berdasarkan atribut carian.

4. Gunakan komponen

Dalam fail App.vue, import Senarai komponen dan tambahkan HTML berikut dalam templat:

<template>
  <div id="app">
    <List />
  </div>
</template>

<script>
import List from "./components/List.vue";

export default {
  components: {
    List
  }
};
</script>

Dalam kod di atas, kita mula-mula mengimport Komponen Senarai dan kemudian mengisytiharkan komponen dalam pilihan komponen. Dalam templat, kami menambahkan komponen Senarai pada halaman. Seperti yang dijangkakan, anda kini seharusnya melihat aplikasi anda dalam penyemak imbas dan kotak input bertindak balas terhadap penapisan senarai data dalam masa nyata.

Ringkasan

Dalam artikel ini, kami mengajar cara membina senarai data dinamik menggunakan Vue.js dan VUE3. Melalui contoh ini, anda mempelajari cara menggunakan fungsi pengikatan data dua hala Vue dan sifat yang dikira untuk menapis data. Walaupun contoh ini agak mudah, ia adalah titik permulaan yang baik untuk anda menguasai Vue.js. Dalam projek anda yang seterusnya, anda boleh memanfaatkan templat ini untuk membina aplikasi yang lebih kompleks.

Atas ialah kandungan terperinci Bermula dengan Pembangunan VUE3: Menggunakan Vue.js untuk Menapis Senarai Data Secara Dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!