Vue SFC: script, template, style
Verstehen Sie das Single-File-Component-Format: den script-Block für die Logik, den template-Block für die Ansicht und den style-Block für bereichsbezogenes CSS.
Vue SFC: script, template, style ist eine kostenlose Frontend Academy-Lektion auf CoddyKit. Dies ist Lektion 1 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Frontend Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Frontend Academy-Kurs umfasst insgesamt 4 Lektionen.
Was ist eine Single-File-Komponente?
Eine Vue-Single-File-Komponente (SFC) ist eine .vue-Datei mit drei Blöcken: <script> für die JavaScript-Logik, <template> für die HTML-Ansicht und <style> für CSS. Alles, was zu einer Komponente gehört, befindet sich in einer Datei.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>Der script-Block
Hier befinden sich Logik, Daten, Imports und Code der Composition API. Mit <script setup> sind Variablen und Imports, die auf der obersten Ebene deklariert wurden, automatisch im Template verfügbar.
script setup — Der moderne Ansatz
<script setup> ist die empfohlene SFC-Syntax. Darin deklarierte Variablen, berechnete Eigenschaften und Funktionen sind direkt im Template verfügbar, ohne dass sie ausdrücklich zurückgegeben werden müssen.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Der template-Block
Das Template enthält die HTML-Ansicht der Komponente. Vue-Templates werden in Render-Funktionen kompiliert. Verwenden Sie Vue-spezifische Attribute und Direktiven (v-if, v-for, @click) im Template.
Template-Interpolation
Verwenden Sie doppelte geschweifte Klammern {{ }}, um reaktive Daten als Text auszugeben. Vue maskiert HTML automatisch — verwenden Sie die v-html-Direktive mit Vorsicht, um HTML zu rendern.
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>Der style-Block
CSS im style-Block gilt für die Komponente. Fügen Sie scoped hinzu, um Styles auf die Elemente dieser Komponente zu begrenzen und versehentliche globale Style-Auswirkungen zu verhindern.
<style scoped>
.card {
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>So funktionieren Scoped Styles
Vue fügt den Komponentenelementen ein eindeutiges Datenattribut hinzu (etwa data-v-abc123) und schreibt Selektoren in Scoped CSS so um, dass sie dieses Attribut enthalten. Dadurch treffen die Styles nur auf Elemente dieser Komponente zu.
CSS-Module in Vue
Eine Alternative zu scoped sind CSS-Module mit <style module>. Greifen Sie im Template über das $style-Objekt auf Klassennamen zu.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Globale Styles
Styles ohne scoped gelten global. Ein gängiges Muster ist eine globale app.css für Basis-Styles und Design-Tokens sowie Scoped Styles pro Komponente für komponentenspezifische Regeln.
TypeScript in SFCs
Fügen Sie lang="ts" zum script-Block hinzu, um TypeScript zu verwenden. Volar (die offizielle Vue-IDE-Erweiterung) bietet vollständige TypeScript-Unterstützung für Vue-SFCs einschließlich typgeprüfter Templates.
Benennung von SFC-Dateien
Benennen Sie SFC-Dateien in PascalCase (UserProfile.vue), wenn die Komponenten in Templates verwendet werden. Vue empfiehlt mehrteilige Namen, um Konflikte mit HTML-Elementen zu vermeiden.
Schnelltest
Was bewirkt das Attribut scoped für einen Vue-<style>-Block?
Zusammenfassung: Vue-SFCs
.vue-Dateien bestehen aus drei Blöcken: script (Logik), template (Ansicht) und style (CSS). Verwenden Sie