Daten anzeigen

Die Vorlage kann die Variablen aus <script setup> anzeigen: Schreibe den Namen der Variablen zwischen doppelte geschweifte Klammern, {{ }}.

<script setup>
const cafe = "Café am Eck";
const empfehlung = "Karottenkuchen";
</script>

<template>
    <h1>{{ cafe }}</h1>
    <p>Tagesempfehlung: {{ empfehlung }}</p>
</template>

Die Seite zeigt:

Café am Eck
Tagesempfehlung: Karottenkuchen

Vue setzt anstelle von {{ empfehlung }} den Wert der Variablen ein, und der Text um die Klammern bleibt, wie er ist. Die Leerzeichen innerhalb der Klammern sind nicht nötig, in Vue-Code stehen sie aber meistens.

Jede Variable aus <script setup> kann in der Vorlage verwendet werden, ganz ohne weiteren Code: kein querySelector() und kein textContent. Auch Zahlen funktionieren: Mit const preis = 4; zeigt {{ preis }} € auf der Seite 4 €. Und eine Variable kannst du an mehreren Stellen anzeigen. Wenn das Café seine Empfehlung ändert, änderst du eine Zeile im Skript, und jede Stelle auf der Seite zeigt die neue.

Typische Fehler:

• Einfache Klammern: { empfehlung } wird nicht ersetzt, und die Seite zeigt es so an, wie es ist, samt Klammern.
• Ein Name, den das Skript nicht hat, zum Beispiel der Tippfehler {{ empfelung }}: Die Seite zeigt an seiner Stelle nichts an, und die Konsole zeigt eine Warnung. Wie du sie liest, lernst du am Ende dieser Lektion.