Vue.js ist ein Mikro-JavaScript-Framework zum Erstellen wiederverwendbarer und reaktiver Komponenten auf Ihrer Website. Front-End-Frameworks variieren stark in Größe und Umfang. Vue.js zeichnet sich durch sein minimalistisches Design und den Fokus auf Anpassungsfähigkeit aus. Sie haben die Wahl, Ihre gesamte Website mit Vue.js zu erstellen, nur ein einzelnes Element Ihrer Website reaktiv zu machen oder irgendetwas dazwischen. Aus diesem Grund ist es mit einer flachen Lernkurve sehr zugänglich. In diesem Artikel werfen wir einen Blick auf die Kernkomponenten von Vue.js und wie man es einrichtet und startet. Zunächst werfen wir jedoch einen Blick darauf, wann Sie ein Front-End-Framework wie Vue.js verwenden möchten und warum .
Warum ein Front-End-Framework verwenden?
Front-End-Frameworks dienen, wie die meisten Frameworks, dazu, gemeinsame Aufgaben zu abstrahieren, den gemeinsamen Nenner, den Sie zwischen Projekten finden. Vue.js abstrahiert insbesondere den Prozess der Erstellung von HTML-Komponenten, die dynamisch über JavaScript aktualisiert werden. Einige der Probleme, die Vue.js für Sie löst, sind die Generierung des dynamischen HTML, die Bindung der Aktionen der HTML-Elemente an Ihren Datenumfang und -kontext sowie die Verfolgung, wann der HTML-Code automatisch neu gerendert werden muss. Nehmen wir zum Beispiel an, Sie haben eine Seite mit einer dynamischen Namensliste. Möglicherweise haben Sie Code geschrieben, der etwa so aussieht:
Wenn Sie den HTML-Code manuell erstellen – abgesehen davon, dass der Code in größeren Beispielen schnell schwer zu verwalten ist – besteht keine wirkliche Verbindung zwischen den Daten und dem generierten HTML. Wenn sich das Namensarray ändert, müssen Sie sich dessen bewusst sein und die Liste neu rendern. All dies dient auch nur der Anzeige dynamischer Daten. Wenn Sie Ereignishandler wie einen On-Click-Handler hinzufügen möchten, verschachteln Sie Ihren Code immer weiter, um Umfang zu sparen in:
Mit Vue.js trennen Sie den HTML-Code als Vorlage, die darstellt, was basierend auf den angegebenen Daten generiert werden soll, und Vue.js rendert es automatisch. 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 vorgenommen, wodurch alles in sich geschlossen und viel einfacher zu verwalten ist. Da wir uns jedoch ein wenig übertreffen, gehen wir einen Schritt zurück und schauen uns an, wie der Kern von Vue.js dies erreicht …
Datengesteuertes DOM
Im Kern von Vue.js definieren Sie eine Korrelation zwischen Ihrem HTML und einigen Daten. Jedes Mal, wenn sich die Daten ändern, wird der HTML-Code aktualisiert. Dies funktioniert so, dass Sie beim Instanziieren einer Vue.js-Komponente einige Daten in Form eines JavaScript-Objekts übergeben. Dieses Objekt wird dann geändert und seine Eigenschaften werden durch nachverfolgbare Getter- und Setter-Methoden ersetzt. Vue.js analysiert das Datenobjekt beim Erstellen des HTML und sieht, welche Daten Sie verwendet haben, um die verschiedenen HTML-Elemente darin zu rendern. Auf diese Weise überwacht es die am Datenobjekt vorgenommenen Änderungen und weiß genau, was wann aktualisiert werden muss. Eine so enge Bindung zwischen den Daten und der Ansicht vereinfacht die Entwicklung von Front-End-Anwendungen erheblich und minimiert Fehler aufgrund falscher Darstellungen. Durch diese Trennung der Belange können Sie sich auf die Logik Ihrer Anwendung konzentrieren, ohne sich überhaupt mit der Aktualisierung der Ansicht befassen zu müssen.
Erstellen Sie Ihre erste Vue.js-App
Die Installation für Vue.js ist so einfach wie das Einbinden der Bibliothek:
Nun, wie ich bereits erwähnt habe, besteht eine Vue.js-App aus einem Datenobjekt und einer HTML-Vorlage, in die die Daten eingebettet werden. Damit unsere erste App Vue.js in Aktion sehen kann, fügen wir dem Text Folgendes hinzu:
Zuerst definieren wir ein Div, das unsere HTML-Vorlage für unsere Vue.js-App sein wird. Im Inneren verwenden wir die doppelten Klammern für die Dateninterpolation in den HTML-Code. In der eigentlichen Vue.js-App definieren wir einfach die Daten und verbinden das div als Element für die App, in das sie gerendert und als Vorlage verwendet werden soll. Als nächstes erhöhen wir für zusätzliches Aufsehen die Zählvariable in unserer App einmal pro Sekunde. Das ist alles, was Sie zum Erstellen einer Vue.js-Anwendung benötigen. Wenn Sie diese in Ihrem Browser öffnen, werden Sie sehen, dass die Seite jedes Mal automatisch aktualisiert wird, wenn wir die Dateneigenschaft aktualisieren.
Ereignisse und Methoden
In den meisten Anwendungen ist die Reaktion des DOM auf geänderte Daten nur die halbe Miete. Sie benötigen auch eine Möglichkeit, die Daten zu aktualisieren. Vue.js erledigt dies mit Ereignissen und Methoden. Methoden sind gespeicherte Funktionen, die im Kontext Ihrer Vue.js-App ausgeführt werden. Aktualisieren wir unser Gegenbeispiel, um die Möglichkeit hinzuzufügen, den Timer zu starten und zu stoppen, anstatt ihn einfach auszuführen:
In der HTML-Vorlage haben wir eine Schaltfläche zum Starten und Stoppen des Zählers hinzugefügt. Um dies zu erreichen, muss der Text auf der Schaltfläche dynamisch sein und wir benötigen einen Ereignishandler für den Fall, dass auf die Schaltfläche geklickt wird. Um ein Ereignis in Vue.js für ein Element zu deklarieren, stellen Sie dem Namen aller Standard-HTML-DOM-Ereignisse v-on: voran, sodass das Mouseover-Ereignis zu v-on:mouseover oder das Keyup-Ereignis zu v-on:keyup wird. In unserem Beispiel verwenden wir das v-on:click-Attribut, um das Klickereignis zu verarbeiten. Möglicherweise ist Ihnen aufgefallen, dass wir für den Text der Schaltfläche eine Methode aufrufen und nicht nur auf eine gespeicherte Eigenschaft verweisen. In vielen Situationen liegen die von Ihnen gespeicherten Daten nicht unbedingt in dem Format vor, in dem Sie sie auf der Seite anzeigen möchten. Hier können Methoden zum Verarbeiten der Daten verwendet werden, und die gesamte Reaktivität, die Sie von Eigenschaften erhalten, gilt auch für die 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. Die Toggle-Methode, die an das Klickereignis der Schaltfläche gebunden ist, prüft, ob die Timer-Eigenschaft festgelegt ist oder nicht, und startet bzw. stoppt den Timer. Die Methode counterAction wird verwendet, um die richtige Aktion in der Schaltfläche anzuzeigen, wiederum basierend auf der Timer-Variablen. Seit der Umschalten Methode ändert die Timer Eigentum und die Gegenwirkung Die Methode – die sich in der Vue.js-Vorlage befindet – verwendet jederzeit die Timer-Eigenschaft Umschalten heißt, dass die Vorlage den Text der Schaltfläche neu rendern wird. Es ist erwähnenswert, dass wir keinen Anfangswert für haben Timer Eigenschaft muss sie beim Erstellen der Vue.js-App noch deklariert werden. Wenn Sie die Eigenschaft nicht von Anfang an deklarieren, ist die Eigenschaft nicht reaktiv und führt nicht dazu, dass der HTML-Code bei Änderungen erneut gerendert wird. In unserem Beispiel wird die Ansicht einmal pro Sekunde aktualisiert, während der Timer läuft, also einmal pro Sekunde Gegenwirkung Die Methode wird auch aufgerufen, wenn die Schaltfläche neu gezeichnet wird. Mit Vue.js können wir dies optimieren, indem wir das Ergebnis einer Methode zwischenspeichern und die Methode nur dann abrufen, 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 mehrmals zu verarbeiten, können Sie durch die Zwischenspeicherung des Werts den Overhead erheblich reduzieren. Aktualisieren wir das Beispiel, um zwischengespeicherte Eigenschaften einzubeziehen:
Der Hauptunterschied neben dem Caching besteht darin, dass die berechneten Methoden als Eigenschaften und nicht als Methoden referenziert werden. Daher mussten wir in der HTML-Vorlage die Klammern entfernen Gegenwirkung.
