Vue.js Einführung: Grundlagen für Web-Entwickler

Seminarziel

Nach dieser Veranstaltung kennen Sie die Grundlagen von Vue.js und können mit Components, Directives, Filters, Routing und dem Vuex-Store professionelle Web-Anwendungen erstellen.

Inhalt

• Einstieg in Vue.js und das Vue.js CLI
  • Konzepte von Vue.js
  • Konfiguration der Umgebung
  • Neue Projekte mit dem Vue.js CLI erzeugen
  • Erstellen einer Start-Seite
• Vue.js Components und die Vue.js Template-Syntax
  • Globale Vue.js-Components vs. Single-file-Vue.js-Components
  • Erstellen von Components
  • Data-Binding mit Attributes und v-bind
  • Event-Binding mit v-on
  • Verwenden der Shorthand Bindings
  • Binding von Computed Properties
  • Darstellung von Daten mit Interpolation
  • Bedingte Darstellung von Inhalten mit v-if und v-show
  • Elemente wiederholen mit v-for
  • Styling von Components
  • Styling von Child-Components
  • Bedingte Formatierung mit Style Bindings
  • Bedingte Formatierung mit Class Bindings
  • Verwendung von SASS und anderen CSS-Präprozessoren
  • Verwendung der Component Lifecycle Hooks
• Kommunikation von Components
  • Erstellen von Child-Components
  • Datenaustausch mit Child-Components über Props
  • Validierung von Props
  • Weitergabe an Parent-Components mit Events
  • Einfügen von Inhalten in Child-Components mit Slots
• Seitennavigation mit Routing
  • Hinzufügen von Routing in eine Vue.js-App
  • Verlinkung von Routen
  • Styling von Links mit der ActiveRoute
  • Navigating per JavaScript-Code
  • Arbeiten mit Routen-Parameter
  • Weitergabe von Params als Props
  • Verwendung von geschachtelten Routen
  • Verwendung von benannten Views
  • Aktivieren des HTML5-History-Modus
  • Schutz von Seiten mit den Navigation-Guards
• Verwaltung von Zuständen und Server Kommunikation mit Vuex
  • Erstellen eines Vuex-Store
  • Verändern des Vuex-Store-State mit Mutations
  • Laden von Elementen aus dem Vuex-Store
  • Verwenden von Vuex-Getter für berechnete Daten
  • Verwenden von Actions für das Lesen von Daten über ein API
  • Verwenden von Actions für das Speichern von Daten über ein API
  • Rückgabe von Promises aus Actions
  • Organisation des Store mit Modulen
  • Organisation der Module mit Namensräumen
  • Global- und Namespaced-State
  • Verwendung der Vuex-Helper: MapGetters, MapActions, MapMutations
• Erstellen von Custom Directives und Filters
  • Erzeugen einer Custom Directive
  • Datenübergabe an Directives
  • Verwenden der Directive-Lifecycle-Hooks
  • Globale Directives
  • Erzeugen eines Custom Filter
  • Globale Filters
• Verteilung von Vue.js Applikationen
  • Erstellen eines Vue.js Build mit dem Vue.js-CLI
  • Verwendung von Umgebungsvariablen und Build-Modes
  • Verteilung auf einen Produktion-Webserver
  • Verwendung von serverbasiertem Deep Linking
  • Anpassung der Webpack-Konfiguration