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

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

Link zu dieser Vergleichsansicht

Beide Seiten der vorigen Revision Vorhergehende Überarbeitung
Nächste Überarbeitung		 Vorhergehende Überarbeitung
de:modul:m291:learningunits:lu09:theorie:b_live_coding [2026/04/12 09:20] – gkochde:modul:m291:learningunits:lu09:theorie:b_live_coding [2026/04/12 14:25] (aktuell) – gkoch
Zeile 71: Zeile 71:
  
 Ö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 ====
Zeile 78: Zeile 80:
   * **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.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&400|Vue extension installieren}} +{{: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&400|Auto close Tags 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 106: 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 125: Zeile 135:
 </code> </code>
 </WRAP> </WRAP>
 +
  
 ==== Schritt 2: Komponente in App.vue einbinden ==== ==== Schritt 2: Komponente in App.vue einbinden ====
Zeile 145: 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.1775978448.txt.gz
  • Zuletzt geändert: 2026/04/12 09:20
  • von gkoch