Vue.js hat sich seinen Ruf als fortschrittliches JavaScript-Framework verdient. Sie können Vue.js verwenden, um Single-Page-Anwendungen (SPAs) zu erstellen oder spezifische Benutzeroberflächen zu entwickeln.

Hier lernen Sie die Grundlagen von Vue.js kennen, einschließlich der Erstellung einer Vue-Komponente und der Arbeit mit dem Optionsobjekt zum Rendern dynamischer Daten.

Vue.js ist einer der Die beliebtesten JavaScript-Frameworks. Um mit Vue zu beginnen, und um es Ihrer HTML-Seite hinzuzufügen, kopieren Sie das Skript-Tag unten und fügen Sie es in den Head-Abschnitt ein:

<SkriptQuelle="">Skript>

Die Verwendung des CDN-Links ist eine hervorragende Option, um statisches HTML zu verbessern oder Ihrer Anwendung Funktionen hinzuzufügen.

Sie müssen Vue.js jedoch über npm installieren, um mehr seiner erweiterten Funktionen zu nutzen, wie z. B. die Single-File-Component (SFC)-Syntax, die beim Erstellen vollwertiger Vue-Apps hilfreich sind.

Erstellen einer Vue-Anwendung

Der Zugriff auf die Vue-Bibliothek über den CDN-Link stellt ein Vue-Objekt bereit, einschließlich der .createApp() Methode.

Wie der Name schon sagt, können Sie mit dieser Methode eine Vue-App erstellen.

Zum Beispiel:

html>
<htmllang="de">
<Kopf>
<Titel>Vue-AppTitel>
<SkriptQuelle=" https://unpkg.com/vue@3/dist/vue.global.js">Skript>
Kopf>
<Körper>
<Skript>
 const app = Vue.createApp();
Skript>
Körper>
html>

Hier wird die erstellte App in der gespeichert App Variable. Nachdem Sie die App-Instanz erstellt haben, müssen Sie sie mithilfe von rendern .montieren() Methode. Diese Methode gibt an, wo die App in der bereitgestellt werden soll Dokumentobjektmodell (DOM).

So:

html>
<htmllang="de">
<Kopf>
<Titel>Vue-AppTitel>
<SkriptQuelle=" https://unpkg.com/vue@3/dist/vue.global.js">Skript>
Kopf>
<Körper>
<divAusweis="App">div>
<Skript>
 const app = Vue.createApp();
 app.mount("#app");
Skript>
Körper>
html>

Um Vues zu verwenden .montieren() -Methode müssen Sie ein DOM-Element oder einen Selektor als Argument angeben. In diesem Beispiel haben wir die Vue-App mithilfe des DOM-Elements mit dem gemountet #app AUSWEIS.

Es ist wichtig zu beachten, dass die Vue-App nur Elemente steuert, die mit einem angegeben wurden Ausweis. Außerdem hat die App keine Kontrolle über irgendetwas außerhalb dieser Elemente, einschließlich Klickereignisse oder andere Interaktivität.

Der letzte Schritt beim Erstellen einer Vue-Anwendung ist der Aufruf der .montieren() -Methode nach Abschluss aller App-Konfigurationen.

Das Optionsobjekt in Vue

In Vue.js verwenden Sie die Optionen Objekt als Konfigurationsobjekt, um eine Vue-Instanz oder -Komponente zu erstellen.

Es ist ein wesentlicher Bestandteil einer Vue-Anwendung, da es das Verhalten und die Daten für jede Instanz oder Komponente definiert. Der Optionen Objekt besteht aus mehreren Eigenschaften, die verschiedene Aspekte der Instanz oder Komponente darstellen.

Einige der häufig verwendeten Eigenschaften in der Optionen Objekt sind:

• Daten: Diese Eigenschaft definiert das Datenobjekt für die Vue-Anwendungen. Es ist eine Funktion, die ein Objekt zurückgibt, das die Dateneigenschaften und ihre Anfangswerte enthält.
• Methoden: Der Methoden Die Eigenschaft des Options-Objekts enthält wichtige Funktionen zum Aktivieren des dynamischen Renderns.
• Vorlage: Diese Eigenschaft definiert die HTML-Vorlage für die Vue-Instanz oder -Komponente. Es ist ein String, der das HTML-Markup enthält, das der Template-Compiler von Vue parsen kann.

Beachten Sie, dass der Vue-Compiler bei Verwendung einer Vorlageneigenschaft nur Inhalte rendert, die in der Vorlage definiert sind.

Hier ist ein Beispiel für eine Vue-App mit der Daten, Methoden, Und Vorlage Eigenschaften:

html>
<htmllang="de">
<Kopf>
<Titel>Vue-AppTitel>
<SkriptQuelle=" https://unpkg.com/vue@3/dist/vue.global.js">Skript>
Kopf>
<Körper>
<divAusweis="App">
<h1 @klicken="umgekehrte Nachricht" >{{Text}}h1>
div>
<Skript>
konst app = Vue.createApp({
// Vorlage: '
Willkommen bei Ihrer Vue-App
',
 Daten() {
zurückkehren {
 Text: "Dies ist Ihre Vue-App"
 };
 },
 Methoden: {
 reverseMessage () {
Das.text = Das.text.split('').reverse().join('')
 }
 }
 });
App.montieren("#app");
Skript>
Körper>
html>

Dieses Programm stellt eine einfache Vue-App dar, die den Text „Dies ist Ihre Vue-App“ mithilfe von Textinterpolation anzeigt und es Benutzern ermöglicht, darauf zu klicken, um die Nachricht umzukehren.

Der Daten() Die Funktion gibt ein Objekt mit einer einzigen aufgerufenen Eigenschaft zurück Text. Der @klicken Direktive wird verwendet, um a anzuhängen reverseMessage() Methode zum Element, das die umkehrt Text Eigentum.

Beim Ausführen dieses Programms sieht die erstellte Vue-App folgendermaßen aus:

Ein Klick auf den Text kehrt ihn um.

Beachten Sie, dass das Programm die Vorlageneigenschaft auskommentiert hat, damit die Inhalte in der Vue-App gerendert werden können. Ohne Kommentar zeigt diese Vue-App nur eine Vorlageneigenschaft an:

Es gibt andere Eigenschaften wie Requisiten Und berechnet, die Sie auch verwenden können, um leistungsstarke und flexible Vue-Anwendungen zu erstellen, wenn Sie das Optionsobjekt konfigurieren.

Textinterpolation in Vue

Die Textinterpolation in Vue ist eine Funktion, mit der Sie Daten dynamisch an HTML-Elemente binden können. Mit anderen Worten, Sie können den Wert der Dateneigenschaften einer Vue-Instanz direkt im HTML-Code ausgeben.

Um eine Textinterpolation in Vue zu erreichen, müssen Sie den Namen der Dateneigenschaft in doppelte geschweifte Klammern setzen. Vue interpretiert den Inhalt innerhalb der doppelten geschweiften Klammern als JavaScript-Ausdrücke und ersetzt sie weiter durch ihren resultierenden Wert.

Zum Beispiel:

html>
<htmllang="de">
<Kopf>
<Titel>Vue-AppTitel>
<SkriptQuelle=" https://unpkg.com/vue@3/dist/vue.global.js">Skript>
Kopf>
<Körper>
<divAusweis="App">
<h1>{{ Nachricht }}h1>
<P>Willkommen {{ Name }}P>
div>
<Skript>
 const app = Vue.createApp({
 Daten() {
 zurückkehren {
 Nachricht: "Dies ist Ihre Vue-App.",
 Name: "Edel",
 };
 },
 });
 app.mount("#app");
Skript>
Körper>
html>

In diesem Beispiel bindet die Textinterpolation die Nachricht Und Name Eigenschaften des in der Vue-Instanz zurückgegebenen Datenobjekts an die Und Elemente. Sobald die Vue-Anwendung bereitgestellt wird, zeigt sie die Werte der Nachricht Und Name Eigenschaften im HTML an ihren jeweiligen Positionen.

Sie können auch das Ergebnis eines Methodenaufrufs anzeigen oder grundlegende JavaScript-Operationen innerhalb der doppelten geschweiften Klammern ausführen:

html>
<htmllang="de">
<Kopf>
<Titel>Vue-AppTitel>
<SkriptQuelle=" https://unpkg.com/vue@3/dist/vue.global.js">Skript>
Kopf>
<Körper>
<divAusweis="App">
<h1>{{ Nachricht }}h1>
<h3>Willkommen {{ name.toUpperCase() }}h3>
<P>Ihr Name enthält {{ nameLength() }} Buchstaben.P>
div>
<P>nicht hierP>
<Skript>
 const app = Vue.createApp({
 Daten() {
 zurückkehren {
 Nachricht: "Dies ist Ihre Vue-App",
 Name: "Edler Okafor",
 };
 },
 Methoden: {
 nameLength() {
 gib this.name.length - 1 zurück;
 },
 },
 });
 app.mount("#app");
Skript>
Körper>
html>

In diesem Beispiel hat die Vue-App eine Daten Objekt, das zwei Eigenschaften enthält: Nachricht Und Name.

Innerhalb der Vue-App zeigen die drei HTML-Elemente Daten mithilfe der Vue-Instanz an. Der h1 -Element zeigt den Wert von an Nachricht Eigentum, während die h3 -Element zeigt den Wert von an Name Eigentum mit a toUpperCase() darauf angewandte Methode.

Der P -Element zeigt das zurückgegebene Ergebnis von an NameLänge() Methode definiert in der Methoden Objekt der Vue-App. Der NameLänge() -Methode gibt die Länge der zurück Name Eigenschaft um eins subtrahiert.

Um auf einen Wert aus dem Datenobjekt im Methodenobjekt zuzugreifen, müssen Sie verwenden Das Stichwort. Das Das Schlüsselwort bezieht sich auf die aktuelle Vue-Instanz und ermöglicht Ihnen den Zugriff auf deren Eigenschaften und Methoden innerhalb der Vue-Instanz. Durch die Nutzung Das, können Sie den Wert von abrufen Name Eigentum und führen Sie alle notwendigen Manipulationen daran mit dem durch Methoden.

Diese Vue-App zeigt, wie Sie Daten mithilfe von Textinterpolation an HTML-Elemente binden und Methoden in einer Vue-Instanz definieren und aufrufen.

Erstellen Sie Ihr Front-End mit Vue

In diesem Artikel haben Sie gelernt, wie Sie mit Vue arbeiten und Text mit der Vorlagensyntax von Vue interpolieren. Sie können auf mehrere andere Funktionen in Vue zugreifen, wie z. B. Direktiven und Lifecycle-Hooks, was es zu einer ausgezeichneten Wahl für die Erstellung dynamischer Front-End-Anwendungen macht.