Vorherige

Nächste

Erste Schritte mit Vue.js

Abgeschlossen

Um Vue.js zu verwenden, müssen Sie das Framework installieren, eine Vue-App erstellen und sie dann auf der Seite registrieren. Die Registrierung teilt der Seite mit, wie die App verwendet werden soll.

Lassen Sie uns loslegen!

Hinzufügen von Vue.js zu einer Seite

Sie können Vue.js auf verschiedene Arten zu einer Anwendung hinzufügen. In diesem Modul fügen Sie ein script-Element hinzu, um Vue aus einem Content Delivery Network (CDN) zu importieren. Mithilfe eines CDN können Sie Vue zu vorhandenen Anwendungen hinzufügen, ohne sie neu schreiben zu müssen.

Zum Hinzufügen von Vue zu einer Seite mithilfe eines CDN fügen Sie der Seite das folgende script-Element hinzu.

<script src="https://unpkg.com/vue@next"></script>

Dieses Element weist den Browser an, die Skriptdatei auszuführen, auf welche die src-Anweisung verweist. Die Vue-APIs sind verfügbar, sobald das Skript gestartet wurde.

Erstellen einer App

Der erste Schritt beim Erstellen einer Vue.js-Anwendung besteht im Erstellen eines App-Objekts. Die App ist der zentrale Speicherort für alle Daten und Methoden, die Ihre Anwendung verwendet. Obwohl das App-Objekt bestimmte Konventionen befolgt, ist es im Kern ein JavaScript-Objekt.

Um eine Vue-App zu erstellen, rufen Sie die createApp()-Methode auf.

const App = Vue.createApp({
    // methods and content go here
});

Hinzufügen von Daten

Nachdem Sie Ihre App erstellt haben, können Sie nun Eigenschaften hinzufügen, die ihrer App mehr Funktionen geben. Eine wichtige Methode für die meisten Apps ist hierbei data(). Vue.js verwendet diese Methode für den Zugriff auf alle Informationen, die Sie für Ihre Anwendung verfügbar machen müssen.

Hinweis

Sie verwenden die data()-Methode in diesem Modul.

Alle Eigenschaften innerhalb des Objekts, die von data() zurückgegeben werden, sind dynamischer Natur. Vue.js erkennt automatisch alle Wertänderungen. Anschließend werden die entsprechenden Bereiche der Anzeige mit den aktualisierten Informationen upgedatet und aktualisiert.

Erstellen eines Datenobjekts

Vue.js ruft die data()-Methode auf. Als Rückgabewert erwartet Vue.js ein JavaScript-Objekt.

Im folgenden Beispiel enthält das zurückgegebene Objekt die Eigenschaften firstName und lastName.

// a sample app object
const App = Vue.createApp({
    data() {
        return {
            firstName: 'Christopher',
            lastName: 'Harrison'
        };
    }
});

An diesem Punkt werden die Daten verfügbar gemacht, damit Sie für den Benutzer angezeigt werden können.

Einbinden der App

Das erstellte App-Objekt muss bereit eingebunden werden, bevor es von Vue.js verwendet werden kann. Beim Einbinden der App legen Sie Bereich der Seite fest, den die App steuert. So kann die App Informationen oder sogar HTML-Elemente anzeigen.

Wenn Sie die Anwendung einbinden möchten, verweisen Sie auf die id eines gewöhnlichen HTML-Elements.

<!-- the HTML element which will host our app -->
<div id='app'>
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>

Zur Laufzeit wird der Inhalt des id= 'app'-Elements dann durch den Inhalt der Vue.js-Anwendung ersetzt.

Anzeigen von Daten

Zum Anzeigen von Daten auf der Seite verwenden Sie die {{ }}-Syntax, auch als Handlebars bezeichnet. Innerhalb der {{ }}-Syntax können Sie den beliebigen JavaScript-Code bereitstellen, der für den Zugriff auf die anzuzeigenden Informationen erforderlich ist.

Die zuvor erstellte data()-Funktion gibt ein Objekt zurück. Vue.js macht das Objekt automatisch verfügbar, der Aufruf von data() ist also nicht nötig.

Wenn Sie den Vornamen anzeigen möchten, können Sie die {{ firstName }}-Syntax verwenden. Das folgende Beispiel zeigt die vollständige Anwendung, die lastName und firstName anzeigen kann.

<!-- the HTML element which will host our app -->
<div id='app'>
    {{ lastName }}, {{ firstName }}
</div>

<script src="https://unpkg.com/vue@next"></script>
<script>
    const App = Vue.createApp({
        data() {
            return {
                firstName: 'Christopher',
                lastName: 'Harrison'
            };
        }
    });
    // Registering and mounting our app
    App.mount('#app');
</script>

Hinweis

Die {{ }}-Syntax funktioniert nur innerhalb von Elementen, die von Vue gesteuert werden. Die Syntax funktioniert entweder innerhalb einer Komponente oder innerhalb des von Vue bereitgestellten HTML-Elements.

Weiter