Einführung in das Erstellen von Webanwendungen in Vue.js

Heutzutage gibt es so viele JavaScript-Frameworks, dass es schwierig sein kann, sie alle nachzuverfolgen, und sicherlich ist es unwahrscheinlich, dass sie von jedem beherrscht werden. Für die meisten von uns bedeutet das, dass wir auswählen müssen, welche Entwicklungsrahmen wir in das Lernen investieren werden.

In diesem Artikel werfen wir einen kurzen Blick auf Vue.js, sodass Sie selbst entscheiden können, ob es wahrscheinlich zu den Projekten passt, an denen Sie normalerweise arbeiten, und ob es für Sie geeignet erscheint.

Was ist Vue.js?

Obwohl es normalerweise nicht groß geschrieben wird, ist „Vue“ eigentlich eine Abkürzung für Visual Understanding Environment. Sein Hauptzweck besteht darin, die Entwicklung von Webanwendungen durch Verringerung der Codekomplexität zu erleichtern. Es hat viel mit React.js gemeinsam, aber die aktuelle Version von Vue ist schneller als React und scheint effizienter zu sein.

Ist Vue schwer zu lernen?

Wenn Sie bereits ein erfahrener Programmierer sind, sollten Sie mit Vue keine Schwierigkeiten haben, aber es wäre nicht richtig, es als Anfängersprache zu beschreiben. Sie müssen etwas Erfahrung mit HTML, CSS und JavaScript haben, um alles Mögliche damit zu erstellen.

Die Lernkurve bei Vue ist etwas weniger steil als bei React und viel weniger steil als bei Angular. Was genau gesagt werden kann, ist, dass Vue im Vergleich zu anderen gängigen Entwicklungsstrukturen relativ leicht zu erlernen ist.

Wie hilft Vue, Ziele zu erreichen?

Es hängt von der tatsächlichen Zielsetzung ab, aber Sie binden Codeblöcke im Allgemeinen an HTML-Divs. Diese Methode macht es einfacher, Interaktivität und dynamischen Inhalt einzuführen als mit normalem HTML, CSS und JavaScript.

Auf der anderen Seite können Sie in Vue nicht wirklich mehr tun, als Sie es auf herkömmliche Weise tun könnten. Bei der Verwendung von Vue geht es einfach darum, Ihnen die Entwicklung in der Entwicklungsphase zu erleichtern, aber das Endergebnis hat keine großen Auswirkungen, abgesehen von geringfügigen Auswirkungen auf die Leistung durch das Laden des Framework-Codes.

Ein weiterer Vorteil von Vue ist die Modularität, sodass Sie in mehreren Projekten entwickelte Komponenten wiederverwenden können.

Hat Vue coole Tricks im Ärmel?

Dies ist sicherlich der Fall, und das Beste davon sind integrierte Übergangseffekte, mit denen Sie die Kontrolle über die sonst sehr codeintensiven CSS- und JavaScript-Strukturen übernehmen können, indem Sie nur ein oder zwei Zeilen Code verwenden. Dies spart Ihnen Zeit und Aufwand beim Erstellen Ihrer Anwendungen.

Eine weitere nützliche Funktion ist das native Rendering für bestimmte Gerätetypen wie Android und iOS, sodass Sie Ihre Anwendungen ohne zusätzlichen Arbeitsaufwand für die Geräte, auf denen sie ausgeführt werden, optimieren können.

Anfangen

Wie bereits erwähnt, ist Vue leicht zu erlernen, aber es ist keine Sprache für Anfänger. Sie müssen sich immer noch in einem Codeblock auskennen.

Das Problem ist, dass die Dokumentation, wie die meisten Frameworks, sehr faul ist und hauptsächlich dazu dient, Sie zu überzeugen, sie zu verwenden. In der Dokumentation wird viel weniger darauf geachtet, wie alles funktioniert und warum Sie bestimmte Dinge tun. Praktisch jedes offizielle Rahmenbeispiel, das jemals erstellt wurde, lässt wichtige Informationen aus, die Sie stundenlang suchen müssen, um sie zu entdecken. Das ist ein Fehler, den auch Vues Dokumentation und Beispiele teilen.

Um zu verstehen, was Sie wirklich tun müssen, um dieses Projekt neu zu erstellen, sind die folgenden Schritte erforderlich:

1. Fügen Sie ein Skript hinzu, das auf vue.js verweist

Um die Geschwindigkeit zu optimieren, sollten Sie dies am besten nach Ihrem gesamten Seiteninhalt einfügen, jedoch unmittelbar vor dem schließenden body-Tag in der HTML-Quelle. In diesem Abschnitt können auch andere Seitenressourcen geladen sein. Die Reihenfolge der Ladepriorität bestimmt, in welcher Reihenfolge Sie jede Ressource einfügen.

Hier ist ein Beispiel für das Einfügen von vue.js aus einem CDN:

Und hier ist ein Beispiel für das Einbinden von vue.js aus einem Verzeichnis auf Ihrem eigenen Server:

Ohne diesen Verweis auf vue.js kann nichts im Zusammenhang mit Vue passieren.

2. Fügen Sie die Vue-Komponenten in Ihren HTML-Body ein

Das ist was mit diesem Code los ist:

Für den Moment macht es nicht viel Sinn, aber der Vue-Teil ist das leere "demo-grid" -Element und zusätzlich die Eingabe einer "v-Direktive" zur Abfrageingabe (in diesem Fall "v-model") ”, Die zum Binden von Vue-Code zur Bildung von Eingaben verwendet wird).

3. Wenn für das Projekt eine Komponentenvorlage erforderlich ist, fügen Sie diese dem HTML-Hauptteil hinzu

Dieser Codeabschnitt ist ungewöhnlich, da er wie ein normaler HTML-Code in einem Skript-Tag aussieht, was die meisten HTML-Bearbeitungsprogramme verwirren wird (Beachten Sie, dass die Anzeigefarben an einigen Stellen falsch sind).

4. Fügen Sie die Vue-Instanz hinzu

Dies sollte eines der letzten Elemente sein, die auf der Seite angezeigt werden, da sie eine dynamische Rendering-Aufgabe ausführt. Dies bietet einige Optimierungsvorteile gegenüber dem Hinzufügen zu einem früheren Zeitpunkt auf der Seite.

  • Zeile 46 gibt an, dass der Browser auf der Seite nach einer Komponente namens "Demo-Grid" suchen soll, und Zeile 47 gibt an, dass "# grid-template" als Vorlage für die Komponente verwendet werden soll (dies ist der in Schritt hinzugefügte Vorlagencode 3 von Zeile 9 bis Zeile 30).
  • Ein Block von Zeile 48 bis Zeile 52 definiert die Eigenschaften der Komponente.
  • Die Zeilen 53 bis 62 definieren eine Funktion zum Sortieren der Daten in der Tabelle.
  • Die Zeilen 63 bis 85 definieren eine Funktion zum Filtern von Daten (aus den Ergebnissen der Suchabfrage).
  • Die Zeilen 86 bis 90 definieren eine Funktion zur Großschreibung der Wörter in einem Datensatz.
  • Die Zeilen 91 bis 97 definieren die Methode zum Sortieren von Daten.

5. Fügen Sie vor dem schließenden Skripttag den Startcode hinzu

Wenn Sie die Schritte 1 bis 4 ausgeführt und die Datei im Browser geöffnet haben, sehen Sie nur das Suchfeld und nichts weiter. Dies liegt daran, dass alles, was zum Erstellen der Tabelle erforderlich ist, definiert, aber nicht erstellt wurde. In Schritt 5 fügen wir also den Code hinzu, der die Tabelle erstellt, die in allen vorherigen Schritten definiert wurde.

  • Zeile 100 erstellt ein neues Vue-Objekt.
  • Zeile 101 gibt an, an welches Element die Aktion gebunden werden soll.
  • Die Zeilen 102 bis 111 liefern die Objektdaten, die an das Element gebunden werden.

Testing

Nachdem Sie das erforderliche Objekt definiert und erstellt haben, können Sie das Ergebnis jetzt testen. Bereiten Sie sich darauf vor, unterfordert zu sein, denn dies sollte im Browser angezeigt werden:

Was ist los? Warum ist es so langweilig? Es liegt daran, dass kein Styling angewendet wird. Wenn wir den Standardstil aus dem JSFiddle-Beispiel verwenden, würde die Tabelle folgendermaßen aussehen:

Wenn Sie etwas in das Suchfeld eingeben (nicht zwischen Groß- und Kleinschreibung unterscheiden), werden die Ergebnisse entsprechend gefiltert:

Durch Klicken auf eine Spaltenüberschrift können Sie die Anzeigereihenfolge ändern. Wenn Sie beispielsweise auf die Spaltenüberschrift „Power“ klicken, werden die Ergebnisse in der Reihenfolge ihrer Leistungsstufe angezeigt.

Verbessern und anpassen

Ein weiteres Problem bei Framework-Beispielen ist, dass sie normalerweise nicht viele Informationen enthalten, um jemandem zu helfen, der sich nicht mit der Codebase auskennt, um herauszufinden, wie er in diesem Bereich das anwenden kann, was er im Beispiel sieht. Vue leistet im Vergleich zu Bootstrap (der bekanntermaßen wenig informativ ist) eine hervorragende Arbeit, lässt aber dennoch viele unbeantwortete Fragen offen.

Hier einige Änderungen, die wir an dieser Anwendung vornehmen könnten, um ihr Aussehen und ihre Funktionsweise zu ändern:

  • Gestalten Sie die Tabelle als gestreifte Bootstrap-Tabelle
  • Ändern Sie die Anzahl der Spalten
  • Ändern Sie die Daten in etwas völlig anderes

1. Bootstrap hinzufügen

2. Das Element in eine Bootstrap-Tabelle einwickeln

3. Anpassen des Root-Elements zur Verwendung des Bootstrap-Layoutmodells

4. Die Pfeile neu gestalten

5. Daten ändern

6. Testen

  • Ungefiltert und unsortiert

  • Sortiert nach Richtlinie (aufsteigend)

  • Sortiert nach Verwendet für (aufsteigend)

  • Gefiltert nach „bedingt“

  • Gefiltert nach „bedingt“ und nach Richtlinie sortiert (aufsteigend)

Abschließende Gedanken

Aus diesen Beispielen wurde hoffentlich klar, dass wir zwei Anwendungen mit sehr unterschiedlichem Aussehen und Inhalt aus einem gemeinsamen Codeabschnitt erstellt haben. Mit Vue ist es sehr einfach, Ihren Code für mehrere Projekte wiederzuverwenden, was zu erheblichen Zeiteinsparungen führen kann.

Headerbild mit freundlicher Genehmigung von Aleksandar Savic

Bogdan Rancea

Bogdan ist Gründungsmitglied von Inspired Mag und hat in diesem Zeitraum fast 6-Jahre Erfahrung gesammelt. In seiner Freizeit studiert er gern klassische Musik und erforscht die bildende Kunst. Er ist auch ziemlich besessen von Fixies. Er besitzt bereits 5.