LU08c – Vue.js: HTML und JavaScript, eine Liebesgeschichte

Stellen Sie sich vor: HTML und JavaScript sitzen im selben Raum, aber sie sprechen nicht miteinander. JavaScript muss jedes Mal den Umweg über den DOM nehmen – wie eine Nachricht, die früher über mehrere Boten vom Sender zur Empfängerin gelangte.

// JavaScript sucht sich sein Element mühsam zusammen...
const panel = document.querySelector('.panel');
 
// ...und greift dann von aussen ein
panel.classList.add('open');
panel.setAttribute('aria-expanded', 'true');

HTML weiss nichts von JavaScript. JavaScript weiss nichts von HTML. Sie starren sich an – aber eine direkte Verbindung gibt es nicht. Das funktioniert, aber es ist schwerfällig, fehleranfällig und wird mit jedem weiteren Baustein unübersichtlicher.

Dann kommt Vue.js und baut eine Brücke. Plötzlich reden HTML und JavaScript direkt miteinander. Das Template ist kein stummes HTML mehr – es ist ein lebendiger Organismus, durchzogen von JavaScript-Logik.

const isOpen = ref(false);

Mit `ref()` wird eine Variable reaktiv. Stellen Sie sich das wie einen Herzschlag vor: Sobald sich der Wert ändert, spürt Vue es sofort und lässt alle betroffenen Stellen im Bildschirm neu aufleuchten – ganz ohne, dass Sie selbst mit `querySelector` auf die Jagd gehen müssen. Die Variable ist der eine, einzige Ort, an dem die Wahrheit wohnt.

<p>{{ isOpen }}</p>

Zwei geschweifte Klammern wie ein kleines Guckloch: Sie betten einen JavaScript-Wert direkt ins HTML ein. Ändert sich der Wert, springt die Anzeige automatisch mit – wie ein Echo, das immer dann ertönt, wenn Sie rufen.

<!-- So sieht die Verlobung aus (Langform) -->
<div v-bind:class="{ open: isOpen }">
 
<!-- Und so die Hochzeit (Kurzform) – viel schöner -->
<div :class="{ open: isOpen }">

Ohne den Doppelpunkt wäre `class=„{ open: isOpen }„` nur ein toter Text. Mit dem Doppelpunkt aber wird der Ausdruck rechts als JavaScript lebendig. Die Klasse erscheint und verschwindet, sobald `isOpen` die Stimmung wechselt. Das ersetzt das fummliche `classList.add()` und `.remove()`.

Und das geht mit jedem Attribut:

:href="url"
:disabled="isLoading"
:aria-expanded="isOpen"

<!-- Die feierliche Version -->
<button v-on:click="toggleOpen">
 
<!-- Der lockere Alltag -->
<button @click="toggleOpen">

Das `@`-Zeichen ist die Kurzform von `v-on:`. Sie müssen nicht mehr in JavaScript einen `addEventListener` basteln und vorher mühsam das Element suchen. Stattdessen steht das Event direkt dort, wo es passiert – am Knopf selbst, mitten im HTML. Das ist wie wenn ein Lichtschalter sagt: «Ich reagiere auf deine Hand» – ohne dass Sie die Sicherungskasten-JavaScript bemühen müssen.

Alle diese Konzepte folgen derselben Idee – und die lässt sich in einer kleinen Tabelle wunderbar sehen:

Das Herzstück: `ref()` ist das Fundament – sie macht die Daten reaktiv. ``, `:` und `@` sind die Brücken, über die diese Daten direkt mit dem HTML flüstern. Zusammen ergibt sich eine kohärente Einheit, in der Struktur und Logik nicht mehr getrennt sind – sie sind ein Paar.