Erste Schritte mit der VUE3-Entwicklung: Verwenden von Vue.js zum dynamischen Filtern von Datenlisten

Vue.js ist zur tragenden Säule der modernen Webentwicklung geworden. Es handelt sich um ein leichtes JavaScript-Framework, das Datenbindungs- und Komponentisierungsfunktionen bietet und Entwicklern die Erstellung interaktiver Anwendungen erleichtert. Und jetzt ist auch die neue Version von Vue.js, VUE3, erschienen. In diesem Artikel werden wir VUE3 verwenden, um anhand von Beispielen vorzustellen, wie die dynamische Filterung von Datenlisten in Vue.js implementiert wird.

1. Vorbereitung

Bevor Sie mit diesem Tutorial beginnen, müssen Sie die CLI-Tools für Node.js und Vue installieren. Sie können die Version mit dem folgenden Befehl überprüfen:

 node -v
 npm -v

Wenn Sie derzeit eine niedrigere Version von Node.js verwenden, können Sie die neueste Version von der offiziellen Website von Node.js herunterladen. Nachdem die Installation abgeschlossen ist, können Sie den folgenden Befehl in der Befehlszeile verwenden, um Vue CLI zu installieren:

npm install -g @vue/cli

2. Erstellen Sie ein Vue.js-Projekt

Geben Sie in der Befehlszeile das Verzeichnis ein, in dem sich das Projekt befindet, das Sie erstellen möchten Suchen Sie es und führen Sie den folgenden Befehl aus:

vue create vue-demo
cd vue-demo

Nachdem Sie den obigen Befehl ausgeführt haben, wird eine interaktive Befehlszeilenschnittstelle angezeigt, mit der Sie die Projektkonfiguration anpassen können. Sie können wählen, ob Sie die Konfiguration manuell vornehmen oder die Standardkonfiguration verwenden möchten. Bitte wählen Sie nach Ihren eigenen Bedürfnissen.

3. Erstellen Sie die Datenlistenkomponente

Standardmäßig generiert Vue CLI eine Hello World-Anwendung. Wir müssen eine neue Komponente erstellen, um die Datenliste anzuzeigen. Erstellen Sie eine neue Komponentendatei List.vue im Verzeichnis src/components und fügen Sie dann den folgenden Code zur Komponente hinzu:

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

Im obigen Code definieren wir eine Array-Liste in der Komponente, um die anzuzeigenden Daten zu speichern. Sie können es durch Ihre eigene Datenquelle ersetzen. Anschließend verwenden wir das V-Modell, um die Daten des Eingabefelds an das Suchattribut in der Komponente zu binden. Im berechneten Attribut definieren wir ein berechnetes Attribut filteredList, das die Daten im Listenarray basierend auf dem Suchattribut filtert.

4. Komponenten verwenden

Importieren Sie in der App.vue-Datei die Komponentenliste und fügen Sie den folgenden HTML-Code in die Vorlage ein:

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

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

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

Im obigen Code haben wir zuerst die Listenkomponente importiert und dann die Komponente in der Datei deklariert Komponentenoptionen. In der Vorlage haben wir der Seite die Listenkomponente hinzugefügt. Wie erwartet sollten Sie nun Ihre Anwendung im Browser sehen und die Eingabefelder, die auf die Filterung der Datenliste in Echtzeit reagieren.

Zusammenfassung

In diesem Artikel zeigen wir Ihnen, wie Sie mit Vue.js und VUE3 eine dynamische Datenliste erstellen. Anhand dieses Beispiels haben Sie gelernt, wie Sie die bidirektionale Datenbindungsfunktionalität und die berechneten Eigenschaften von Vue zum Filtern von Daten verwenden. Obwohl dieses Beispiel relativ einfach ist, ist es ein guter Ausgangspunkt für Sie, um Vue.js zu beherrschen. In Ihrem nächsten Projekt können Sie diese Vorlage nutzen, um komplexere Anwendungen zu erstellen.

Das obige ist der detaillierte Inhalt vonErste Schritte mit der VUE3-Entwicklung: Verwenden von Vue.js zum dynamischen Filtern von Datenlisten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!