Ein Anfänger -Leitfaden für Vue 3

Dieses Tutorial bietet ein grundlegendes Verständnis von Vue.js, das sowohl für Vue 3 (in diesem Beispiel verwendet) als auch frühere Versionen anwendbar ist. Wir werden wichtige Aspekte des Erstellens einer VUE -Anwendung abdecken, einschließlich:

• Erstellen einer VUE -Anwendung mit dem Vue Cli.
• Rendering -Listen mit v-for.
• implementiert das bedingte Rendering mit v-if, v-else-if und v-else.
• dynamische CSS mit der :class -Richtlinie verwenden.
• Umgang mit Benutzereingaben und Ereignissen.
• Methoden und berechnete Eigenschaften anwenden.
• Verwenden von HTML -Attributbindung mit v-bind.

Schlüsselkonzepte:

• VUE CLI -Setup: Die Vue CLI rationalisiert die Projekterstellung, vereinfachte die Konfiguration und ermöglicht die Auswahl der benutzerdefinierten Funktionen.
• List -Rendering (v-for): effizient dynamische Listen rendert und die DOM -Leistung mit eindeutigen Tasten optimieren (unter Verwendung des Attributs :key).
• Bedingte Rendering: Zeigt dynamisch den Inhalt basierend auf Bedingungen mit v-if, v-else-if und v-else.
an
• Zwei-Wege-Datenbindung (v-model): entscheidend für die Behandlung von Benutzereingaben und die Bereitstellung von Echtzeit-UI-Feedback.
• Berechnete Eigenschaften: Führen Sie Datentransformationen und Berechnungen durch, ohne die Originaldaten direkt zu ändern, wodurch die Reaktivität verbessert wird.
• Dynamisches CSS (:class): Anwendung von CSS -Klassen basierend auf dem Komponentenzustand, wodurch dynamisches Styling ermöglicht wird.

Erstellen der Anwendung mit Vue Cli:

Die Vue CLI vereinfacht das Projekt -Setup. Installieren wir es:

npm i -g @vue/cli

(Alternativ verwenden Sie yarn global add @vue/cli.)

Erstellen Sie ein neues Projekt:

vue create your-project-name

Wählen Sie "Manuell Features auswählen" und wählen Sie nur Babel für dieses Tutorial aus. Wählen Sie Vue 3 aus und platzieren Sie die Konfiguration in dedizierten Dateien. Speichern Sie die Voreinstellung nicht.

Abbildung 1: Vue CLI Willkommensbildschirm

Abbildung 2: Konfigurieren eines Vue -Projekts mit Vue cli

Abbildung 3: Wählen Sie eine Vue -Version in Vue cli

Dies schafft eine Projektstruktur (siehe Abbildung 4). Löschen Sie HelloWorld.vue aus src/components und entfernen Sie seine Referenzen aus App.vue.

Abbildung 4: Unsere Vue 3 -Projektstruktur

Anwendungsaufbau:

Ersetzen Sie den Inhalt von App.vue durch Folgendes:

npm i -g @vue/cli

Dies richtet einen einfachen Titel ein. In den folgenden Abschnitten werden darauf nach und nach darauf aufbauen. (Weitere Code -Ausschnitte werden in nachfolgenden Abschnitten inkrementell erstellt.)

List -Rendering:

ein tasks -Array hinzu der data() -Methode in App.vue:

hinzufügen

vue create your-project-name

rendern die Liste mit v-for:

<template>
  <h1 id="title">{{ title }}</h1>
</template>

<🎜>

Das Attribut :key ist für die Leistung von entscheidender Bedeutung.

Abbildung 5: Listenreverung in VUE mit der V-für-Anweisung

(Die verbleibenden Abschnitte werden in diesem inkrementellen Stil fortgesetzt und liefert Code -Snippets und Erklärungen für jede Funktion - bedingte Renderung, Benutzereingabe, Methoden, Ereignisse, berechnete Eigenschaften, Attributbindung und dynamische CS - ähnlich dem Original Eingabe, aber mit einer verbesserten Formatierung und klareren Erklärungen. 🎜>

Das obige ist der detaillierte Inhalt vonEin Anfänger -Leitfaden für Vue 3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!