Vue 3 mit TypeScript

GFU Cyrus AG, in Köln (+1 Standorte)
Dauer
3 Tage
Durchführungsform
Präsenzkurs / vor Ort, Online-Kurs / Fernlehrgang
Nächster Starttermin
8 Juli, 2024 (+8 Starttermine)
Preis
1.930 EUR MwSt. befreit
Webseite des Anbieters
Sprache
Deutsch
Dauer
3 Tage
Durchführungsform
Präsenzkurs / vor Ort, Online-Kurs / Fernlehrgang
Nächster Starttermin
8 Juli, 2024 (+8 Starttermine)
Preis
1.930 EUR MwSt. befreit
Webseite des Anbieters
Sprache
Deutsch
Ab 1.930 EUR MwSt. befreit / Person

Beschreibung

GFU Cyrus AG

Vue 3 mit TypeScript

Vue 3 ist die neueste Version von Vue, die vom Vue-Team von Grund auf mit TypeScript neu geschrieben wurde.
Die neue Version bietet zahlreiche neue und praktische Features, die es Entwicklern ermöglicht, lesbare und wartbare Komponenten zu erstellen und Vue-Anwendungen zu strukturieren.
Der Einsatz von TypeScript als Superset von ECMAScript bietet Entwicklern den aus typensicheren Programmiersprachen wie zB Java oder C# bekannten Komfort der Typensicherheit. Zudem können für die eigene Anwendung individuelle Datentypen erstellt werden und deren Verwendung im Code durch zB Interfaces abgesichert werden. 

Dabei können Entwickler den vollständigen Sprach- und Funktionsumfang von TypeScript nutzen und den finalen Code in die gewünschte und benötigte ECMAScript-Version (ES5, ES6 oder auch höher) zu transpilieren.
Aus diesen Vorteilen ergibt sich eine bessere Code Qualität, eine höhere Stabilität der Programme, der Komfort, Fehler bereits beim Schreiben des Codes zu entdecken und nicht erst bei der Ausführung und 'last but not least' eine bessere Wartbarkeit des Codes.
Mit Vue erhalten sie ein freies, sehr schnelles, stabiles und ausgereiftes Framework. Dabei besticht es durch eine extrem steile Lernkurve. Wenig Kenntnisse in HTML, CSS und JavaScript reichen bereits aus, um mit Vue ansprechende und funktional komplexe Anwendungen mit webbasiertem Frontend zu erstellen.

Vite ist ein JavaScript-Build-Tool, welches eine schnellere und schlankere Entwicklungserfahrung für moderne Webprojekte bieten soll. Das Wort “Vite” kommt hierbei vom Französischen und bedeutet “schnell”.
Vite ersetzt seit Vue 3 als neuer Standard das vorherige Vue CLI.
Das ganze Seminar ist praxisnah und "HandsOn" ausgerichtet. Die meisten Punkte der Agenda werden jeweils in einem Projekt integriert, damit Sie die Verwendung und ihren Einsatzzweck in praktischen Beispielen nachvollziehen und auf Ihren eigenen Anwendungsfall übertragen können.

Ablauf: Am ersten Seminartag lernen Sie die Erstellung eines Vue-Projekts mit Vite sowie die Architektur kennen. Sie erlernen die Grundlagen, wie zB die Kontrollstrukturen, das Binding und Eventhandling sowie die Kommunikation zwischen den Komponenten.
Am zweiten und dritten Seminartag erstellen Sie ein praxisnahes Projekt "from Scratch" und festigen die Techniken, die sie am Vortag kennengelernt haben.
Auch für die Themen "Statemanagement mit Pinia" und "Unit-Testing mit Vitest" werden in dem Seminar eigene kleine Projekte erstellt.
Wichtiger Hinweis: Dadurch, dass TypeScript ein Superset von ECMAScript ist, eignet sich dieses Seminar auch für diejenigen, die im Anschluss Vue 3 nur mit JavaScript und ohne TypeScript einsetzen möchten.

Kommende Starttermine

Wählen Sie aus 8 verfügbaren Startterminen

8 Juli, 2024

  • Präsenzkurs / vor Ort
  • Köln
  • Deutsch

8 Juli, 2024

  • Online-Kurs / Fernlehrgang
  • Online-Kurs / Fernlehrgang
  • Deutsch

28 Oktober, 2024

  • Präsenzkurs / vor Ort
  • Köln
  • Deutsch

28 Oktober, 2024

  • Online-Kurs / Fernlehrgang
  • Online-Kurs / Fernlehrgang
  • Deutsch

13 Januar, 2025

  • Präsenzkurs / vor Ort
  • Köln
  • Deutsch

13 Januar, 2025

  • Online-Kurs / Fernlehrgang
  • Online-Kurs / Fernlehrgang
  • Deutsch

23 April, 2025

  • Präsenzkurs / vor Ort
  • Köln
  • Deutsch

23 April, 2025

  • Online-Kurs / Fernlehrgang
  • Online-Kurs / Fernlehrgang
  • Deutsch

Inhalte / Module

  • Einstieg in Vue 3 mit Vite
    • Konzepte von Vue
    • Konfiguration der Umgebung, Tools, Plugins
    • Neue Projekte Vite erzeugen
    • Erstellen einer Start-Seite
    • Composition API / Option API
    • Einsatz mehrerer Root Elemente / Fragments
  • Templates, Komponenten, Direktiven
    • Erstellen von Components
    • Templates und Template-Syntax
    • Data-Binding mit Attributes und v-bind
    • Two-Way-Binding mit v-model
    • 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
    • Bedingte Formatierung mit style- und class-Bindings
    • Verwendung von SASS und anderen CSS-Präprozessoren
    • Verwendung einzelner Lifecycle Hooks
  • Kommunikation zwischen 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
    • Daten Komponentenübergreifend übergeben und entgegennehmen mit provide / inject
    • Verwendung der Portals-Komponente / Teleport
  • Erstellen von Custom Directives
    • Erzeugen einer Custom Directive
    • Datenübergabe an Directives
    • Verwenden der Directive-Lifecycle-Hooks
    • Globale Directives
  • AJAX Request
    • AJAX GET- und POST-Requests nativ mit der Fetch API
    • AJAX Requests mit der Bibliothek Axios
  • Seitennavigation mit Routing
    • Hinzufügen von Routing in eine Vue-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 benannter Views
    • Aktivieren des HTML5-History-Modus
    • Schutz von Seiten mit den Navigation-Guards
  • State Management mit Pinia als Data Store
    • Pinia als Store verwenden
    • State Management / Pinia als neuer Standard in Vue 3
    • Kurzer Überblick über Pinia vs Vuex
    • Pinia installieren
    • Getters und Actions erstellen
  • Unit Testing mit Vitest
    • Installation, Integration und Konfiguration von Vitest in einem Vite-Projekt
    • Eigene Test-Suites erstellen
    • Mausklicks in Tests simulieren und Ergebnis auswerten
    • Mocks am Beispiel von AJAX-Requests mit Axios erstellen
    • Mock Browser API mit Happy DOM
    • Erstellen von Spy-Objekten
    • Testabdeckung der Anwendung durch Coverage beobachten
    • Snapshots erstellen
    • Eigene Vue-Komponenten mounten und testen

Zielgruppe / Voraussetzungen

Web-Entwickler, Web-Programmierer, Developer webbasierter Anwendungen, Web-Worker mit Grundkenntnissen in HTML, CSS und JavaScript, die Web-Anwendungen und Single-Page-Apps (SPA) mit Vue.js erstellen wollen.
HTML- CSS- und JavaScript-Kenntnisse werden vorausgesetzt

Abschlussqualifikation / Zertifikat

Teilnahmezertifikat und digitales Badge

Infos anfordern

Stellen Sie jetzt eine Informationsanfrage

Kontaktieren Sie hier den Anbieter, um mehr über das Kursangebot Vue 3 mit TypeScript zu erfahren!

  Sie erhalten weitere Infos

  Unverbindlich

  Kostenfrei


reCAPTCHA logo Diese Webseite ist durch reCAPTCHA geschützt. Es gelten die Google Datenschutzbestimmungen und Nutzungsbedingungen.
GFU Cyrus AG
Am Grauen Stein 27
51105 Köln

GFU Cyrus AG

Erweitern Sie Ihre IT-Skills mit einem offenen IT-Training oder ganz nach Ihren Bedürfnissen durch eine individuelle IT-Schulung. Programmiersprachen (C#, Python, Java, …), Microsoft Office 365, Anforderungsmanagement, Projektmanagement, Business Intelligence, Data Science, Künstliche Intelligenz, IT-Sicherheit , Administration & Datenbanken, Softwareentwicklung, Testmanagement...

Erfahren Sie mehr über GFU Cyrus AG und weitere Kurse des Anbieters.

Anzeige