3 minutes reading time (595 words)

Komplexe Webanwendungen dank Vue.js

VueTitelbild

Vue.js wurde ursprünglich vom ehemaligen Google-Entwickler Evan Yu konzeptioniert und entwickelt. Das JavaScript Framework kann sich durchaus unter den Frameworks React und Angular einreihen. Die erste Version von Vue.js veröffentlichte der Entwickler im Februar 2014 auf der Plattform GitHub. Bereits in den ersten Wochen stiegen die Downloadzahlen explosiv nach oben.

 

Welche Vorteile habe ich mit Vue.js?

  • Das Framework ist leicht zu erlernen, aufgrund der einfachen, aufeinander aufbauender Konzepte und der guten Dokumentation
  • Weniger Restriktionen, mehr Flexibilität. Der Entwickler hat die Möglichkeit eine individuelle Lösung zu finden, und muss sich nicht an strikte Vorgaben halten, wie im Vergleich zu den anderen bekannten Größen im JS-Framework-Umfeld
  • Performance - Vue ist sehr schlank und wird durch seine Geschwindigkeit von vielen Entwicklern geschätzt
  • Gute Upgradefähigkeit durch ein stabiles API
  • Vue.js kann mit TypeScript gemeinsam genutzt werden
  • Kann in bestehende Projekte integriert werden, sowie mit bereits gerenderten HTML arbeiten
  • Die Community ist sehr aktiv und fachlich versiert.

 

Mit Vue.js lassen sich einfache sowie auch komplexe Anwendungen sinnvoll umsetzen. Seit der Einführung des Frameworks ist die Community rasant gewachsen, und erfreut sich über die kontinuierliche Weiterentwicklung, sowie deren Beliebtheit. Vue.js ist somit eine mögliche Alternative zu den Frameworks Angular und React.

Das Framework Vue.js arbeitet mit ähnlichen Ansätzen wie React und Angular. Vue.js ist einfach zu verstehen, solange du Kenntnisse in JavaScript, HTML und CSS hast. Es ist unglaublich vielseitig, kompakt und funktioniert mit einer Vielzahl anderer Webtechnologien. Das Framework ist eines der kleinsten und schnellsten Frontend-JavaScript-Frameworks.

Zudem bietet Vue.js eine sehr ausführliche Dokumentation, Einführung in Vue.js, sowie die Cookbook und der Styleguide. Im Cookbook werden Lösungen für typische Anwendungen von Vue.js angeführt und im Styleguide sind Hinweise, wie man seinen Code am besten aufbauen kann und ihn einheitlich hält.

Tipp - weitere Beispiele
Unter Liste auf Github findest du weitere konkrete Beispiele, welche alle möglichen Codeschnipsel sammelt, die mit Vue.js bereits realisiert wurden.

 

Anwendungsbeispiel mit Vue.js - Hello Vue!

In diesem kurzen Beispiel möchten wir die notwendigen Schritten für eine erste Vue.js Anwendung demonstrieren.

helloVue

  1. Hier deklarieren wir die Komponente für die Vue zuständig sein soll.
  2. Die JavaScript Bibliothek für Vue.js wird in unserem Code geladen.
  3. Dieser Abschnitt lässt Vue.js innerhalb der Website starten. Hier wird die Referenz app auf die Seite mitgegeben, an die sich Vue.js binden soll. Mit data erhält Vue.js eine Struktur, welche Daten auf der Seite dargestellt werden sollen.

Sobald der Wert, in unserem Beispiel, sich unter Punkt 3 bei message: ‚Hello Vue!’ im Editor ändert, wird der neue Wert sofort an die Seite übertragen. Somit ist ein neu Laden der Seite nicht notwendig.

Kostenloser E-Mail Kurs:

In 5 Schritten zu mehr Website Traffic

Diese 5 Profi-Tipps verhelfen dir zur Optimierung deines Website-Traffics!
In diesem kostenlosen E-Mail Coaching bekommst du von mir 5 Tage lang Profi-Tipps für eine enorme Steigerung deiner Website-Zugriffe.
Klicke jetzt hier und hole dir diesen Kurs.

 

Vue Projekte von Lackner Media

 

Doppler-Manufaktur

Unser Entwickler Team von Lackner Media hat bei dem Kunden Doppler-Manufaktur einen Schirmkonfigurator mit Vue.js realisiert. Der User kann sich dynamisch einen individuellen Regenschirm zusammen stellen. Mach dir selbst ein Bild davon.

https://www.doppler-manufaktur.com/schirmkonfigurator#/art

dopplerManufaktur

 

Light Attendance - Gesund im Licht

In diesem Projekt wurde ein PIN-Code entwickelt, welcher dazu dient die erworbene Halogenlampe von Light Attendance in Betrieb zu nehmen. Mit der Seriennummer von der Meditationslampe Lucia N°03 Home Portal kann der Kunde sich registrieren und erhält in wenigen Schritten seinen PIN-Code.

https://www.gesund-im-licht.at/at/lucia-n%C2%B003/pinmanager.html

1licht

 

 

Einführung Vue.js

In dem Tutorial werden wir eine Listen App erstellen, welche dynamisch neue Listen Namen hinzufügt. Bei dem Input Feld lernen wir die Submission Validation Methode von Vue.js besser kennen. Es wird auch das Routing abgedeckt, welches uns erlaubt zwischen den verschieden Seiten dynamisch zu wechseln, ohne das die Seite neu geladen werden muss.

 

Link zum Tutorial

Zusammengefasst werden diese Punkte durchgenommen:

  • Installation von Vue mit Vue CLI
  • Vue Components
  • Templating
  • Styling
  • Forms
  • Animation
  • Routing

 


Melde dich jetzt für unseren Newsletter an!

 

Oder folge uns auf Facebook:
Lackner Media auf Facebook
Jetzt Facebook-Fan werden

1
Aus für automatische Likes und Follows auf Instagr...
 

Kommentare

Derzeit gibt es keine Kommentare. Schreibe den ersten Kommentar!
Bereits registriert? Hier einloggen
Gäste
Donnerstag, 21. Februar 2019

Kostenloser Kurs:

Website Traffic Optimierung E-Mail Kurs

In 5 Schritten zu mehr Website Traffic
Die 5 effektivsten Wege zur Optimierung der eigenen Website-Performance!
Diese 5 Profi-Tipps verhelfen dir zur Optimierung deines Website-Traffics!

Jetzt E-Mail Adresse eintragen und starten: