Dieses Tutorial soll den perfekten und einfachen Einstieg in die Welt des Vue JS Frameworks bieten. 👍🏽 Hierfür entwickeln wir eine eigene, kleine Todo App auf Basis von Vue JS – ohne API. Wir gehen Schritt für Schritt die Anforderungen durch um mit Vue JS erfolgreich zu starten!

An wen richtet sich dieses VueJS Tutorial?

Grundsätzlich beschränkt sich dieses Tutorial auf das VueJS Framework. Dies bedeutet, dass Kenntnisse in der Javascript bzw. HTML Entwicklung bestehen sollten.

Unser HTML Onlinekurs [Videokurs]

Sollte bislang eher prozedual statt objektorientiert entwickelt worden sein, empfehle ich vorab ein PHP OOP Tutorial für Einsteiger. Falls die beiden Begriffe jeweils unbekannt sind, empfehle ich meinen anderen Kurs Einstieg in die Programmierung mit PHP.

Lieber ein VueJS Video Tutorial ansehen?

Falls Videos eher zu Deinen Präferenzen gehört, haben wir einen kostenfreien You-Tube Onlinekurs aufgesetzt.
Ja, dieser Kurs ist absolut kostenlos und wird es auch immer bleiben!

Zum kompletten, kostenfreien Vue JS Einsteigerkurs [YouTube Playlist]

Wir haben einen kostenfreien Vue JS Kurs auf unserem YouTube Kanal veröffentlicht um die wichtigsten Grundthemen für Dich vorzustellen.

Warum Vue? Vorteile auf einem Blick

  • In der min-Variante (also die komprimierte) nur ganze 20 KB klein
  • Extrem schnelle Seiten dank virtuellem DOM
  • Bekanntes HTML, CSS und natürlich JavaScript verwendbar
  • Geringer Aufwand, steile Lernkurve und Effizienz für große Projekte
  • Nur das was man braucht, also relativ wenig Overhead

Was ist Vue JS

Bei Vue.js handelt es sich allgemein gesagt um ein (Frontend-)Framework für Webanwendungen, mit dem man auf Basis von Javascript komponentenorientiert entwickeln kann. Viele Magazine im Netz sind der Meinung, dass es im Vergleich zu anderen Frameworks den Vorteil hat besonders schlank zu sein. Die Performance des Frameworks ist zudem besonders gut. Zudem ist Vue anpassungsfähig, einfach erweiterbar und universell einsetzbar. Also lasst uns loslegen und in diesem Tutorial die Eckpfeiler von Vue JS beleuchten.

Vue JS Voraussetzungen

HTML5 kennen, können und beherrschen

Um erfolgreich Vue JS zu lernen sind einige Voraussetzungen zu erfüllen, wie etwa das Lernen von HTML. Wir empfehlen hierbei zB. die Grundlagen von HTML-Einfach.de oder für intensivere Einarbeitung unseren HTML Onlinekurs (Aktionscode SCHNELLSTARTER für 20€ Rabatt).

Modernes JavaScript (zB. ECMA-Script bzw. ES6,…)

Wer sich bei “HTML5 kennen” gerade noch dachte, ja das kriege ich sehr gut hin, jetzt aber bei ECMA-Script ausgestiegen ist, dem empfehlen wir an dieser Stelle die JavaScript Grundlagen von SelfHTML durchzuarbeiten und mit dem ein oder anderen Projekt bereits Erfahrungen mit (modernem) JavaScript zu sammeln.

Wir haben aber auch hierfür eine YouTube Playlist auf unserem ständig aktualisierten YouTube Kanal erstellt, mit deren Hilfe ihr Euch noch einmal einen Überblick über die modernen JavaScript Grundlagen verschaffen könnt.

Warum überhaupt ein Framework?

Standards, Werkzeugkästen und Modernes JS

Aus welchen Blickwinkeln man es auch betrachtet, Frameworks helfen uns enorm in den Punkten Struktur, Standards und (Abwärts-)Kompatibilität. Denn abgesehen von dem Vorteil das Rad nicht ständig neu erfinden zu müssen, helfen die Standards von Frameworks vor allem in der Teamarbeit. Sie bringen Struktur, Standards und Kontinuität in unsere Anwendungsentwicklung. Modernes JavaScript wird schon seit einiger Zeit aus genau diesem Grund durch immer neue Frameworks angereichert. Doch ist es dabei besonders wichtig, vor allem auf ein Framework zu setzen, welches große internationale Anerkennung, eine lebhafte Community und somit auch viele Erweiterungen um sich scharen kann.

Frameworks können also auch als Werkzeugkästen gesehen werdne. Solche wie React, Angular JS oder eben Vue JS sind mittlerweile echte Vorreiter geworden.

Web Components

In den Anfangszeiten von HTML, und das bildet noch heute die Grundlage, waren Entwickler durch einige, wenige Elemente beschränkt. Diese waren div, h1, h2, h3,... sowie p oder auch table bzw. form. Hiermit wird vor allem deutlich, dass der Ursprung “Web-Seiten” dem Umstand entsprang, dass die HTML Dokumente maßgeblich strukturierte Dokumente mit Überschriften (h1, h2, h3,…), Absätzen (p) und diversen Inhaltselementen (div) waren. Als Facebook, Google usw. damit begonnen nicht mehr nur ihr Unternehmen als Webseite vorzustellen sondern das Web als eine Art Anwendungsplattform verstanden, waren diese Elemente nicht mehr genug, die WebComponents waren geboren. Diese wurden von W3C (dem World Wide Web Consortium) maßgeblich vorangetrieben. Die WebComponents sollten sowohl Standard-Komponenten enthalten als auch eigene, von Entwicklern entworfene Komponenten im Browser ermöglichen. Doch als Organisation waren sie profitorientierten Unternehmen in der Umsetzung nicht schnell genug, weshalb eine nicht-native (also nicht bereits im Browser eingebaute Funktionalität) andere Variante gefunden werden musste. React und Angular waren geboren, Vue JS kam nach und dutzende andere Frameworks folgten dem Siegeszug.

Der Start mit Vue JS

Minimalaufwand der Initialisierung

Etwas zu initiieren meint in der Fach- sowie Umgangssprache so viel wie beginnen, ins Leben rufen oder erschaffen.
Grundsätzlich muss darauf aufmerksam gemacht werden, dass beim Einsatz von Vue JS nur die Einbindung des Vue JS Core Quellcodes, welcher sehr klein ist, über das <script>-Tag notwendig ist. Anschließend muss new Vue() initialisiert werden. Wie wir weiter vorne gelesen und gelernt haben agiert Vue in irgendeiner Form mit den (HTML) Elementen im Browserdokument und ist JavaScript basiert, daher müssen wir bei der Initialisierung von new Vue() (hier bedeutet new genau so viel, wie einige hier vermuten werden: eine neue Vue Instanz soll initialisiert werden).

Weiter zu Seite 2

Nun sind wir startklar für den ersten Inhalt unserer Anwendung – auf der nächsten Seite unseres Tutorials VueJS Tutorial [deutsch] Seite 2!