====== LU09b – Vue.js: Reaktive Variablen, v-bind und Mustache ======
===== 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 (''
{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-11_at_22.11.14.png?direct&700|}}
//Accordion.vue erstellen//
Fügen Sie im ''''-Bereich das HTML-Grundgerüst ein – Sie können es aus dem bestehenden FAQ-Accordion übernehmen:
FAQs
It's a small but mighty mission: you'll build an FAQ accordion with
panels that open and close.
==== Schritt 2: Komponente in App.vue einbinden ====
Damit die Komponente im Browser erscheint, muss sie in ''App.vue'' importiert und gerendert werden:
**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.
{{:de:modul:m291:learningunits:lu09:theorie:screenshot_2026-04-11_at_22.47.31.png?direct|}}
==== Schritt 3: CSS hinzufügen ====
Im ''