Struktur template script style
Pahami struktur tiga bagian dari file komponen Svelte.
Struktur template script style adalah pelajaran Sveltejs Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Sveltejs Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Tiga Bagian
Berkas komponen Svelte memiliki tiga blok tingkat atas opsional: <script>, markah, dan <style>.
Blok script
Blok skrip berisi logika komponen dalam JavaScript atau TypeScript biasa.
<script>
let name = "Ada";
</script>Markah
Segala sesuatu di luar tag skrip dan gaya merupakan markah komponen. Markah ini adalah HTML yang diperkaya dengan sintaks templat Svelte.
<h1>Hello {name}!</h1>Blok style
Gaya hanya berlaku dalam komponen ini. Komponen lain tetap memiliki tampilannya sendiri.
<style>
h1 { color: rebeccapurple; }
</style>Komponen Lengkap
Gabungkan ketiganya ke dalam satu berkas .svelte.
<script>
let name = "Ada";
</script>
<h1>Hello {name}!</h1>
<style>
h1 { color: rebeccapurple; }
</style>Konvensi Urutan
Konvensi menempatkan skrip di urutan pertama, markah di urutan kedua, dan gaya di urutan terakhir. Svelte tidak mewajibkan urutan tersebut.
Varian TypeScript
Tambahkan lang="ts" ke tag skrip untuk menggunakan TypeScript di dalamnya.
<script lang="ts">
let name: string = "Ada";
</script>Konteks Skrip Modul
Gunakan <script context="module"> untuk kode yang dijalankan sekali per modul, bukan sekali per instans.
<script context="module">
export const VERSION = "1.0";
</script>Tidak Ada Banyak Blok
Anda boleh memiliki paling banyak satu skrip instans dan satu skrip modul dalam setiap berkas.
Tag Style Opsional
Jika komponen Anda tidak memiliki gaya, hilangkan seluruh blok gaya.
Tag Script Opsional
Komponen dengan markah statis juga dapat melewati blok skrip. Berkas .svelte yang hanya berisi markah tetap valid.
Pemeriksaan Singkat
Di mana Anda menempatkan CSS dengan cakupan terbatas?
Rangkuman
Berkas Svelte terdiri atas hingga tiga blok: skrip untuk logika, markah, dan gaya untuk CSS dengan cakupan terbatas.
Pertanyaan yang Sering Diajukan
Apakah pelajaran “Struktur template script style” gratis?
Ya — teks lengkap “Struktur template script style” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Sveltejs Academy, upgrade ke CoddyKit PRO. Kursus Sveltejs Academy mencakup 4 pelajaran total.
Apa yang akan aku pelajari di “Struktur template script style”?
Pahami struktur tiga bagian dari file komponen Svelte. Kamu berlatih Sveltejs Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.
Apakah aku perlu pengalaman untuk memulai Sveltejs Academy?
Tidak diperlukan pengalaman sebelumnya. Sveltejs Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.
Berapa lama pelajaran “Struktur template script style” memakan waktu?
Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.
Bisakah aku menulis dan menjalankan kode dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.
Semua pelajaran dalam kursus ini
- Struktur template script style
- Variabel Reaktif dengan let
- Interpolasi: {expression}
- Nilai Terhitung: Deklarasi Reaktif $: