Die Teile einer .vue-Datei

Eine .vue-Datei hat bis zu drei Teile, jeden in einem eigenen Element. Hier ist eine App.vue mit allen dreien:

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

<template>
    <h1>{{ cafe }}</h1>
    <p class="zeiten">Geöffnet von 7 bis 19 Uhr</p>
</template>

<style scoped>
.zeiten {
    color: #2f7d5b;
}
</style>

• <script setup> ist das JavaScript der Komponente: ihre Variablen und Funktionen. Es läuft, wenn die Komponente erstellt wird, bevor Vue sie anzeigt.
• <template> ist die Vorlage, das HTML, das sagt, was die Komponente zeigt. Sie kann verwenden, was im Skript steht: {{ cafe }} zeigt die Variable cafe. Mehr dazu in der nächsten Übung.
• <style scoped> ist CSS, geschrieben wie in einem Stylesheet. scoped (auf Deutsch „begrenzt“) bedeutet, dass seine Regeln nur für die Elemente dieser Komponente gelten: Die Regel .zeiten verändert hier keine Elemente mit der Klasse zeiten in anderen Komponenten. Stile für die ganze App gehören in style.css.

Jeder Teil ist optional: Die App.vue der letzten Übung hatte nur eine Vorlage. In diesem Kurs stehen die Teile immer in dieser Reihenfolge, mit einer Leerzeile dazwischen, wie in den meisten Vue-Projekten.

Ältere Tutorials schreiben Komponenten oft anders, mit export default { data() { … }, methods: { … } } in einem gewöhnlichen <script>. Das ist die Options API, so wurden Vue-Komponenten geschrieben, bevor es <script setup> gab. Sie funktioniert immer noch, aber dieser Kurs verwendet <script setup>, wie neue Vue-Projekte auch. Wenn ein Tutorial data() hat, ist es dasselbe Vue, nur auf die ältere Art geschrieben.