Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:modul:m291:learningunits:lu09:theorie:b_live_coding [2026/04/12 09:17] – gkoch
+++ de:modul:m291:learningunits:lu09:theorie:b_live_coding [2026/05/10 20:25] (aktuell) – gkoch
@@ Zeile 1: / Zeile 1: @@
-====== LU09b – Vue.js: Reaktive Variablen, v-bind und Mustache ======
+====== LU09b – Vue.js: Installieren und Accordion Projekt aufbauen ======
-===== Lernziele =====
-  * Sie verstehen, was reaktive Variablen sind, wie ''ref()'' funktioniert und warum wir sie brauchen.
-  * Sie kennen die wichtigsten Vue-Direktiven: ''v-bind'' und ''v-on''.
-  * Sie können JavaScript-Werte direkt im HTML-Template mit ''%%{{ }}%%'' ausgeben.
-  * Sie sind vertraut mit der Struktur einer Vue-Komponente (''<script setup>'', ''<template>'', ''<style>'').
@@ Zeile 68: / Zeile 61: @@
 </WRAP>
+{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-12_at_09.02.50.png?direct&700|Starten von vuejs}}
-{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-12_at_09.01.57.png?direct&700|Installation von Vue.js}}
+Ö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 ====
-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
   * **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 ====
@@ Zeile 105: / Zeile 105: @@
 </code>
 </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:
@@ Zeile 124: / Zeile 128: @@
 </code>
 </WRAP>
 ==== Schritt 2: Komponente in App.vue einbinden ====
@@ Zeile 144: / Zeile 149: @@
 **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>
+{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-11_at_22.47.31.png?direct&1100|}}
 ==== Schritt 3: CSS hinzufügen ====