Strukturen script template style
Förstå strukturen i tre delar hos en Svelte-komponentfil.
Strukturen script template style är en gratis lektion i Sveltejs Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för Sveltejs Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Tre delar
En Svelte-komponentfil har tre valfria block på toppnivå: <script>, markupen och <style>.
Blocket script
Script-blocket innehåller komponentlogik i vanlig JavaScript eller TypeScript.
<script>
let name = "Ada";
</script>Markupen
Allt utanför script- och style-taggarna är komponentens markup. Det är HTML utökat med Sveltes mallsyntax.
<h1>Hello {name}!</h1>Blocket style
Formatmallarna begränsas till den aktuella komponenten. Andra komponenter behåller sitt eget utseende.
<style>
h1 { color: rebeccapurple; }
</style>En komplett komponent
Kombinera alla tre i en .svelte-fil.
<script>
let name = "Ada";
</script>
<h1>Hello {name}!</h1>
<style>
h1 { color: rebeccapurple; }
</style>Ordning enligt konvention
Enligt konventionen placeras script först, markupen därefter och style sist. Svelte kräver inte denna ordning.
TypeScript-variant
Lägg till lang="ts" i script-taggen för att använda TypeScript inuti den.
<script lang="ts">
let name: string = "Ada";
</script>Modulens script-kontext
Använd <script context="module"> för kod som körs en gång per modul, inte en gång per instans.
<script context="module">
export const VERSION = "1.0";
</script>Inga flera block
Du får ha högst ett instansscript och ett modulscript per fil.
Style-taggen är valfri
Om komponenten inte har några formatmallar kan du utelämna style-blocket helt.
Script-taggen är valfri
Komponenter med statisk markup kan även utelämna script-blocket. En .svelte-fil med enbart markup är giltig.
Snabbtest
Var placerar du begränsad CSS?
Sammanfattning
En Svelte-fil består av upp till tre block: script för logik, markupen och style för begränsad CSS.
Lär dig HTML med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 41
- Lektioner
- 163
Vanliga frågor
Är lektionen ”Strukturen script template style” gratis?
Ja – hela texten till ”Strukturen script template style” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i Sveltejs Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i Sveltejs Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Strukturen script template style”?
Förstå strukturen i tre delar hos en Svelte-komponentfil. Ni övar på Sveltejs Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig Sveltejs Academy?
Du behöver inga förkunskaper. Utbildningen i Sveltejs Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.
Hur lång tid tar lektionen ”Strukturen script template style”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här Sveltejs Academy-lektionen?
Ja. Varje Sveltejs Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Strukturen script template style
- Reaktiva variabler med let
- Interpolation: {expression}
- Beräknade värden: reaktiva deklarationer med $: