script template style Yapısı
Bir Svelte bileşeni dosyasının üç parçalı yapısını öğrenin.
script template style Yapısı, CoddyKit'te ücretsiz bir Sveltejs Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Sveltejs Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Sveltejs Academy kursu toplamda 4 dersten oluşur.
Üç Bölüm
Bir Svelte bileşeni dosyası, üst düzeyde üç isteğe bağlı blok içerir: <script>, işaretleme ve <style>.
script Bloğu
script bloğu, bileşen mantığını normal JavaScript veya TypeScript biçiminde barındırır.
<script>
let name = "Ada";
</script>İşaretleme
script ve style etiketlerinin dışındaki her şey bileşenin işaretlemesidir. Bu, Svelte şablon söz dizimiyle zenginleştirilmiş HTML'dir.
<h1>Hello {name}!</h1>style Bloğu
Stiller yalnızca bu bileşenle sınırlıdır. Diğer bileşenler kendi görünümlerini korur.
<style>
h1 { color: rebeccapurple; }
</style>Eksiksiz Bir Bileşen
Üçünü tek bir .svelte dosyasında birleştirin.
<script>
let name = "Ada";
</script>
<h1>Hello {name}!</h1>
<style>
h1 { color: rebeccapurple; }
</style>Sıralama Kuralı
Yaygın kurala göre script önce, işaretleme ikinci ve style son sırada yer alır. Svelte bu sırayı zorunlu tutmaz.
TypeScript Sürümü
İçinde TypeScript kullanmak için script etiketine lang="ts" ekleyin.
<script lang="ts">
let name: string = "Ada";
</script>Modül Betiği Bağlamı
Her örnek için değil, modül başına bir kez çalışacak kodlar için <script context="module"> kullanın.
<script context="module">
export const VERSION = "1.0";
</script>Birden Çok Blok Yok
Dosya başına en fazla bir örnek betiğiniz ve bir modül betiğiniz olabilir.
style Etiketi İsteğe Bağlıdır
Bileşeninizde stil yoksa style bloğunu tamamen atlayın.
script Etiketi İsteğe Bağlıdır
Statik işaretleme kullanan bileşenler script bloğunu da atlayabilir. Yalnızca işaretleme içeren bir .svelte dosyası geçerlidir.
Hızlı Kontrol
Kapsamlı CSS'i nereye yazarsınız?
Özet
Bir Svelte dosyası en fazla üç bloktan oluşur: mantık için script, işaretleme ve kapsamlı CSS için style.
Sıkça Sorulan Sorular
“script template style Yapısı” dersi ücretsiz mi?
Evet — “script template style Yapısı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Sveltejs Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Sveltejs Academy kursu toplamda 4 dersten oluşur.
“script template style Yapısı” dersinde ne öğreneceğim?
Bir Svelte bileşeni dosyasının üç parçalı yapısını öğrenin. Sveltejs Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.
Sveltejs Academy öğrenmeye başlamak için deneyim gerekli mi?
Önceden deneyim gerekmez. CoddyKit'te Sveltejs Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.
“script template style Yapısı” dersi ne kadar sürer?
Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.
Bu Sveltejs Academy dersinde kod yazıp çalıştırabilir miyim?
Evet. Her Sveltejs Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.
Bu kursun tüm dersleri
- script template style Yapısı
- let ile Tepkisel Değişkenler
- Enterpolasyon: {expression}
- Hesaplanan Değerler: $: tepkisel bildirimleri