Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen Intensive Training
Beginner · 5 half days or 3 days or flexible as in-house training · Remote · Open Training or In-House
Favorite
Vue.js erfreut sich mehr und mehr an wachsender Beliebtheit. Es handelt sich hierbei um ein clientseitiges JavaScript-Webframework zur Erstellung von Single-Page-Webanwendungen.
Eine der ersten Fragen um dieses Framework ist oftmals: "Wie wird Vue ausgesprochen?" View? Vü? Die Antwort lässt sich in den ersten Zeilen der Dokumentation von Vue finden und ist wie folgt definiert: Vue (pronounced /vjuː/, like view).
Vue.js ist der Mittelweg zwischen Angular, welches primär für komplexe Enterprise-Anwendungen konzipiert ist und somit sehr Mächtig ist, und React, was ein sehr kleiner Layer ohne wirkliche Vorgaben ist und somit sehr viel Individualisierung ermöglicht. Vue.js ist sehr einsteigerfreundlich, da es klein aber dennoch sehr strukturiert aufgebaut ist.
Eine weitere Besonderheit ist, das dieses Projekt nicht aus der Schmiede der großen Unternehmen (Google Angular, Facebook React) kommt sondern ein unabhängiges Community-Projekt ist. Das Projekt wurde von Evan You im Jahr 2013 gestartet. Seine Vision war es, die Vorteile von AngularJS zu nutzen und eine leichtgewichtige Alternative für kleine Projekte zu schaffen. Das erste Release wurde 2014 veröffentlicht.
Als Erweiterung zu Vue wird in diesem Zusammenhang sehr oft das freie Open Source Framework Nuxt.JS genannt. Es ist ein Web Application Framework, das auf Vue.js, Node.js, Webpack und Babel.js basiert. Es betitelt sich selbst als „meta-framework for universal applications“, was soviel bedeutet wie ein universaler Rahmen für Web-Anwendungen. Dies bezieht sich auf die Möglichkeiten sowohl einzelne Komponenten, Single Page Applications, oder auch serverseitig-gerenderte Webseiten zu erstellen, die sich sehr gut mit SEO optimieren lassen.
Agenda
Themen TypeScript
Der TypeScript-Workshop beginnt mit den Grundlagen, vermittelt aber auch fortgeschrittene Konzepte, die speziell für den anschließenden Vue.js-Workshop wichtig sind. Dieser Workshop ist vor allem wertvoll für Teilnehmer, die mit Vue.js beginnen wollen, aber nur wenig TypeScript-Erfahrung besitzen.
- Warum TypeScript?
- Type inference
- Typendefinitionen
- Interfaces & Type Aliases
- Generics
- Utility Types
- Best Practises
Themen Vue.js
Intensiv-Workshop, bei dem Du anhand eines praktischen Beispiels in Vue 3 eingeführt wirst. Außerdem werden fortgeschrittene Themen besprochen und Best Practices vermittelt. Am Ende des Workshops wirst Du eine Referenz-Anwendung entwickelt haben, die Du als Blaupause für Dein nächstes Projekt verwenden kannst.
Hierfür stellen wir eine REST-API bereit, anhand der wir einen typtischen Start für eine Single-Page-Applikation durchspielen und zusammen entwickeln.
Vue.js Grundlagen:
- Vue.js als progressives Framework für Benutzeroberflächen.
- Reaktivität verstehen: Automatische UI-Updates bei Datenänderungen.
- Komponenten & Single-File Components (SFCs): Modulare Bausteine für sauberen Code.
-
Moderner Composition API und effizienter
<script setup>-Syntax. -
Wichtige Directives wie
v-if,v-for,v-bind,v-on. - Arbeiten mit Computed Properties.
- Event Handling für Interaktionen.
Formular-Management:
- Effiziente Verwaltung von Benutzereingaben in Formularen.
- Implementierung robuster Validierungen (inkl. HTML5 Built-in, Custom mit Watcher/Event Listener).
-
Zwei-Wege-Datenbindung mit
v-model.
Navigation mit Vue Router 4:
- Nahtlose Navigation in Single-Page Applications (SPAs).
- Routen definieren und Links erstellen.
- Dynamische Routen mit Parametern für Detailansichten.
- Lazy Loading zur Performance-Optimierung.
- Einsatz von Route Guards zum Schutz und zur Interaktion vor/während der Navigation.
State Management mit Pinia:
- Die empfohlene State Management Lösung für Vue.js.
- Vermeidung von "Prop Drilling" und effiziente globale Zustandsverwaltung.
- Stores installieren, definieren und nutzen.
- Arbeiten mit mehreren Stores.
- Pinia-Vorteile: Typsicherheit, Devtools-Unterstützung.
Modernes Tooling & Praxisprojekt:
- Projekt-Setup mit Vite, einem blitzschnellen Build-Tool.
- Arbeit an einem praxisnahen Beispielprojekt (BookMonkey).
- Direkte Anwendung des Gelernten in kleinen, sofort umsetzbaren Übungen.
Alle Materialien und Aufgaben sind im Classroom verfügbar und können auch nach dem Workshop abgerufen werden.
What you should know
- Grundlagenkenntnisse in HTML & CSS, JavaScript und TypeScript
- Technische Voraussetzung: Notebook mit Windows, Linux oder macOS
Zur Vorbereitung steht dir unser kostenloses JavaScript-Vorbereitungsmodul direkt im Kurs zur Verfügung.
Für eine umfassendere Einarbeitung in die Grundlagen kannst du auch unsere Intensiv-Schulungen besuchen: HTML & CSS Intensiv-Schulung, JavaScript Intensiv-Schulung und TypeScript Intensiv-Schulung.
The course “Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen” is aimed at Beginner.
What's Included
Select dates & book
for 3+ participants
Request in-house/corporate training
Submit a request and book a preliminary meeting with our advisor.
What our participants say
Ich konnte dem Trainer super gut folgen und er war sehr kompetent.
Attended Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen Intensive Training
Super Grundlagen Schulung! Hier lernt man alles was man wissen muss, um mit dem ersten Vue.js Projekt zu starten.
Attended Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen Intensive Training
Gute Erklärungen mit genug Prxisanteil, dass man auch tatsächlich was behält
Attended Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen Intensive Training
Eine hervorragend strukturierte Vue.js-Einsteigerschulung von einem erstklassigen Trainer, der die Erwartungen der Teilnehmenden vollständig berücksichtigt und sein Schulungsmaterial optimal darauf ausrichtet.
Attended Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen Intensive Training
Ich habe noch viel zu lernen, aber jetzt habe ich einen besseren Überblick über den Weg der vor mir liegt.
Attended Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen Intensive Training
Die Vue.js-Schulung bei Joe war wirklich lehrreich und hat Spaß gemacht. Ich kann sie jedem empfehlen, der mit Vue.js starten oder sein Wissen ausbauen möchte.
Attended Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen Intensive Training
Questions and answers
Our public Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen remote courses take place from 9:00 AM to 1:00 PM, on-site Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen trainings from 9:00 AM to 4:30 PM.
For in-house seminars, individual adjustments are possible.
Yes. At the end of each of our Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen seminars, participants receive a signed certificate of attendance.
The certificate includes a verification URL and can be shared on your LinkedIn profile. Learn more about managing certificates on LinkedIn.
Yes, we offer our Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen seminars in German and English.
Public dates are held in German, unless explicitly stated otherwise.
In-house seminars can be conducted in the desired language.
All materials and exercises are fully available in English.
Yes. We offer our Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen seminars both remotely and on-site. Thanks to our virtual classroom, you can conveniently participate in our workshops from anywhere. Our online presentations are regularly updated, and you have permanent access after the training. Exercises can be accessed and unlocked through an online interface, and we have added additional tasks to prepare you for remote workshops.
We also offer in-house seminars and public trainings on-site. In our schedule overview, you can see the respective venue of the trainings. For in-house trainings, we are happy to discuss the venue details individually with you.
For public Vue.js: Modul 1 - Komponenten, Reaktivität & Schnittstellen seminars, we use the online meeting tool Zoom alongside our classroom.
A test link is also included in the preparation to let you try out the technology. The remote workshop is designed so that everyone works from different locations with their own computer.
For in-house seminars, we can conduct the meeting via Zoom or Microsoft Teams.
Other meeting software may be used by arrangement.
For our in-house seminars, we additionally offer code mentoring.
What is code mentoring?
- Ask-Me-Anything sessions: Clarify questions and uncertainties from the course directly with an expert.
- Code review: Submit your own code snippets and have them analyzed and evaluated by experts.
- Advanced topics: Ask in-depth questions about the course topic to expand your knowledge.
For participants of public trainings, we recommend joining our community Discord server.
Your benefits on Discord:
- Diverse channels for questions and discussions – beyond the course topic.
- An engaged community that supports you in learning.
Our trainers are experienced experts from the industry:
- Experienced software developers
- Book and article authors
- Active members of the web community
- Organizers of meetups and conferences
Yes. You can enter your routing ID directly in our order form. Our invoices are sent as ZUGFeRD PDFs right after booking.
If you have provided a routing ID, our team will be notified and we will handle the upload to the portal. If we need additional information, we will contact you after booking.
Just send us an email. If you prefer a more personal contact, Britta is also happy to receive a call from you!