vue.js (auch als Vue bekannt) ist ein beliebtes JavaScript -Framework zum Erstellen von Benutzeroberfl?chen. Die Kernbibliothek konzentriert sich nur auf Sichtschichten, sodass es einfach ist, in andere Bibliotheken oder vorhandene Projekte zu integrieren. In diesem Tutorial wird die Grundlagen von Vue vorgestellt und Sie durch das Erstellen einer einfachen Anwendung führen.

Schlüsselpunkte

• vue.js ist ein beliebtes JavaScript -Framework, das sich auf Sichtschichten konzentriert und leicht in andere Bibliotheken oder vorhandene Projekte integrieren kann. Sie k?nnen ein neues Vue -Projekt mit Node.js und Vue CLI erstellen, das eine strukturierte Vorlage für Ihre Anwendung bereitstellt.
• Komponenten sind Bausteine ??von VUE -Anwendungen, mit denen komplexe Benutzeroberfl?chen erstellt werden k?nnen. Vue bietet auch Anweisungen zum Hinzufügen von Interaktivit?t, bedingten Rendering und Schleifen durch Arrays zu Komponenten. Zu den besten Verfahren geh?rt es, Ihre Anwendung in kleine, wiederverwendbare Komponenten zu zerlegen und berechnete Eigenschaften für Berechnungen zu verwenden, die auf reaktionsschnellen Daten beruhen.
• Vermeiden Sie gemeinsame Fallstricke in VUE, wie z. Verwenden Sie immer das Schlüsselattribut mit V-für, um die Identit?t jedes Knotens zu verfolgen. Stellen Sie beim Erstellen von Anwendungen für Produktionsumgebungen sicher, dass Sie die Leistung optimieren.

Stellen Sie Ihre Umgebung

fest

Um VUE zu verwenden, müssen Sie Node.js auf Ihrem Computer installieren. Sie k?nnen es von der offiziellen Website herunterladen. Nach der Installation von node.js k?nnen Sie VUE mit dem Node Package Manager (NPM) installieren.

?ffnen Sie Ihren Terminal oder die Eingabeaufforderung und führen Sie den folgenden Befehl aus:

<code>npm install -g vue</code>

wird die neueste Version von Vue weltweit in Ihrem System installiert.

Erstellen Sie ein neues Vue -Projekt

Jetzt, da Sie Vue installiert haben, lassen Sie uns ein neues Projekt erstellen. Wir werden die Vue CLI verwenden, um eine neue Projektvorlage zu generieren. Installieren Sie zun?chst den Vue CLI, indem Sie den folgenden Befehl ausführen:

<code>npm install -g @vue/cli</code>

Erstellen Sie als n?chstes ein neues Projekt, indem Sie den folgenden Befehl ausführen:

<code>vue create my-vue-app</code>

Ersetzen Sie My-vue-App durch den Namen, den Sie für Ihr Projekt angeben m?chten. Die CLI fordert Sie auf, eine Voreinstellung auszuw?hlen. W?hlen Sie in diesem Tutorial die Standardvoreinstellung aus, um es einfach zu halten.

Navigieren Sie nach dem Erstellen des Projekts zum Projektordner:

<code>cd my-vue-app</code>

Starten Sie nun den Entwicklungsserver, indem Sie den folgenden Befehl ausführen:

<code>npm run serve</code>

startet ein lokaler Server unter http: // localhost: 8080/. ?ffnen Sie diese URL in Ihrem Browser, um Ihre neue Vue -App anzuzeigen.

Verst?ndnis der Struktur des VUE -Projekts

Nehmen wir uns einen Moment Zeit, um die Struktur des erzeugten Projekts zu verstehen. Die wichtigsten Ordner und Dateien, die Sie verwenden, sind:

• ?ffentlich: Enth?lt statische Verm?genswerte und Index.html -Dateien.
• SRC: Enth?lt den Quellcode der Anwendung, einschlie?lich Komponenten, Verm?genswerte und Major App.Vue -Dateien.
• src/main.js: Der Einstiegspunkt der Anwendung. Hier wird Vue importiert und Root Vue -Instanzen werden erstellt.
• src/app.vue: Hauptanwendungskomponente. Dort erstellen Sie das Layout und die Struktur Ihrer Anwendung.

Erstellen Sie Ihre erste Vue -Komponente

Komponenten sind Bausteine ??für VUE -Anwendungen. Sie sind wiederverwendbare Code -Snippets, die kombiniert werden k?nnen, um komplexe Benutzeroberfl?chen zu erstellen. Lassen Sie uns eine einfache Komponente zum Anzeigen von Nachrichten erstellen.

Erstellen Sie im Ordner SRC/Komponenten eine neue Datei mit dem Namen message.vue. Fügen Sie den folgenden Code hinzu:

<code>npm install -g vue</code>

Diese Komponente hat ein einzelnes Datenattribut namens Message. Die Vorlage zeigt den Wert dieses Attributs im Absatzelement an.

Verwenden wir diese Komponente nun in unserer Haupt -App.vue -Datei. Importieren Sie zun?chst die Nachrichtenkomponente oben im Skriptabschnitt:

<code>npm install -g @vue/cli</code>

Registrieren Sie die Komponente, indem Sie sie dem Komponentenobjekt hinzufügen:

<code>vue create my-vue-app</code>

Fügen Sie schlie?lich die Nachrichtenkomponente zur Vorlage hinzu:

<code>cd my-vue-app</code>

Ihre App.vue -Datei sollte jetzt so aussehen:

<code>npm run serve</code>

Speichern Sie ?nderungen und überprüfen Sie Ihren Browser. Sie sollten die Meldung "Hallo, Vue!" Sehen.

Interaktivit?t mit Vue -Anweisung

hinzufügen

vue enth?lt eine Reihe von Anweisungen, mit denen Sie Komponenten Interaktivit?t hinzufügen k?nnen. Lassen Sie uns eine einfache Gegenanwendung erstellen, um zu demonstrieren, wie Anweisungen verwendet werden.

Aktualisieren Sie die Meldung.Vue -Komponente mit dem folgenden Code:

<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<??>

Wir haben ein neues Datenattribut namens Counter und eine Methode namens Increment hinzugefügt. Die Inkrementmethode erh?ht den Wert des Z?hlers um 1. In der Vorlage haben wir einen Absatz hinzugefügt, um den Z?hlerwert und eine Schaltfl?che anzuzeigen, um die Inkrementmethode auszul?sen.

@Click -Anweisung wird verwendet, um eine Inkrementmethode an einen Klickereignis einer Schaltfl?che anzuh?ngen. Wenn die Schaltfl?che klickt, wird die Inkrementmethode aufgerufen und der Z?hlerwert erh?ht.

Speichern Sie ?nderungen und überprüfen Sie Ihren Browser. Sie sollten sehen, wie die Z?hleranwendung wie erwartet funktioniert.

Verwenden von bedingten Rendering und Schleifen

Vue enth?lt Anweisungen zum bedingten Rendering und Schleifen durch Arrays. Aktualisieren wir die Meldung.Vue -Komponente, um diese Funktionen zu demonstrieren.

Fügen Sie der Nachricht den folgenden Code hinzu.

import Message from './components/Message.vue';

Wir haben ein neues Datenattribut namens Nummern hinzugefügt, bei dem es sich um eine Reihe von ganzen Zahlen handelt. Wir haben auch einen Absatz hinzugefügt, der nur angezeigt wird, wenn der Z?hlerwert 5 oder mehr unter Verwendung der V-IF-Anweisung ist.

Die

v-für-Anweisungen wird verwendet, um das Nummern-Array zu durchschleifen und für jede Nummer ein Listenelement zu erstellen. Das Schlüsselattribut wird verwendet, um einen eindeutigen Schlüssel für jedes Listenelement bereitzustellen, das aus Leistungsgründen erforderlich ist.

Speichern Sie ?nderungen und überprüfen Sie Ihren Browser. Sie sollten sehen, dass die neue Funktion wie erwartet funktioniert.

vue Best Practices und gemeinsame Fallen sowie der Abschluss und den FAQ -Abschnitt werde ich aufgrund von Platzbeschr?nkungen nicht mehr erweitern, aber der Inhalt stimmt mit dem Originaltext überein. Bitte erledigen Sie nach Bedarf.

Das obige ist der detaillierte Inhalt vonVue.js Tutorial: Erste Schritte & 10 Best Practices. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!