Vue SFC: script template style
Forstå Single-File Component-formatet: script-blokken til logik, template-blokken til visningen og style-blokken til scoped CSS.
Vue SFC: script template style er en gratis Frontend Academy-lektion på CoddyKit. Dette er lektion 1 af 4. Du kan læse hele lektionen gratis nedenfor — og derefter øve dig praktisk i browseren med en indbygget kodeeditor og en AI-vejleder, der er tilgængelig døgnet rundt. Den er en del af læringsforløbet i Frontend Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Frontend Academy-kurset indeholder 4 lektioner i alt.
Hvad er en Single-File Component
En Vue Single-File Component (SFC) er en .vue-fil med tre blokke: <script> til JavaScript-logik, <template> til HTML-visningen og <style> til CSS. Alt til én komponent findes i én fil.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>script-blokken
Logik, data, importer og kode fra Composition API hører til her. Med <script setup> er variabler og importer, der erklæres på øverste niveau, automatisk tilgængelige i skabelonen.
script setup — den moderne tilgang
<script setup> er den anbefalede SFC-syntaks. Variabler, beregnede egenskaber og funktioner, der erklæres i den, er direkte tilgængelige i skabelonen uden at skulle returneres eksplicit.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Skabelonblokken
Skabelonen indeholder komponentens HTML-visning. Vue-skabeloner kompileres til renderfunktioner. Brug Vue-specifikke attributter og direktiver (v-if, v-for, @click) i skabelonen.
Skabeloninterpolation
Brug dobbelte krøllede parenteser {{ }} til at skrive reaktive data ud som tekst. Vue laver automatisk HTML-escaping — brug v-html-direktivet til at gengive HTML, men vær forsigtig.
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>style-blokken
CSS i style-blokken gælder for komponenten. Tilføj scoped for at begrænse typografireglerne til elementerne i denne komponent og forhindre utilsigtede globale stilartslækager.
<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>Sådan fungerer scoped-stilarter
Vue tilføjer en unik data-attribut (som data-v-abc123) til komponentens elementer og omskriver scoped CSS-vælgere, så de inkluderer den. Det sikrer, at stilene kun matcher elementer i denne komponent.
CSS Modules i Vue
Et alternativ til scoped er at bruge <style module> til CSS Modules. Tilgå klassenavne via objektet $style i skabelonen.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Globale stilarter
Stilarter uden scoped gælder globalt. Et almindeligt mønster er en global app.css med grundlæggende stilarter og designtokens samt scoped stilarter pr. komponent til komponentspecifikke regler.
TypeScript i SFC'er
Tilføj lang="ts" til script-blokken for at bruge TypeScript. Volar (den officielle Vue-IDE-udvidelse) giver fuld TypeScript-understøttelse til Vue-SFC'er, herunder typesikrede skabeloner.
Navngivning af SFC-filer
Navngiv SFC-filer med PascalCase (UserProfile.vue) til komponenter, der bruges i skabeloner. Vue anbefaler navne med flere ord for at undgå konflikter med HTML-elementer.
Hurtigt tjek
Hvad gør attributten scoped på en Vue-<style>-blok?
Opsummering: Vue SFC'er
Filer med filendelsen .vue har tre blokke: script (logik), template (visning) og style (CSS). Brug