Einführungs-Tutorial zur VUE3-Entwicklung: Verwendung von Vue.js-Komponenten zum Kapseln von Datenfiltern

Vue.js ist ein beliebtes JavaScript-Framework und Vue 3 ist die neueste Version. In diesem Artikel wird erläutert, wie Sie Vue.js-Komponenten zum Kapseln von Datenfiltern verwenden, um Anfängern ein besseres Verständnis des Entwicklungsprozesses von Vue 3 zu ermöglichen.

Schritt 1: Vue.js installieren
Um Anwendungen mit Vue.js zu entwickeln, müssen wir zuerst Vue.js installieren. Sie können npm oder Yarn verwenden, um Vue.js zu installieren. Geben Sie zur Installation den folgenden Befehl in das Terminal ein.

npm install vue

oder

yarn add vue

Schritt 2: Erstellen Sie eine Vue.js-Anwendung
Nach der Installation von Vue.js müssen Sie eine neue Anwendung erstellen. Anwendungen können mit dem Vue CLI-Tool erstellt werden. Geben Sie im Terminal den folgenden Befehl ein.

vue create my-app

Dadurch wird eine neue Anwendung namens my-app erstellt. Beim Erstellen einer Anwendung können wir auch bestimmte Konfigurationseinstellungen verwenden. Sobald das Projekt erstellt ist, verwenden Sie den Befehl cd, um das Projekt aufzurufen.

cd my-app

Jetzt können wir das Projekt mit dem folgenden Befehl starten.

npm run serve

oder

yarn serve

Jetzt wurde die Anwendung erfolgreich gestartet. Öffnen Sie den Browser und geben Sie http://localhost:8080 in die Adressleiste ein, um darauf zuzugreifen.

Schritt 3: Erstellen Sie die Datenfilterkomponente
Sobald wir eine Vue.js-Anwendung haben, können wir mit der Erstellung der Datenfilterkomponente beginnen. Ein Datenfilter empfängt Daten und filtert sie basierend auf Bedingungen. Wir werden das folgende Codebeispiel verwenden, um eine Datenfilterkomponente zu erstellen.

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

In diesem Codebeispiel definieren wir zunächst eine Vorlage, die ein Eingabefeld und eine Liste enthält. Wir definieren außerdem ein Datenattribut namens filterText, das die vom Benutzer eingegebenen Filterkriterien speichert.

Als nächstes definieren wir eine berechnete Eigenschaft namens filteredData, die Daten basierend auf Filterbedingungen filtert. Diese berechnete Eigenschaft akzeptiert die Dateneigenschaft (definiert im Requisitenobjekt) als Eingabe und übergibt sie an die Filterfunktion. In dieser berechneten Eigenschaft verwenden wir die Methode filter(), um die Daten zu filtern und basierend auf dem Namensfeld abzugleichen.

Abschließend legen wir die Komponente als Standardexport fest und verwenden sie in der übergeordneten Komponente.

Schritt 4: Datenfilterkomponente einführen
Wir haben nun eine Datenfilterkomponente erstellt, die wir in unsere übergeordnete Komponente einführen können. Im folgenden Beispielcode demonstrieren wir die Verwendung der Datenfilterkomponente.

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

In diesem Beispiel erstellen wir ein Datenarray namens „items“ und übergeben es an die Dateneigenschaft der FilterableList-Komponente. Als nächstes importieren wir die FilterableList-Komponente in die übergeordnete Komponente und legen sie als Eigenschaft des Komponentenobjekts fest. Schließlich verwenden wir die FilterableList-Komponente in der Vorlage.

Schritt fünf: Führen Sie die App aus
Da wir nun eine grundlegende Vue.js-Datenfilterkomponente fertiggestellt haben, können wir die App neu starten, um zu sehen, wie sie funktioniert. Geben Sie den folgenden Befehl in das Terminal ein:

npm run Serve

oder

Yarn Serve

Öffnen Sie dann http://localhost:8080 im Browser. Sie sollten eine Reihe von Projekten und ein Filtereingabefeld sehen. Geben Sie etwas ein und die Liste wird basierend auf dem von Ihnen eingegebenen Wert gefiltert.

Fazit
In diesem Beitrag haben wir gelernt, wie man Datenfilter mit Vue.js und Komponenten erstellt. Wir haben die komponentenbasierte Architektur und die berechneten Eigenschaften von Vue.js verwendet, um die Filterfunktion zu implementieren. Dies ist eine sehr grundlegende Vue.js-Komponente, die Sie je nach Bedarf verbessern und erweitern können. Wenn Sie ein Vue.js-Anfänger sind, ist dies ein guter Ausgangspunkt, um den Vue.js-Entwicklungsprozess besser zu verstehen.

Das obige ist der detaillierte Inhalt vonEinführungs-Tutorial zur VUE3-Entwicklung: Verwendung von Vue.js-Komponenten zum Kapseln von Datenfiltern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!