Vue SFC: script template style
Tek Dosyalı Bileşen biçimini öğrenin: mantık için script bloğu, görünüm için template bloğu ve kapsamlı CSS için style bloğu.
Vue SFC: script template style, CoddyKit'te ücretsiz bir Frontend 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, Frontend Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Frontend Academy kursu toplamda 4 dersten oluşur.
Tek Dosyalı Bileşen Nedir
Bir Vue Tek Dosyalı Bileşeni (SFC), üç blok içeren bir .vue dosyasıdır: JavaScript mantığı için <script>, HTML görünümü için <template> ve CSS için <style>. Bir bileşenle ilgili her şey tek bir dosyada bulunur.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>script Bloğu
Logic, data, imports, and composition API code go here. With <script setup>, variables and imports declared at the top level are automatically available in the template.
script setup — Modern Yaklaşım
<script setup>, önerilen SFC söz dizimidir. İçinde bildirilen değişkenler, hesaplanan özellikler ve işlevler, açıkça döndürülmeleri gerekmeden doğrudan şablonda kullanılabilir.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>template Bloğu
Şablon, bileşenin HTML görünümünü içerir. Vue şablonları oluşturma işlevlerine derlenir. Şablonun içinde Vue'ya özgü öznitelikleri ve yönergeleri (v-if, v-for, @click) kullanın.
Şablon Aradeğerlemesi
Tepkisel verileri metin olarak çıktıya dönüştürmek için çift küme parantezlerini {{ }} kullanın. Vue, HTML'den otomatik olarak kaçış yapar — HTML oluşturmak için v-html yönergesini dikkatli kullanın.
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>style Bloğu
style bloğundaki CSS bileşene uygulanır. Stilleri yalnızca bu bileşenin öğeleriyle sınırlamak ve yanlışlıkla oluşan genel stil sızıntılarını önlemek için scoped ekleyin.
<style scoped>
.card {
border-radius: 8px;
padding: 16px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
/* Without scoped: affects all .card elements globally */
</style>Kapsamlı Stiller Nasıl Çalışır
Vue, bileşen öğelerine benzersiz bir veri özniteliği (data-v-abc123 gibi) ekler ve kapsamlı CSS seçicilerini bunu içerecek şekilde yeniden yazar. Böylece stillerin yalnızca bu bileşendeki öğelerle eşleşmesi sağlanır.
Vue'da CSS Modules
Kapsamlı stillere bir alternatif olarak CSS Modules için <style module> kullanın. Sınıf adlarına şablondaki $style nesnesi üzerinden erişin.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Genel Stiller
scoped olmadan kullanılan stiller genel olarak uygulanır. Yaygın bir desen, temel stiller ve tasarım belirteçleri için genel bir app.css ile her bileşene özgü kurallar için bileşen başına kapsamlı stiller kullanmaktır.
SFC'lerde TypeScript
TypeScript kullanmak için script bloğuna lang="ts" ekleyin. Volar (resmî Vue IDE eklentisi), tür denetimli şablonlar da dâhil olmak üzere Vue SFC'leri için tam TypeScript desteği sağlar.
SFC Dosya Adlandırma
Şablonlarda kullanılan bileşenler için SFC dosyalarını PascalCase biçiminde (UserProfile.vue) adlandırın. Vue, HTML öğeleriyle çakışmaları önlemek için çok sözcüklü adları önerir.
Hızlı Kontrol
Vue'daki scoped özniteliği, bir <style> bloğunda ne işe yarar?
Tek Dosyalı Vue Bileşenlerinin Özeti
.vue dosyalarında üç blok bulunur: betik (mantık), şablon (görünüm) ve stil (CSS). Modern Composition API yaklaşımı için