So implementieren Sie eine einfache Anwendung zum Ändern von Titeln mit Vue.js.

Vue.js ist ein progressives JavaScript-Framework. Es verfügt über viele Funktionen, einschließlich Komponenten, Rendering und Routing. Das Argument Vue vs React ist wettbewerbsorientierter Natur. Beide haben Vor- und Nachteile auf ihrem Gebiet.

Ich habe eine einfache JavaScript-Anwendung in Vue mithilfe eines CDN (Content Delivery Network) erstellt. Die Anwendung hat einen Titel, der beim Klicken auf eine Schaltfläche in Großbuchstaben umgewandelt wird. Ich weiß, dass es eine einfache Anwendung ist. Aber wir können dadurch viele einfache Dinge lernen, wie:

  • CDN für Vue
  • Vue Objekte
  • Verknüpfen eines Attributs mit dem Vue-Objekt
  • Definieren einer Dateneigenschaft
  • Definieren einer Methode mit Vue
  • Aufrufen der Vue-Methode über Listener

Okay, lass uns die Hände schmutzig machen!

Ich bin ein großer Fan davon, die Methode in Stücke zu tauchen, daher werden wir hier den gleichen Ansatz verfolgen.

  1. Erstellen Sie eine HTML-Datei und verknüpfen Sie Vue über CDN.
  2. Erstellen Sie ein Vue-Objekt.
  3. Verknüpfen Sie die HTML-Vorlage mit dem Vue-Objekt.
  4. Erstellen Sie eine Dateneigenschaft.
  5. Erstellen Sie eine Methode im Vue-Objekt.
  6. Ändern Sie die Daten, wenn Sie auf eine Schaltfläche klicken.

1. Erstellen Sie eine HTML-Datei und verknüpfen Sie Vue über CDN

Erstellen Sie zunächst eine Datei mit dem Namen index.html. Es ist unser Hauptakteur. Die Datei index.html enthält sowohl den HTML-Vorlagenteil als auch das Vue-Objekt.

Ich verwende hier Visual Studio Code.

Fügen Sie nun das CDN zur index.html hinzu. Wir können entweder die Entwicklungs- oder die Produktionsversion verwenden. Es wird jedoch sinnvoll sein, die Entwicklungsversion für Warnungen und Fehler zu verwenden. Der Eintrag für die Entwicklungsversion des CDN lautet derzeit:

2. Erstellen Sie ein Vue-Objekt

Jetzt müssen wir das Vue-Objekt in der Datei index.html erstellen. Es wird unter dem Skript-Tag erstellt.

Es kann erstellt werden von:

new Vue();

Die gesamte Syntax ist unten:

new Vue({el: ,
data: {
},
methods: {
}
});

new Vueist eine Instanz von Vue. Wir können auf Eigenschaften wie el, Daten, Methoden usw. zugreifen, um mit Vue zusammen zu sein. Die Eigenschaften werden unten erklärt.

3. Verknüpfen Sie die HTML-Vorlage mit dem Vue-Objekt

Wie wir wissen, hat Vue eine Eigenschaft namens "el". Diese Eigenschaft verknüpft die HTML-Vorlage mit dem Vue-Objekt. Dazu müssen sich alle HTML-Vorlagen unter einem einzigen div mit einer ID befinden. Für diese Demo können wir eine ID von verwenden app. Wir haben der Datei index.html Folgendes hinzugefügt:

Welcome to title changer

Fügen Sie nun die App-ID zum Vue-Objekt hinzu.

new Vue({
el: '#app',
});

Der Link wird also ein Erfolg.

4. Erstellen Sie eine Dateneigenschaft

Jetzt möchten wir nicht, dass die Überschrift "Willkommen beim Titelwechsler" statischer Text ist. Wir müssen in der Lage sein, den Wert aus der Vue-Dateneigenschaft anzuzeigen. Zu diesem Zweck verfügt Vue über eine integrierte Eigenschaft namens "Daten". Wir müssen das hier registrieren und den Namen im HTML wie folgt verwenden:

new Vue({
el: '#app',
data: {
tile: 'Welcome to title changer'
},
});

Jetzt im <h3> -Tag kann mit den doppelten geschweiften Klammern wie Interpolation in Ruby aktualisiert werden. Der Wert ist:

{{title}}

5. Erstellen Sie eine Methode im Vue-Objekt

Vue verfügt über eine integrierte Eigenschaft, die als "Methoden" bezeichnet wird. Diese Eigenschaft unterstützt die Methoden, die in den Vue-Objekten deklariert werden sollen.

Wir können auch die ES6-Syntax verwenden. Lassen Sie mich beide hier erklären.

methods: {
 changeTitle: function() {
 this.title = this.title.toUpperCase();
 return this.title;
 }
}

Das ES6-Format lautet:

methods: {
 changeTitle() {
 this.title = this.title.toUpperCase();
 return this.title;
 }
}

toUpperCase()ist einfach eine JavaScript-Methode, die eine Zeichenfolge in Großbuchstaben konvertiert. Ein wichtiger Punkt, der hier zu beachten ist, ist, dass wir mit dem thisSchlüsselwort auf die Dateneigenschaft zugreifen können . Auf den in der Dateneigenschaft deklarierten Wert kann also mit thisden Methoden zugegriffen werden .

6. Ändern Sie die Daten, wenn Sie auf eine Schaltfläche klicken

Jetzt rufen wir einfach die Methode beim Klicken auf eine Schaltfläche auf. So einfach ist das.

Dazu müssen wir ein Button-Tag erstellen.

click to change to upcase

Um die Schaltfläche mit der Methode zu verknüpfen, müssen Sie beim Klicken auf die Schaltfläche einen Ereignishandler verwenden. Vue bietet einen integrierten Listener namens v-on.

Hier ist die Syntax:

v-on:click="call Action or Method"

Wir können kombinieren mit:

click to change to upcase

Oder wir können eine kurze Syntax wie die folgende verwenden:

click to change to upcase

Das ist es. Alles erledigt

Bevor Sie auf die Schaltfläche klicken, befindet sich die HTML-Überschrift unten:

Nach dem Klicken wird es in Großbuchstaben konvertiert.

Das ist alles. Kommentar, wenn Sie irgendwelche Probleme oder Fragen haben. Ich habe die Repo-Details unten angehängt.

Github Link. Ich werde in den kommenden Lektionen einige erweiterte Funktionen in Vue aktualisieren.