Java Kurse
von Java Profis.

JavaScript

VueJS - Power Workshop: Der komplette Einstieg

Einführung in das JavaScript-Framework VueJS

3 Tage

Wenig Plätze frei - in Berlin
Plätze frei - in Köln

  • 3 praxisnahe Schulungstage mit vielen Übungen
  • Entwicklungsumgebung und Übungsbeispiele zum Mitnehmen auf USB Stick
  • Kursort in der 25. Etage im Gebäude Upper West mit Blick auf ganz Berlin
  • 1 x Berlin WelcomeCard: freie Fahrt mit U-, S-Bahn und Bus in Berlin (AB) für 3 Tage, 200 Rabattangebote, Stadtplan + Guide
  • Abwechselnde Mittaglocationen am Berliner Zoo
  • Mittagessen, Getränke und Obst sind all inclusive
  • inkl. Abendveranstaltung, wie z. B. Schiffsfahrt, Gang auf die Siegessäule oder ins Clärchens Ballhaus

Kursinhalte

  • Erste Schritte mit VueJS

    • Einführung und Überblick
    • VueJS lokal einrichten
    • Eine erste VueJS-Anwendung erstellen
    • Erweiterung der VueJS-Anwendung

  • Verwenden von VueJS zur Interaktion mit dem DOM

    • VueJS-Vorlagen verstehen
    • Wie die Syntax und die Vue-Instanz der VueJS-Vorlage zusammenarbeiten
    • Zugriff auf Daten in der Vue-Instanz
    • Bindung an Attribute
    • Verstehen und Anwenden von Direktiven
    • Einmaliges Rendern mit v-once
    • Ausgabe von HTML-Code
    • Auf Ereignisse reagieren
    • Abrufen von Ereignisdaten aus dem Ereignisobjekt
    • Eigene Argumente mit Ereignissen weitergeben
    • Ändern eines Ereignisses mit Ereignis-Modifikatoren
    • Abfangen von Tastatur-Ereignissen
    • Schreiben von JavaScript-Code in Vorlagen
    • Verwendung der Zwei-Wege-Bindung
    • Reagieren auf Änderungen mit berechneten Eigenschaften
    • Eine Alternative zu berechneten Eigenschaften: Änderungen beobachten
    • Zeitersparnis durch Abkürzungen
    • Dynamisches Styling mit CSS-Klassen

  • Verwendung von Conditionals und Rendering-Listen

    • Bedingtes Rendering mit v-if
    • v-else-if in VueJS 2.1
    • Verwendung einer alternativen v-if-Syntax
    • Rendering von Listen mit v-for
    • Abrufen des aktuellen Indexes
    • Verwendung einer alternativen v-for-Syntax
    • Schleifen durch Objekte
    • Schleifen durch eine Liste von Zahlen
    • Nachverfolgung von Elementen mit v-for

  • Die VueJS-Instanz verstehen

    • Einige Grundlagen über die VueJS-Instanz
    • Verwendung mehrerer Vue-Instanzen
    • Zugriff auf die Vue-Instanz von außen
    • Wie VueJS Daten und Methoden verwaltet
    • Verwendung von $el und $data in Vorlagen
    • Verwendung von $refs in Vorlagen
    • Weitere Informationen über die Vue-API
    • Laden einer Vorlage
    • Verwendung von Komponenten
    • Einschränkungen bei Templates
    • Wie VueJS das DOM aktualisiert
    • Der Lebenszyklus der VueJS-Instanz

  • Entwicklungs-Workflow mit Webpack und Vue CLI

    • Warum brauchen wir einen Entwicklungsserver?
    • Was bedeutet "Entwicklungs-Workflow"?
    • Installation des Vue CLI und Erstellen eines neuen Projekts
    • Ein Überblick über die Ordnerstruktur der Webpack-Vorlage
    • Verstehen von ".vue" Dateien
    • Verstehen des Objekts in der Vue-Datei
    • So erstellen Sie Ihre App für die Produktion
    • Mehr über ".vue" Dateien und die CLI
    • Debuggen von VueJS-Projekten

  • Einführung in Komponenten

    • Komponenten - Überblick und Grundlagen
    • Speichern von Daten in Komponenten
    • Lokale und globale Registrierung von Komponenten
    • Die "Root-Komponente" in der App.vue-Datei
    • Erstellen einer Komponente
    • Verwendung von Komponenten
    • Komponenten und Ordnerstrukturen
    • Benennung der Komponenten-Tags (Selektoren)
    • Gültigkeit der Komponenten-Stile

  • Kommunikation zwischen Komponenten

    • Kommunikationsszenarien zwischen Komponenten
    • Verwendung von Eigenschaften für Parent- / Child-Kommunikation
    • Benennung von Eigenschaften
    • Verwendung von Eigenschaften in der Child Component
    • Validierung von Eigenschaften in der Child Component
    • Benutzerdefinierte Ereignisse für Child- / Parent-Kommunikation
    • Verstehen von Unidirektionalem Datenfluss
    • Kommunikation mit Callback-Funktionen
    • Kommunikation zwischen Child-Komponenten
    • Verwendung eines Ereignisbusses für die Kommunikation
    • Zentralisierung von Code in einem Ereignisbus

  • Erweiterte Komponentenverwendung

    • Weitergabe von Inhalten
    • Inhalte mit Slots übergeben
    • Styling von Slot-Inhalten
    • Verwendung mehrerer Slots per Namen
    • Standard-Slots und Slot-Standards
    • Umschalten von Komponenten mit dynamischen Komponenten
    • Verstehen des Verhaltens dynamischer Komponenten
    • Der Lebenszyklus von dynamischen Komponenten

  • Benutzereingaben über Formulare

    • Grundlegende Formularanbindung von Eingabefeldern
    • Gruppierung von Eingabedaten
    • Vorbelegung von Eingabefeldern
    • Änderung von Benutzereingabe mit Eingabemodifikatoren
    • Mehrzeilige Eingabefelder
    • Verwendung von Kontrollkästchen (checkbox)
    • Verwendung von Optionsfeldern (radio)
    • Listendelder mit <select> und <option>
    • Funktionsweise von v-model
    • Erstellung von benutzerdefinierten Elementen
    • Bestätigen und Absenden eines Formulars

  • Direktiven verwenden und erstellen

    • Direktiven verstehen
    • Funktionsweise von Direktiven
    • Erstellen einer einfachen Direktive
    • Weitergabe von Werten an benutzerdefinierte Direktiven
    • Weitergabe von Argumenten an benutzerdefinierte Direktiven
    • Ändern einer benutzerdefinierten Direktive mit Modifikatoren
    • Lokale Registrierung von Direktiven
    • Verwendung mehrerer Modifikatoren
    • Komplexere Werte an Direktiven übergeben

  • Filter und Mixins

    • Erstellen eines lokalen Filters
    • Globale Filter und Verkettung von Filter
    • Alternative zu Filtern: Berechnete Eigenschaften
    • Mixins verstehen
    • Erstellen und Verwenden von Mixins
    • Zusammenführung von Mixins
    • Gültigkeitsbereich von Mixins

  • Animationen und Übergänge

    • Verstehen von Übergängen
    • Definieren einer Transition
    • CSS-Klassen für Übergänge zuweisen
    • Erstellen eines "Fade"-Übergangs mit CSS-Transition
    • Erstellen eines "Slide"-Übergangs mit CSS-Animation
    • Kombination von Animations- und Übergangs-Eigenschaften
    • Animieren von v-if und v-show
    • Festlegen einer on-load-Animation
    • Verwendung verschiedener CSS-Klassennamen
    • Verwendung dynamischer Namen und Attribute
    • Reagieren auf Transition-Ereignisse
    • Erstellen einer Animation in JavaScript
    • Animieren von dynamischen Komponenten
    • Animieren von Listen mit <transition-group>

  • HTTP-Server-Kommunikation mit vue-ressource

    • Zugriff auf Http über Vue-Ressource
    • Kommunikation mit Firebase
    • Daten an einen Server senden (Senden einer POST-Anfrage)
    • Daten holen und transformieren (Senden einer GET-Anfrage)
    • Globale Konfiguration der vue-ressource
    • Abfangen von Anfragen und Antworten
    • Erstellen von benutzerdefinierten Ressourcen
    • Unterschied Ressourcen zu "normalen" Http-Anfragen

  • Routing in VueJS

    • Einrichten des VueJS-Routers (vue-router)
    • Einrichten und Laden von Routen
    • Verstehen der Routing-Modi (Hash und History)
    • Navigieren mit Router-Links
    • Navigation aus dem Code heraus
    • Routenparameter einstellen
    • Abrufen und Verwenden von Routenparametern
    • Reagieren auf Änderungen der Routenparameter
    • Kinderrouten einrichten (verschachtelte Routen)
    • Benannte Routen
    • Query-Parameter verwenden
    • Mehrere Router-Ansichten (benannte Router-Ansichten)
    • Umleitung von Routen
    • Einrichten von "Catch All" und "Wildcard" Routen'
    • Animieren von Routenübergängen
    • Weitergabe des Hash-Fragment
    • Steuern des Scroll-Verhaltens
    • Routenschutz mit "Guards"
    • Verwendung des "beforeEnter" und "beforeLeave"-Guard
    • "Lazy Loading" von Routen

  • Zustandsverwaltung mit Vuex

    • Gründe für Zustandsverwaltung
    • Verständnis des "zentralisierten Zustands"
    • Verwendung des zentralisierten Zustands
    • Verstehen und Verwendung von Getter
    • Zuordnung von Getter zu Properties
    • Verstehen und Verwendung von Mutationen
    • Verwendung von Actions
    • Zuordnung von Actions zu Methoden

Kurzüberblick

Sie lernen die Grundlagen von VueJS, wie man eine Entwicklungsumgebung einrichtet, mit dem DOM interagiert, Komponenten entwickelt und verwendet, Formulareingaben bindet, sowie Direktiven, Filter und Mixins einsetzt, Anwendungen mit Animationen und Übergängen schöner gestaltet und mit Hilfe von Routing und der Vuex-Zustandsverwaltung professionelle Single-Page-Applikation (SPA) erstellt.

Beschreibung

VueJS ist ein großartiges JavaScript-Framework für die Erstellung von Frontend-Anwendungen. VueJS mischt das Beste aus Angular und React. Mit dem "VueJS - Power Workshop" gelingt der professionelle Einstieg in das VueJS Framework. Sie erhalten ein vollständiges Verständnis der Architektur hinter einer VueJS-Anwendung und lernen alle relevanten Informationen um moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen mit einem der modernsten JavaScript-Frameworks auf dem Markt zu entwickeln.

Teilnehmerkreis

Web-Entwickler, Web-Programmierer mit Erfahrung mit HTML, CSS, JavaScript, die mit VueJS moderne, komplexe, reaktionsschnelle sowie skalierbare Webanwendungen entwickeln wollen.

Über den Dozenten Peter Hecker

Peter Hecker ist im Vorstand der GFU Cyrus AG aus Köln. Er arbeitet seit 1985 als Softwareentwickler und Trainer. Sein Steckenpferd sind Internet- und Web-Projekte, von denen er seit 1995 eine Vielzahl realisiert hat. Die Teilnehmer seiner Schulungen schätzen seine praktischen Erfahrungen und die praxisnahe und pragmatische Wissensvermittlung. Seit 2009 beschäftigt er sich vorwiegend mit der Entwicklung von mobilen Websites und Anwendungen.

Uhrzeiten

Startzeit für den ersten Schulungstag:
10:00 Uhr - 17:00 Uhr.
Endzeit am letzten Schulungstag:
max. 16:00 Uhr.
Normale Schulungszeit:
09:00 - 16:30 Uhr.

Anreise zum Schulungsort

Am schnellsten und unkompliziertesten erreichen Sie uns mit den öffentlichen Verkehrsmittel, Haltestelle "Zoologischer Garten". Mit Ihrer Berlin Welcome Card sind die Fahrten für Sie kostenlos!

-> U- und S-Bahnplan Berlin.
-> BVG zum Zoologischen Garten.
-> Weg vom Zoo zum Upper West.

Tipp: Falls Sie mit dem ICE aus Hannover anreisen: Steigen Sie schon in Spandau aus und nehmen Sie den Regional Express (RE 63982) in Richtung Hauptbahnhof, Haltestelle "Zoologischer Garten" aussteigen.

Schulungsnotebook oder eigener Rechner?

Nutzen Sie entweder ein eingerichtetes Schulungsnotebook von uns oder bringen Sie Ihr Notebook mit. Die Rechnervoraussetzungen schicken wir Ihnen in einer Bestätigungsmail.

Maßgeschneidert?

Alle Kurse gibt es auch als
individuelle Firmenschulungen.

Kontaktieren Sie mich oder
nutzen Sie unseren
Schulungskonfigurator!

030 / 755 49 188

Tim.Neumann@GEDOPLAN.de

So läuft's bei uns

Lernen Sie uns Kennen

Stefan Kastigen

Dozent

Lukas Eder

Berater für Java/SQL, Autor für DZone, JCG, JAXenter, Speaker, Java Champion, JUG Schweiz Vorstandsmitglied

Carsten Frewert

Anwendungsberater, Systementwickler, Schulungsleiter

Alle Schulungsleiter bei GEDOPLAN IT Training.

Das erwartet Sie bei uns

Bei Kursen von GEDOPLAN IT Training ist nicht nur der Kaffee gratis.

Kaffee, Tee und kalte Getränke

Wer öfter trinkt, kann besser denken. Deshalb versorgen wir Sie mit ausreichend gratis Getränken.

Gratis Obst, Snacks und Mahlzeiten für einen erfolgreichen Java Kurs

Obst, Kekse und Mahlzeiten

Ein voller Bauch studiert zwar nicht gern, aber nur wer sich wohl fühlt, hat auch Spaß am Seminar.

Sie erhalten Ihre Java Schulungsunterlagen auf einem 32 GB USB-Stick.

Demos und Beispiele zum Mitnehmen

Unsere Kurse haben einen hohen Praxisanteil. Die komplette Übungsumgebung nehmen Sie bei vielen Kursen am Ende auf einem USB-Stick mit.

Ihre erfolgreiche Teilnahme an unserer Java Schulung wird bestätigt

Teilnahmebescheinigung

Nach erfolgreicher Teilnahme erhalten Sie eine Bescheinigung zur Bestätigung Ihrer Teilnahme.

Java EE 7 Buch von Dirk Weil

Dirk Weil schenkt Ihnen bei einer Buchung eines Java EE Kurses sein Buch Java über EE 7 – auf Wunsch mit Signatur und Widmung.