Vue SFC: script, template, style
Pahami format Single-File Component: blok script untuk logika, blok template untuk tampilan, dan blok style untuk CSS dengan scope.
Vue SFC: script, template, style adalah pelajaran Frontend 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 Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.
Apa Itu Komponen Satu Berkas
Komponen Satu Berkas (SFC) Vue adalah berkas .vue dengan tiga blok: <script> untuk logika JavaScript, <template> untuk tampilan HTML, dan <style> untuk CSS. Semua hal untuk satu komponen berada dalam satu berkas.
<script setup lang="ts">
const greeting = 'Hello, Vue!';
</script>
<template>
<h1>{{ greeting }}</h1>
</template>
<style scoped>
h1 { color: #42b883; }
</style>Blok Skrip
Logika, data, impor, dan kode API komposisi berada di sini. Dengan <script setup>, variabel dan impor yang dideklarasikan pada tingkat teratas otomatis tersedia di templat.
script setup — Pendekatan Modern
<script setup> adalah sintaks SFC yang direkomendasikan. Variabel, properti terhitung, dan fungsi yang dideklarasikan di dalamnya tersedia langsung di templat tanpa perlu dikembalikan secara eksplisit.
<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 Templat
Templat berisi tampilan HTML komponen. Templat Vue dikompilasi menjadi fungsi render. Gunakan atribut dan direktif khusus Vue (v-if, v-for, @click) di dalam templat.
Interpolasi Templat
Gunakan kurung kurawal ganda {{ }} untuk menampilkan data reaktif sebagai teks. Vue secara otomatis melakukan pelolosan HTML—untuk merender HTML, gunakan direktif v-html (dengan hati-hati).
<template>
<p>{{ message }}</p>
<p>{{ count * 2 }}</p>
<p>{{ isActive ? 'Active' : 'Inactive' }}</p>
</template>Blok Gaya
CSS dalam blok style berlaku untuk komponen. Tambahkan scoped untuk membatasi gaya hanya pada elemen komponen ini—sehingga mencegah kebocoran gaya global yang tidak disengaja.
<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>Cara Kerja Gaya Scoped
Vue menambahkan atribut data unik (seperti data-v-abc123) ke elemen komponen dan menulis ulang pemilih CSS scoped agar menyertakan atribut tersebut. Ini memastikan gaya hanya cocok dengan elemen dalam komponen ini.
Modul CSS di Vue
Alternatif untuk scoped: gunakan <style module> untuk Modul CSS. Akses nama kelas melalui objek $style di templat.
<template>
<div :class="$style.card">Content</div>
</template>
<style module>
.card { background: white; }
</style>Gaya Global
Gaya tanpa scoped berlaku secara global. Salah satu pola umum: app.css global untuk gaya dasar + token desain, dan gaya scoped per komponen untuk aturan khusus komponen.
TypeScript dalam SFC
Tambahkan lang="ts" ke blok skrip untuk menggunakan TypeScript. Volar (ekstensi IDE Vue resmi) menyediakan dukungan TypeScript penuh untuk SFC Vue, termasuk templat yang diperiksa tipenya.
Penamaan Berkas SFC
Beri nama berkas SFC dengan PascalCase (UserProfile.vue) untuk komponen yang digunakan dalam templat. Vue merekomendasikan nama yang terdiri dari beberapa kata untuk menghindari konflik dengan elemen HTML.
Cek Cepat
Apa yang dilakukan atribut scoped pada blok <style> Vue?
Ringkasan: SFC Vue
Berkas .vue memiliki tiga blok: skrip (logika), templat (tampilan), dan gaya (CSS). Gunakan