Vue SFC: script, template, style
Proszę zrozumieć format komponentu Single-File Component: blok script z logiką, blok template z widokiem oraz blok style z ograniczonym zakresowo CSS.
Vue SFC: script, template, style to bezpłatna lekcja Frontend 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 Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest komponent jednoplikowy
Komponent jednoplikowy Vue (SFC) to plik .vue zawierający trzy bloki: <script> na logikę JavaScript, <template> na widok HTML oraz <style> na CSS. Wszystko, co dotyczy jednego komponentu, znajduje się w jednym pliku.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>Blok script
W tym miejscu umieszcza się logikę, dane, importy i kod Composition API. W przypadku <script setup> zmienne i importy zadeklarowane na najwyższym poziomie są automatycznie dostępne w szablonie.
script setup — nowoczesne podejście
<script setup> to zalecana składnia SFC. Zmienne, właściwości obliczane i funkcje zadeklarowane w tym bloku są bezpośrednio dostępne w szablonie, bez konieczności jawnego ich zwracania.
<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
function increment() { count.value++; }
</script>
<template>
<button @click="increment">{{ count }}</button>
</template>Blok template
Szablon zawiera widok HTML komponentu. Szablony Vue są kompilowane do funkcji renderujących. W szablonie należy używać atrybutów i dyrektyw właściwych dla Vue (v-if, v-for, @click).
Interpolacja w szablonie
Należy używać podwójnych nawiasów klamrowych {{ }}, aby wyświetlać dane reaktywne jako tekst. Vue automatycznie ucieka znaki HTML — aby renderować HTML, należy użyć dyrektywy v-html, zachowując ostrożność.
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>Blok style
CSS w bloku style ma zastosowanie do komponentu. Należy dodać scoped, aby ograniczyć style wyłącznie do elementów tego komponentu i zapobiec przypadkowemu wyciekaniu stylów globalnych.
<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>Jak działają style scoped
Vue dodaje unikatowy atrybut data (taki jak data-v-abc123) do elementów komponentu i przepisuje selektory CSS scoped tak, aby go uwzględniały. Dzięki temu style pasują wyłącznie do elementów tego komponentu.
Moduły CSS w Vue
Alternatywą dla scoped są moduły CSS — należy użyć <style module>. Do nazw klas można uzyskać dostęp za pomocą obiektu $style w szablonie.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Style globalne
Style bez scoped mają zastosowanie globalne. Typowy wzorzec to globalny plik app.css zawierający style bazowe i tokeny projektowe oraz style scoped dla poszczególnych komponentów, zawierające reguły właściwe dla danego komponentu.
TypeScript w komponentach SFC
Aby używać TypeScript, należy dodać lang="ts" do bloku script. Volar (oficjalne rozszerzenie Vue do środowisk IDE) zapewnia pełną obsługę TypeScript w komponentach SFC, w tym sprawdzanie typów w szablonach.
Nazewnictwo plików SFC
Pliki SFC komponentów używanych w szablonach należy nazywać w konwencji PascalCase (UserProfile.vue). Vue zaleca nazwy wielowyrazowe, aby uniknąć konfliktów z elementami HTML.
Szybkie sprawdzenie
Co robi atrybut scoped w bloku Vue <style>?
Podsumowanie: komponenty Vue SFC
Pliki .vue mają trzy bloki: script (logika), template (widok) i style (CSS). Proszę używać