de:modul:m291:learningunits:lu09:theorie:b_live_coding

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu09:theorie:b_live_coding [2026/04/12 08:56] – angelegt gkochde:modul:m291:learningunits:lu09:theorie:b_live_coding [2026/04/12 14:25] (aktuell) – gkoch
Zeile 1: Zeile 1:
-====== LU09a – Vue.js: Reaktive Variablen, v-bind und Mustache ======+====== LU09b – Vue.js: Reaktive Variablen, v-bind und Mustache ======
  
 ===== Lernziele ===== ===== Lernziele =====
Zeile 8: Zeile 8:
   * Sie sind vertraut mit der Struktur einer Vue-Komponente (''<script setup>'', ''<template>'', ''<style>'').   * Sie sind vertraut mit der Struktur einer Vue-Komponente (''<script setup>'', ''<template>'', ''<style>'').
  
----- 
- 
-===== Einstieg: Repetition LU08 ===== 
- 
-Öffnen Sie nochmals das StackBlitz-Projekt aus LU08 und Ihre Notizen vom letzten Mal. 
- 
-**Aufgabe (5 Min.):** Fügen Sie ein fünftes FAQ-Item ins Array ein. Was beobachten Sie? 
- 
-Danach: Offene Fragen aus LU08 besprechen. 
- 
----- 
  
 ===== Projektaufbau: Was ist was? ===== ===== Projektaufbau: Was ist was? =====
Zeile 37: Zeile 26:
  
 <WRAP tip round> <WRAP tip round>
-**Merksatz:** ''App.vue'' ist die Wurzel des Baums. Alles, was auf der Seite erscheint, wird direkt oder indirekt von ''App.vue'' gerendert.+''App.vue'' ist das Fenster zu unserer Applikation. Alles, was auf der Seite erscheint, wird direkt oder indirekt von ''App.vue'' gerendert.
 </WRAP> </WRAP>
  
----- 
  
 ===== Vue-Projekt erstellen ===== ===== Vue-Projekt erstellen =====
  
 ==== 1. Projekt anlegen ==== ==== 1. Projekt anlegen ====
 +
 +Öffnen Sie das Terminal im Ordner, in dem Sie das Projekt erstellen möchten:
 +
 +  * **Mac:** Rechtsklick auf den Ordner im Finder → //Dienste// → //Neues Terminal beim Ordner//
 +  * **Windows 11:** Rechtsklick auf den Ordner im Explorer → //In Terminal öffnen//
 +  * **Windows 10:** Rechtsklick auf den Ordner im Explorer → //PowerShell-Fenster hier öffnen// (falls nicht sichtbar: Shift + Rechtsklick)
 +
 +{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-12_at_09.06.00.png?direct&600| in Mac Terminal at Folder öffnen}}
  
 <WRAP box center round 80%> <WRAP box center round 80%>
Zeile 59: Zeile 55:
   * **Experimental features:** Nichts auswählen (Enter)   * **Experimental features:** Nichts auswählen (Enter)
   * **Skip all example code:** Yes   * **Skip all example code:** Yes
 +
 +{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-12_at_09.01.57.png?direct&700|Installation von Vue.js}}
  
 ==== 2. Projekt starten ==== ==== 2. Projekt starten ====
Zeile 69: Zeile 67:
 </code> </code>
 </WRAP> </WRAP>
 +
 +{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-12_at_09.02.50.png?direct&700|Starten von vuejs}}
  
 Öffnen Sie ''http://localhost:5173/'' im Browser. Öffnen Sie ''http://localhost:5173/'' im Browser.
 +
 +{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-11_at_22.47.31.png?direct&700|}}
  
 ==== 3. VS Code einrichten ==== ==== 3. VS Code einrichten ====
  
-Damit Syntax-Highlighting funktioniert, installieren Sie zwei Extensions in VS Code:+Damit Syntax-Highlighting funktioniert, installieren Sie zwei Extensions in VS Code (Webstorm braucht das nicht):
  
   * **Vue (Official)** – Syntax-Highlighting für ''.vue''-Dateien   * **Vue (Official)** – Syntax-Highlighting für ''.vue''-Dateien
   * **Auto Close Tag** – schliesst HTML-Tags automatisch   * **Auto Close Tag** – schliesst HTML-Tags automatisch
 +<WRAP center round box 80%>
 +{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-11_at_22.02.40.png?direct&400|Vue VS-Code extension für Syntax-Highlighting}}
 +{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-11_at_22.04.07.png?direct&500|Vue extension installieren}}
 +{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-11_at_22.17.48.png?direct&600|Auto close Tags installieren}}
 +</WRAP>
  
----- 
  
-===== Live Coding: FAQ Accordion in Vue =====+ 
 + 
 +===== FAQ Accordion in Vue =====
  
 ==== Schritt 1: Komponente erstellen ==== ==== Schritt 1: Komponente erstellen ====
Zeile 104: Zeile 112:
 </code> </code>
 </WRAP> </WRAP>
 +
 +
 +{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-11_at_22.11.14.png?direct&700|}}
 +//Accordion.vue erstellen//
  
 Fügen Sie im ''<template>''-Bereich das HTML-Grundgerüst ein – Sie können es aus dem bestehenden FAQ-Accordion übernehmen: Fügen Sie im ''<template>''-Bereich das HTML-Grundgerüst ein – Sie können es aus dem bestehenden FAQ-Accordion übernehmen:
Zeile 123: Zeile 135:
 </code> </code>
 </WRAP> </WRAP>
 +
  
 ==== Schritt 2: Komponente in App.vue einbinden ==== ==== Schritt 2: Komponente in App.vue einbinden ====
Zeile 143: Zeile 156:
 **Was haben wir gemacht?** Wir haben eine eigene **Komponente** erstellt – ein abgeschlossenes UI-Baustein, der einmal gebaut und beliebig oft eingesetzt werden kann. ''App.vue'' importiert und rendert ihn. Das ist das Komponentenprinzip von Vue. **Was haben wir gemacht?** Wir haben eine eigene **Komponente** erstellt – ein abgeschlossenes UI-Baustein, der einmal gebaut und beliebig oft eingesetzt werden kann. ''App.vue'' importiert und rendert ihn. Das ist das Komponentenprinzip von Vue.
 </WRAP> </WRAP>
 +
 +{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-11_at_22.47.31.png?direct|}}
  
 ==== Schritt 3: CSS hinzufügen ==== ==== Schritt 3: CSS hinzufügen ====
  • de/modul/m291/learningunits/lu09/theorie/b_live_coding.1775976983.txt.gz
  • Zuletzt geändert: 2026/04/12 08:56
  • von gkoch