Struktura script template style
Poznaj trójdzielną strukturę pliku komponentu Svelte.
Struktura script template style to bezpłatna lekcja Sveltejs Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Sveltejs Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Trzy sekcje
Plik komponentu Svelte ma trzy opcjonalne bloki najwyższego poziomu: <script>, znaczniki oraz <style>.
Blok script
Blok script zawiera logikę komponentu zapisaną w zwykłym JavaScripcie lub TypeScripcie.
<script>
let name = "Ada";
</script>Znaczniki
Wszystko poza znacznikami script i style jest znacznikami komponentu. To HTML wzbogacony o składnię szablonów Svelte.
<h1>Hello {name}!</h1>Blok style
Style są ograniczone wyłącznie do tego komponentu. Inne komponenty zachowują własny wygląd.
<style>
h1 { color: rebeccapurple; }
</style>Kompletny komponent
Połącz wszystkie trzy elementy w jednym pliku .svelte.
<script>
let name = "Ada";
</script>
<h1>Hello {name}!</h1>
<style>
h1 { color: rebeccapurple; }
</style>Konwencja kolejności
Zgodnie z konwencją script umieszcza się jako pierwszy, markup jako drugi, a style jako ostatni. Svelte nie wymusza tej kolejności.
Wariant TypeScript
Dodaj lang="ts" do znacznika script, aby używać w nim TypeScriptu.
<script lang="ts">
let name: string = "Ada";
</script>Kontekst skryptu modułu
Należy użyć <script context="module"> dla kodu uruchamianego raz na moduł, a nie raz na instancję.
<script context="module">
export const VERSION = "1.0";
</script>Brak wielu bloków
W jednym pliku można mieć najwyżej jeden skrypt instancji i jeden skrypt modułu.
Blok style jest opcjonalny
Jeśli komponent nie ma stylów, należy całkowicie pominąć blok style.
Blok script jest opcjonalny
Komponenty zawierające wyłącznie statyczne znaczniki mogą pominąć także blok script. Plik .svelte zawierający wyłącznie znaczniki jest poprawny.
Szybki test
Gdzie umieszcza się CSS ograniczony zakresem?
Podsumowanie
Plik Svelte może zawierać do trzech bloków: script dla logiki, markup oraz style dla CSS ograniczonego zakresem.
Często zadawane pytania
Czy lekcja „Struktura script template style” jest bezpłatna?
Tak — pełny tekst „Struktura script template style” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Sveltejs Academy, przejdź na CoddyKit PRO. Kurs Sveltejs Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Struktura script template style”?
Poznaj trójdzielną strukturę pliku komponentu Svelte. Ćwiczysz Sveltejs Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Sveltejs Academy?
Nie wymagamy żadnego doświadczenia. Sveltejs Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Struktura script template style”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Sveltejs Academy?
Tak. Każda lekcja Sveltejs Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Struktura script template style
- Zmienne reaktywne z użyciem let
- Interpolacja: {expression}
- Wartości obliczane: deklaracje reaktywne $: