Struktur script template style
Fahami struktur tiga bahagian bagi fail komponen Svelte.
Struktur script template style ialah pelajaran Sveltejs Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Sveltejs Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Sveltejs Academy merangkumi sejumlah 4 pelajaran.
Tiga Bahagian
Fail komponen Svelte mempunyai tiga blok aras teratas pilihan: <script>, penanda dan <style>.
Blok Skrip
Blok skrip menyimpan logik komponen dalam JavaScript atau TypeScript biasa.
<script>
let name = "Ada";
</script>Penanda
Segala-galanya di luar tag skrip dan gaya ialah penanda komponen. Penanda ini ialah HTML yang dipertingkatkan dengan sintaks templat Svelte.
<h1>Hello {name}!</h1>Blok Gaya
Gaya hanya terhad kepada komponen ini. Komponen lain mengekalkan rupa masing-masing.
<style>
h1 { color: rebeccapurple; }
</style>Komponen Lengkap
Gabungkan ketiga-tiganya ke dalam satu fail .svelte.
<script>
let name = "Ada";
</script>
<h1>Hello {name}!</h1>
<style>
h1 { color: rebeccapurple; }
</style>Konvensyen Susunan
Secara konvensyen, skrip diletakkan dahulu, penanda di tempat kedua dan gaya di tempat terakhir. Svelte tidak mewajibkan susunan ini.
Variasi TypeScript
Tambahkan lang="ts" pada tag skrip untuk menggunakan TypeScript di dalamnya.
<script lang="ts">
let name: string = "Ada";
</script>Konteks Skrip Modul
Gunakan <script context="module"> untuk kod yang dijalankan sekali bagi setiap modul, bukan bagi setiap tika.
<script context="module">
export const VERSION = "1.0";
</script>Tiada Blok Berganda
Anda boleh mempunyai maksimum satu skrip tika dan satu skrip modul bagi setiap fail.
Tag Gaya Pilihan
Jika komponen Anda tiada gaya, abaikan blok gaya sepenuhnya.
Tag Skrip Pilihan
Komponen penanda statik juga boleh mengabaikan blok skrip. Fail .svelte yang hanya mengandungi penanda adalah sah.
Semakan Pantas
Di manakah Anda meletakkan CSS dalam skop?
Ringkasan
Fail Svelte mempunyai sehingga tiga blok: skrip untuk logik, penanda dan gaya untuk CSS dalam skop.
Pelajari HTML dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 41
- Pelajaran
- 163
Soalan Lazim
Adakah pelajaran “Struktur script template style” percuma?
Ya — teks penuh “Struktur script template style” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Sveltejs Academy, tingkat taraf kepada CoddyKit PRO. Kursus Sveltejs Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Struktur script template style”?
Fahami struktur tiga bahagian bagi fail komponen Svelte. Anda berlatih Sveltejs Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Sveltejs Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Sveltejs Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Struktur script template style” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Sveltejs Academy ini?
Ya. Setiap pelajaran Sveltejs Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Struktur script template style
- Pemboleh Ubah Reaktif dengan let
- Interpolasi: {expression}
- Nilai Terhitung: Pengisytiharan reaktif $: