Lassen Sie uns die Szene einstellen.

Sie bauen seit einigen Jahren Websites. Sie haben zurück angefangen, bevor React eine große Sache wurde, und jQuery war immer noch beliebt.

Und genau das war Ihr Toolset. Als Designer waren Sie einmal auf dem neuesten Stand der Technik, weil Sie HTML, CSS und genug jQuery beherrschten, um eine gewisse Logik auf Ihre Seiten anzuwenden.

Noch ein paar Jahre vorwärts, und Sie fühlen sich ein bisschen zurückgelassen.

"Web Designer" wird langsam zu einer geladenen Phrase, wie "Programmierer". Das mögliche Toolset für einen Webdesigner ist heute weitaus breiter, als es eine Person beherrschen kann.

Was hat sich geändert??

Die größten Änderungsbereiche waren sicherlich nicht in HTML. Was Sie vor fünf Jahren wussten, ist heute noch weitgehend anwendbar.

CSS hat sich verändert, aber nicht auf unüberschaubare Weise. Einige neue Spezifikationen wurden eingeführt und einige neue Tools wie CSS Grid sind aufgetaucht, aber nichts ändert sich so sehr und so schnell, dass Sie nicht so schnell mit dem Tempo anfangen können.

JavaScript dagegen ist heute völlig anders als vor zehn Jahren und deutlich anders als vor fünf Jahren.

Beachten Sie, dass NodeJS vor zehn Jahren noch nicht einmal veröffentlicht wurde. "Back-End" und "JavaScript" wurden nicht verwendet, um denselben Job zu beschreiben. Bei der Betrachtung des Google-Trends-Diagramms für NodeJS stieg die Popularität von Node um 2010 an, aber erst vor zwei Jahren hatte es nur die Hälfte des Höchstinteresses von 2017 erreicht. Übersetzung: Backend JavaScript erfreut sich neuer Beliebtheit.

Google Trends-Diagramm für NodeJS

Im Jahr 2013 tauchten neue JavaScript-basierte Frameworks auf. React wurde erstmals im März dieses Jahres eingeführt, mit dem Ziel, auf jeder Plattform einen Ansatz zum Lernen, einmal überall schreiben zu erstellen. VueJS wurde weniger als ein Jahr später als alternatives vieworientiertes JavaScript-Framework eingeführt. Das Konzept von JavaScript als einfache Skriptsprache wurde herausgerissen und durch ein viel ausgereifteres JavaScript-Ökosystem ersetzt. Etwa zur gleichen Zeit gab es nicht nur neues Interesse und Entwicklung in JavaScript-Frameworks, sondern auch in der Reifung der Sprache selbst. Mit ES5 und jetzt mit dem Jahresjahr ES2015-ES2017 werden JavaScript jedes Jahr um neue Funktionen erweitert.

Es ist kein Wunder, dass Sie als Web-Entwickler, der ein Toolset verwendet, das Sie vor fünf Jahren weitgehend übernommen haben, von dieser jüngsten Entwicklung ein wenig blind gemacht werden.

In dieser Artikelserie möchte ich Ihnen Vue JS vorstellen, ein modernes, komponentenorientiertes JavaScript-Framework. Am Ende der dreiteiligen Serie werden Sie wissen, wie Vue JS verwendet wird. Vor allem aber werden Sie mit modernem Webdesign und Front-End-Entwicklungstechniken, die die weltweit besten und meistgenutzten Webplattformen unterstützen, auf dem Weg zu einem fließenden Umgang und Anwendungen.

Lass uns anfangen!

Es geht um den Vue (View)

Vue JS arbeitet primär als sichtorientiertes Framework. So fühlen Sie sich als Designer zu Hause! Die "Ansicht" ist das Herzstück von allem, was in Vue passiert (daher der Name).

Mit Vue ist die Benutzeroberfläche die ultimative Darstellung der Benutzerinteraktion. Alle Daten, Methoden, Logik und Ereignisse sind nur wichtig, wenn sie die Ansicht selbst richtig beeinflussen.

Mit Vue können Sie ganz einfach eine einzelne Rendering-Ansicht definieren. Schauen wir uns eine Vue-Instanz an, die eine Zeichenfolge für den Browser darstellt. Wir laden Vue (wie diese von CDN gehostete Version, zum Beispiel: https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js) und fügen dann unser JavaScript hinzu:

vm = new Vue (el: "# my-app"), data: firstName: "Jonathan", lastName: "Cutrell",

Und etwas Markup:

 
Hallo Vorname Nachname!
 

So sieht das aus:

Dieses einfache Beispiel zeigt einige wichtige Konzepte.

1. Eine Vue-Instanz kann verwendet werden, um den Inhalt eines bestimmten Elements einfach darzustellen. Das Vue Konstruktor nimmt einige Optionen. Eine dieser Optionen ist die el Option, kurz für "Element". Dies ist ein Selektor, der auf ein Element in Ihrem HTML-Code verweist - in diesem Fall das div mit der Klasse meine App.
2. Die Daten werden direkt an die Ansicht übergeben. Mit Vue können Sie problemlos Daten aus dem Internet übertragen Daten Option zur Ansicht mit der dataKey Syntax. In diesem Fall ist die gerenderte Zeichenfolge im h1 Tag ist "Hallo Jonathan Cutrell".
3. Es ist kein manueller Renderaufruf erforderlich. Wenn Ihre Vue-Instanz aufgebaut ist und ein el übergeben wird, rendert Vue dieses Element automatisch ohne weiteren Code. Später werden wir sehen, wie dieses Rendering-Lifecycle-Management dazu führt, dass Ihre Anwendung weniger fehlerhaft ist.

Zum Vergleich

Schauen wir uns an, wie wir mit pure jQuery dasselbe erreichen könnten.

let options = firstName: "Jonathan", lastName: "Cutrell" let $ app = $ ("# my-app"); $ app.find (". js-first-name"). html (options.firstName); $ app.find (". js-last-name"). html (options.lastName);

 
Hallo, 
 

Auf den ersten Blick sieht dies vielleicht nicht viel anders aus. Und für einfache Fälle mag dies sicherlich zutreffen.

Vue packt jedoch einen Schlag, der hinter den Kulissen verborgen ist. Was ist beispielsweise, wenn Sie den Namen auf der Seite ändern möchten?

vm = new Vue (el: "# my-app"), data: firstName: "Jonathan", lastName: "Cutrell", gemountet: function () setInterval (()) => this.firstName = this .firstName.split (""). reverse (). join ("");, 1000);)

In unserem String-Szenario ist dies natürlich keine realistische Änderung, aber in jedem 1s-Intervall wird der erste Name zu einer umgekehrten Version von sich selbst aktualisiert. Es sind keine weiteren DOM-Manipulationen oder -Aufbereitungen erforderlich.

Nun, mit jQuery dasselbe zu erreichen?

let options = firstName: "Jonathan", lastName: "Cutrell" let $ app = $ ("# my-app"); $ app.find (". js-first-name"). html (options.firstName); $ app.find (". js-last-name"). html (options.lastName); setInterval (Funktion (let firstName = $ app.find (". js-first-name"). html (); let newFirstName = firstName.split (""). $ app.find (". js-first-name"). html (newFirstName);, 1000)

Wieder ist der Einfluss auf die Gesamtzahl der Codezeilen für dieses Beispiel relativ gering. Der konzeptionelle Unterschied ist jedoch erheblich. Wir werden im nächsten Abschnitt darüber sprechen.

Wo sind deine Daten??

Ein durchschnittlicher Webdesigner ist bei der Verwendung von jQuery oder einer ähnlichen Bibliothek zum Entwickeln von Anwendungen zum Opfer gefallen. Ich bin sicher, dass Sie diesen Satz schon einmal gehört haben, aber machen wir ihn anhand unseres Beispiels für die Namenswiedergabe konkreter.

Zu jedem Zeitpunkt während des Lebenszyklus Ihrer Anwendung, wo ist die korrekte "Version" von Vorname gelagert?

Bei der Vue-Version werden die Informationen immer im gespeichert Daten Objekt. Wenn Sie es dort aktualisieren, wird es überall sonst korrekt aktualisiert. Die Daten sind enthalten und an einem einzigen Ort verwaltet.

In der jQuery-Version werden die Daten tatsächlich im Dom gespeichert. Es gibt keine Darstellung der Daten im JavaScript, die aktualisiert und anschließend wiedergegeben werden. Sie werden zum Beispiel feststellen, dass wir eine einrichten Optionen Objekt. Dieses Objekt wird einmalig statisch gesetzt. Wenn wir jedoch den Namen in der setInterval Aufruf, das Objekt dieser Option ist jetzt nicht mehr gültig! Das kann ein Problem sein. Darüber hinaus kann das Optionsobjekt zu einem beliebigen Zeitpunkt aktualisiert oder vollständig gelöscht werden, und die Ansicht wird nicht beeinflusst (solange das anfängliche Rendern bereits erfolgt ist)..

Warum ist das ein Problem??

Auch bei Anwendungen dieser Einfachheit kann es schwierig sein zu verstehen, warum dies wichtig ist. Mit zunehmender Komplexität Ihrer Anwendung, selbst wenn auch nur geringfügig, kann das Speichern von Daten im DOM extrem spröde und langweilig werden.

Überbrückung der Lücke: Homespun "State Management"

"Warum trenne ich meine Anliegen nicht ohne Vue?"

Dies ist eine natürliche Frage. Wie können wir dann unsere Sorgen ohne Vue trennen??

let options = firstName: "Jonathan", lastName: "Cutrell" Funktion setOption (k, v) Optionen [k] = v; machen();  function render () let $ app = $ ("# my-app"); $ app.find (". js-first-name"). html (options.firstName); $ app.find (". js-last-name"). html (options.lastName);  setInterval (Funktion (let firstName = options.firstName; let newFirstName = firstName.split (""). reverse (""). join (""); setOption ("firstName", newFirstName);, 1000) rendern ();

Aha! Jetzt haben wir eine eigene Rendering-Maschine entwickelt, die die Trennung von Anliegen ermöglicht. Wir haben unsere Optionen und solange wir unsere nutzen setOption () Funktion werden wir jedes Mal neu rendern, wenn die Option aktualisiert wird. Die Datenquelle ist jetzt von der Ansicht getrennt. Sieg!

Dies ist in der Tat ein einfacher Schritt in Richtung einiger Muster, die Vue unter der Haube verwendet. Vue bietet jedoch viel mehr Funktionalität und Leistung als wir in diesem sehr einfachen Anwendungsfall vorgestellt haben.

Zum Beispiel, was ist, wenn wir das einstellen Vorname auf dasselbe ist es schon eingestellt? Wir müssen das Ganze nicht neu berechnen, oder? Unser Anwendungscode kann dieses Szenario jedoch nicht unterscheiden. Dies ist etwas, was Vue für Sie tut, unter der Haube.

Kommt auf

Für einen ersten Blick gab es viel zu sehen, also lehnen Sie sich zurück und genießen Sie es! In Teil zwei dieser Tutorial-Reihe werden wir Vue in Betrieb nehmen, während Sie einige Ihrer ersten Fragen beantworten.

Lernen Sie Vue.js

Lernen Sie Vue.js mit unserem kompletten Vue.js Tutorial, egal ob Sie ein erfahrener Programmierer sind oder ein Webdesigner, der nach neuen Front-End-Entwicklungstechniken sucht.