Vue.js ist ein Micro-JavaScript-Framework zum Erstellen wiederverwendbarer und reaktiver Komponenten auf Ihrer Website.
Front-End-Frameworks unterscheiden sich sowohl in der Größe als auch im Umfang erheblich. Vue.js zeichnet sich durch ein minimales Design und einen Fokus auf Anpassungsfähigkeit aus. Sie haben die Wahl, Ihre gesamte Website mit Vue.js zu erstellen, nur um ein einzelnes Element Ihrer Website reaktiv zu machen oder irgendetwas dazwischen. Aus diesem Grund ist es sehr zugänglich mit einer flachen Lernkurve.
In diesem Artikel werfen wir einen Blick auf die Kernkomponenten von Vue.js und wie Setup und gestartet werden, aber zuerst schauen wir uns an, wann Sie ein Frontend-Framework wie Vue.js und warum verwenden möchten .
Front-End-Frameworks, wie die meisten Frameworks, dienen dazu, allgemeine Aufgaben zu abstrahieren, den gemeinsamen Nenner zwischen Projekten. Mit Vue.js wird der Prozess der Erstellung von HTML-Komponenten, die dynamisch durch JavaScript aktualisiert werden, vereinfacht.
Einige der Schwachpunkte, die Vue.js für Sie löst, sind das Erzeugen von dynamischem HTML, das Binden der HTML-Elemente-Aktionen an Ihre Daten unter Beibehaltung von Umfang und Kontext und das Verfolgen, wann der HTML-Code automatisch neu gerendert werden muss.
Angenommen, Sie haben eine Seite mit einer dynamischen Liste von Namen. Möglicherweise haben Sie Code geschrieben, der ungefähr so aussieht:
Wenn Sie den HTML-Code manuell erstellen - abgesehen von der Tatsache, dass der Code in größeren Beispielen schnell schwer zu verwalten ist - besteht keine echte Verbindung zwischen den Daten und dem generierten HTML. Wenn sich das Array von Namen ändert, müssen Sie sich dessen bewusst sein und die Liste erneut rendern. All dies dient auch dazu, nur dynamische Daten anzuzeigen. Wenn Sie Event-Handler wie einen On-Click-Handler hinzufügen möchten, werden Sie Ihren Code weiter und weiter verschachteln, um den Bereich zu speichern:
Mit Vue.js trennen Sie den HTML-Code als Vorlage, die darstellt, was basierend auf den angegebenen Daten generiert wird, und Vue.js wird sie automatisch rendern.
Das gleiche Beispiel in Vue.js würde wie folgt aussehen:
Wir haben eine vollständige Trennung zwischen den HTML-Aspekten des JavaScript-Codes und der Logik des JavaScript-Codes, wodurch alles in sich geschlossen und viel überschaubarer wird. Wir sind aber ein bisschen vor uns selbst, lasst uns einen Schritt zurück machen und schauen, wie der Kern von Vue.js das erreicht ...
Im Kern von Vue.js definieren Sie eine Korrelation zwischen Ihrem HTML und einigen Daten, und jedes Mal, wenn sich die Daten ändern, wird das HTML aktualisiert. Bei der Instanziierung einer Vue.js-Komponente übergeben Sie ihr einige Daten in Form eines JavaScript-Objekts. Dieses Objekt wird dann geändert und ersetzt seine Eigenschaften durch verfolgbare Getter- und Setter-Methoden.
Vue.js analysiert das Datenobjekt beim Erstellen des HTML und sieht, welche Daten Sie verwendet haben, um die verschiedenen HTML-Elemente darin darzustellen. Damit überwacht es die Änderungen am Datenobjekt und weiß genau, was wann aktualisiert werden soll.
Die enge Bindung zwischen den Daten und der Ansicht vereinfacht die Entwicklung von Frontend-Anwendungen drastisch und minimiert Fehler aufgrund falscher Darstellung. Diese Trennung von Bedenken ermöglicht es Ihnen, sich auf die Logik Ihrer Anwendung zu konzentrieren, ohne sich um die Aktualisierung der Ansicht kümmern zu müssen.
Installation für Vue.js ist so einfach wie die Bibliothek:
Wie ich bereits erwähnt habe, besteht eine Vue.js App aus einem Datenobjekt und einer HTML-Vorlage, in die die Daten eingebettet werden. Also für unsere erste App, Vue.js in Aktion zu sehen, können wir hinzufügen body :
Zuerst definieren wir a div Dies ist unsere HTML-Vorlage für unsere Vue.js App. Im Inneren verwenden wir die doppelten Klammern für die Dateninterpolation in das HTML.
In der eigentlichen Vue.js App definieren wir einfach die Daten und verbinden die div als Element für die App, das sowohl gerendert als auch als Vorlage verwendet werden soll. Als nächstes erhöhen wir die Zählvariable unserer App einmal pro Sekunde.
Wenn Sie eine Vue.js-Anwendung erstellen und diese in Ihrem Browser öffnen, sehen Sie, dass die Seite bei jeder Aktualisierung der Dateneigenschaft automatisch aktualisiert wird.
Jetzt in den meisten Anwendungen, die DOM reagieren auf die Daten ändern, ist nur die halbe Geschichte, Sie brauchen auch eine Möglichkeit, um die Daten zu aktualisieren, Vue.js kümmert sich darum mit Ereignissen und Methoden. Methoden sind gespeicherte Funktionen, die im Kontext Ihrer Vue.js-App ausgeführt werden.
Lassen Sie uns unser Gegenbeispiel aktualisieren, um die Möglichkeit zum Starten und Stoppen des Timers hinzuzufügen, anstatt einfach zu starten:
In der HTML-Vorlage haben wir eine Schaltfläche hinzugefügt, um den Zähler zu starten und zu stoppen. Um dies zu erreichen, benötigen wir den Text auf der Schaltfläche als dynamisch und wir benötigen einen Ereignishandler für das Klicken auf die Schaltfläche.
Um ein Ereignis in Vue.js für ein Element zu deklarieren, geben Sie den Namen eines beliebigen Standard-HTML-DOM-Ereignisses an v-on: so mouseover Ereignis wird v-on:mouseover oder der keyup Ereignis wird v-on:keyup . In unserem Beispiel verwenden wir die v-on:click Attribut zum Behandeln der click Veranstaltung.
Etwas, das Sie vielleicht bemerkt haben, ist, dass wir für Button-Text eine Methode aufrufen, anstatt nur auf eine gespeicherte Eigenschaft zu verweisen. In vielen Situationen haben die von Ihnen gespeicherten Daten nicht unbedingt das Format, das Sie auf der Seite anzeigen möchten. Methoden können hier verwendet werden, um die Daten zu verarbeiten, und die gesamte Reaktivität, die Sie von den Eigenschaften erhalten, gilt bei der Verwendung von Methoden. Wenn sich die zugrunde liegenden Daten ändern, wird die Vorlage entsprechend aktualisiert.
In der Vue.js-App haben wir jetzt eine neue Eigenschaft, die die Timer-Variable und einige Methoden enthält. Das toggle Eine Methode, die an das Klickereignis der Schaltfläche gebunden ist, prüft, ob die timer Eigenschaft ist gesetzt, Starten bzw. Stoppen des Timers bzw. des counterAction Methode wird verwendet, um die richtige Aktion in der Schaltfläche anzuzeigen, wiederum basierend auf der Timer-Variable.
Da die toggle- Methode die timer- Eigenschaft ändert und die counterAction- Methode - die sich in der Vue.js-Vorlage befindet - die timer -Eigenschaft verwendet, wird jedes Mal, wenn toggle aufgerufen wird, die Vorlage den Text der Schaltfläche erneut rendern.
Es ist erwähnenswert, dass, obwohl wir keinen Anfangswert für die Eigenschaft timer haben , dieser beim Erstellen der App Vue.js trotzdem deklariert werden muss. Wenn Sie die Eigenschaft nicht von Anfang an deklarieren, ist die Eigenschaft nicht reaktiv und führt nicht dazu, dass der HTML-Code beim Ändern neu gerendert wird.
In unserem Beispiel wird die Ansicht einmal pro Sekunde aktualisiert, während der Timer läuft, und so wird unsere counterAction- Methode einmal pro Sekunde aufgerufen, wenn die Schaltfläche neu gezeichnet wird. Mit Vue.js können wir dies optimieren, indem wir das Ergebnis einer Methode zwischenspeichern und nur die Methode aufrufen, wenn die zugrunde liegenden Daten, die speziell in der Methode verwendet werden, geändert werden. Dies ist auch nützlich, wenn Sie dieselbe berechnete Eigenschaft an mehreren Stellen auf der Seite verwenden, anstatt den Wert mehrere Male zu verarbeiten, indem Sie den Wert zwischenspeichern, wodurch Sie viel Aufwand reduzieren können.
Lassen Sie uns das Beispiel aktualisieren, um zwischengespeicherte Eigenschaften einzubeziehen:
Der Hauptunterschied neben dem Caching ist, dass Methoden unter computed werden als Eigenschaften im Gegensatz zu Methoden referenziert, daher mussten wir in der HTML-Vorlage die Klammern von counterAction entfernen.