Vue.js Tutorial: Erste Schritte & 10 Best Practices

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:

<code class="language-vue"><template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

</code>

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.

<code class="language-javascript">import Message from './components/Message.vue';</code>

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!