Was ist Vue.js? Ein Überblick für Anfänger

Eskere Guru
Was ist Vue.js? Ein Überblick für Anfänger - vuejs overview

Vue ist ein modernes Front-End-Framework, mit dem jeder eine Website oder Web-App erstellen kann. Es ist leicht, flexibel und einfach zu starten. Es ist aber auch ein umfassendes Framework, das erweitert werden kann, um die Anforderungen des fortschrittlichsten Web-App-Builders zu erfüllen.

Schauen wir uns Vue.js an und was Sie wissen müssen, um es zu verwenden.

Vue ist das vielseitigste Framework, das derzeit für JavaScript verfügbar ist. Es ist auch für Programmierer und Nicht-Programmierer gleichermaßen am einfachsten zu verstehen.

Vue ist für Leute, die neu in der Website-Entwicklung sind, leicht zu erlernen. Fast jeder, der mit HTML gearbeitet hat, ist an eine Wand gestoßen, an der er etwas tun möchte, was HTML nicht kann.

Was wäre zum Beispiel, wenn Sie einen Schalter hinzufügen möchten, um Ihr Website-Thema vom hellen in den dunklen Modus zu ändern? Wie wäre es mit einem einfachen Menü, das hinter einem Hamburger-Button versteckt ist? Dann müssen Sie möglicherweise etwas Javascript lernen .

Dies sind Aufgaben, die in JavaScript ziemlich einfach zu erledigen sind. Sie können einem Skript-Tag einen Ausschnitt aus JavaScript hinzufügen, und schon sind Sie fertig. So sieht das Einfügen von Text mit Vanille-JavaScript aus:

Die Art und Weise, wie JavaScript auf Seitenelemente verweist, kann für Anfänger verwirrend sein. Das Hinzufügen von JavaScript mit Vue ist genauso einfach wie das Hinzufügen von Vanille-JavaScript. Mit Vue erhalten Sie jedoch mehr Funktionalität und Zugriff auf moderne JavaScript-Techniken. So fügen Sie Text mit Vue ein:

Lassen Sie uns diese Beispiele ein wenig analysieren. In JavaScript musste der Code nach dem Element suchen, einen Aspekt auswählen und ändern. In Vue haben wir dem HTML mitgeteilt, wo variabler Text zu erwarten ist. Dann haben wir ein JavaScript-Objekt erstellt, es dem Element zugewiesen und den variablen Text festgelegt.

Dieses einfache Beispiel zeigt einen wichtigen Punkt. Am besten lassen Sie Ihren Code von Ihrem HTML-Code entkoppelt. Im Vue-Beispiel manipuliert Vue den HTML-Code nicht direkt. Es verwaltet nur sein eigenes Geschäft. Und es gab HTML mehr Funktionalität, ohne Code hinzuzufügen.

Wenn Sie mit anderen Frameworks vertraut sind, wissen Sie möglicherweise, dass Sie normalerweise eine App von Grund auf mithilfe ihrer Technologie erstellen müssen. Dies beinhaltet normalerweise das Erstellen einer App über die Befehlszeile und das Starten eines Servers. Im vorherigen Beispiel haben wir Vue jedoch zu einer statischen Website ohne all diese Komplexität hinzugefügt.

Vue ist jedoch ein Rahmen. Auf der Einführungsseite heißt es: "Im Gegensatz zu anderen monolithischen Frameworks ist Vue von Grund auf so konzipiert, dass es schrittweise übernommen werden kann." Das bedeutet, dass Sie in Ihren Apps so wenig oder so viel von der Leistung von Vue verwenden können, wie Sie möchten.

Sie können Vue verwenden, um eine Bild-Diashow zu verwalten, oder Sie können eine vollständige einseitige App mit allen Schnickschnack erstellen. Dazu gehören Testen, Routing, Statusverwaltung, Sicherheit und vieles mehr.

Aufgrund seiner Kraft und Vielseitigkeit spricht Vue ein breites Publikum an.

JavaScript ist ein sich schnell veränderndes Ökosystem mit viel Abwanderung. Es ist möglich, sich einer Sammlung von Werkzeugen zu widmen und zu sehen, wie sie zwei Jahre später veraltet sind. JavaScript erhöht auch die Komplexität von Websites. Die Installation eines Frameworks und eines riesigen wackeligen Stapels von Node-Paketen macht es nur noch schlimmer.

Einige Leute halten sich aus diesem Grund lieber an die Grundlagen. HTML funktioniert gut, CSS hat seine Macken und JavaScript ist irgendwie funky. Aber sie sind alle absolut solide! Sie verändern und entwickeln sich weiter, aber langsam und stetig. Viele Frameworks fügen am Ende Änderungen hinzu, die Ihren Code beschädigen.

Es gibt jedoch einige Skripte wie jQuery und Handlebars, die Ihnen das Leben als Front-End-Programmierer erleichtern. jQuery startet großartig, verwandelt sich aber in Spaghetti, wenn Ihre Codebasis zu komplex wird. Lenker ist auch schön, macht aber nicht viel, um JS selbst einfacher zu bedienen.

Vue kann beide Tools ersetzen und ihre Probleme lösen. Und das ohne Ihre Website vollständig zu übernehmen. Es werden moderne JavaScript-Praktiken ohne die modernen JavaScript-Kopfschmerzen eingeführt.

Vue ist ein leichtes Framework mit der Funktionalität von viel schwereren Frameworks. Wenn Sie Erfahrung mit der Front-End-Webentwicklung haben, können Sie Vue in wenigen Tagen erlernen. Wenn Sie dies nicht tun, können Sie nur mit so viel beginnen, wie Sie benötigen.

Einer der Hauptgründe für die Verwendung eines Frameworks sind die Tools, mit denen Sie die Entwicklung schneller und einfacher gestalten können. Eine progressive Web-App basiert beispielsweise auf programmgesteuerter Navigation, benutzerdefiniertem Layout und Struktur, die sich im laufenden Betrieb ändern. Front-End-Frameworks machen diese Herausforderung fast trivial. Und Vue ist keine Ausnahme.

Dank moderner Frameworks können Sie jetzt Projekte abschließen, die früher Monate in Wochen gedauert haben. Und weil Vue so leicht und einfach zu handhaben ist, können Sie Prototypen in Stunden oder Tagen fertigstellen.

Entwickler erwarten inzwischen gewisse Vorteile von modernen Front-End-Frameworks. String-Ersatz für HTML, komponentenbasierte Architektur und Tools sind gute Beispiele. Vue bietet all diese Vorteile sowie die im obigen Framework-Abschnitt genannten.

Web-App-Entwickler möchten ihre Produkte häufig als mobile App verfügbar machen. Traditionell haben sie zusätzliche Entwickler eingestellt, um für iOS und Android zu bauen. Dann müssten sie einen Weg finden, um zwischen den drei Plattformen zu koordinieren. Aber heute gibt es andere Möglichkeiten.

Eine Möglichkeit besteht darin, NativeScript zum Erstellen mobiler Apps zu verwenden, mit denen Entwickler mit demselben JavaScript-Code für Android und iOS erstellen können. Nativescript-Entwickler können ihren Webcode sogar auf Mobilgeräte portieren, ohne neue Entwickler einstellen zu müssen. Und es hat große Unterstützung für Vue.

Vue, Angular und React sind laut der State of JS-Umfrage von 2019 die drei beliebtesten Frameworks. Hier sind einige Punkte zu beachten:

  • Angular war das erste bekannte Front-End-Webframework. Es wird von Google veröffentlicht und gibt es seit 2010. Es hat die Welt über Direktiven und Drei-Wege-Datenbindung in dynamisches HTML eingeführt, wodurch der Code auf der Seite ohne Aktualisierung auf magische Weise aktualisiert wird.
  • React wurde erstmals 2013 von Facebook veröffentlicht und ist eine zugänglichere Alternative zu Angular. React ist am besten für die Verwendung von JSX und Komponenten bekannt.
  • Vue wurde 2014 von Evan You, einem ehemaligen Google-Mitarbeiter, veröffentlicht. Vue hat nichts zu bahnbrechendes eingeführt. Aber es wurde eine viel bessere und sauberere Arbeitsweise eingeführt.

Vorteile der Großen Drei

  • Angular ist ein Unternehmenstier eines Frameworks. Es ist am längsten her und wird von Google erstellt und gewartet.
  • React ist laut dem JavaScript- Status von 2019 das am weitesten verbreitete der drei großen Frameworks. Es ist als einfach zu handhaben und flexibel bekannt.
  • Vue ist subjektiv das am einfachsten zu erlernende und zu implementierende Framework. Und es bleibt so einfach wie es ist, ohne auf ein reichhaltiges und leistungsstarkes Funktionsspektrum zu verzichten.

Kritik an den Großen Drei

Winkelig

Angular war in der Vergangenheit notorisch schwer zu lernen. Version 1 (AngularJS) verwendete in seiner Dokumentation viel Informatikjargon auf College-Ebene. Version 2 (Angular) wurde jedoch stark vereinfacht und optimiert.

  • Als Google Angular veröffentlichte, wurden die übergeordneten Konzepte von AngularJS beibehalten. Aber das Unternehmen hat die Details so sehr geändert, dass viele Entwickler sie immer noch verwirrend fanden.
  • In den frühen Tagen von Angular gab es eine Menge Abwanderung, mit Code-brechenden Änderungen in fast jeder Veröffentlichung. Angular ist jetzt besser, aber für einige Entwickler immer noch sehr formal, starr und schwer zu erlernen.

Reagieren

Einer der besten und zugleich herausforderndsten Aspekte von React ist JSX. Es komprimiert HTML, CSS und JS in einer Sprache. Dies macht alles für Entwickler einfacher, für Designer jedoch schwieriger.

  • JSX erschwert auch die Arbeit mit vorhandenen Bibliotheken. Es wird auch als Anti-Pattern angesehen, Design, Layout und Code an derselben Stelle zu platzieren. Dies kann zu unordentlichem, unlesbarem Code führen.
  • React handhabt dies ordnungsgemäß, indem Komponenten zum Trennen von Code verwendet werden. Es liegt jedoch an den einzelnen Entwicklern, die Komponenten ordnungsgemäß zu verwenden.
  • Reagieren ist technisch ein Rahmen. Es fehlen jedoch einige wichtige Funktionen wie Navigation und App-weites Statusmanagement.

Vue

Vue löst alle Probleme, die in Bezug auf die beiden anderen großen Unternehmen erwähnt wurden. Im Gegensatz zu Angular ist es leicht zu lernen. Und im Gegensatz zu JSX trennen Vue-Komponenten HTML, CSS und JS.

  • Für Designer ist es viel einfacher, in einer Vue-Komponente zu arbeiten. Und alles sauber zu halten, liegt nicht ganz beim Entwickler.
  • Die größten Herausforderungen für Vue sind die relativ geringe Akzeptanz und das Fehlen von "Killer-Apps". Nicht wenige Unternehmen verwenden Vue, aber wohl hat keines von ihnen eine Markenbekanntheit.

Ist Vue eine weitere Modeerscheinung?

Obwohl es Vue schon seit mehreren Jahren gibt, ist es immer noch das neue Kind auf dem Block. Es hat auch nicht die Unternehmensunterstützung der beiden anderen. Und wie bereits erwähnt, gibt es keine Killer-Apps, die zeigen, was sie können.

Was Vue an Unterstützung auf Unternehmensebene fehlt, wird durch Leidenschaft und Unterstützung an der Basis wieder wettgemacht. Evan You führt eine Patreon-Kampagne durch, um sich selbst und einen anderen Entwickler zu unterstützen. In gewisser Weise wird Vue demokratisch geführt. Solange genügend Interesse an Vue besteht, dass Unternehmen bereit sind, es zu unterstützen, wird Vue bestehen bleiben.

Die besten Teile von Vue

Vue bietet die besten Teile der anderen Front-End-Frameworks sowie viele weitere Funktionen, die nur Vue bietet. Hier ist nur eine unvollständige Liste:

  • Vue verwendet eine komponentenbasierte Architektur für Struktur und Wiederverwendbarkeit.
  • HTML, CSS und JS werden in ihren Komponenten getrennt.
  • Vue wird Entwicklern und Designern gleichermaßen bekannt vorkommen.
  • Es bietet eine vollständige Benutzeroberfläche zum Bereitstellen, Erstellen und Erstellen von Projekten.
  • Vue verwendet Hot Reloading, wenn es als App ausgeführt wird. Beim Hot-Reloading wird nur das aktualisiert, was sich auf einer Seite ohne Aktualisierung geändert hat.

Vue ist ein privates Projekt ohne Unternehmensaufwand und Politik. Dies kann es für Unternehmen weniger wünschenswert machen. Aber es ist leicht zu lernen und macht Spaß, damit zu spielen, was es großartig für nervöse Startups macht.

Das vielleicht beste Merkmal ist, dass es vom Pragmatismus und nicht vom Komitee entworfen wurde, worum es bei Open Source-Software geht .