Vue

Pengenalan Vue

Apa itu Vue, cara instalasi lewat Vite, dan cara menjalankan project pertamamu.

Template Syntax Dasar

Menampilkan data lewat interpolasi {{ }} dan mengikat atribut HTML lewat v-bind.

Reactivity: ref() dan reactive()

Membuat data reaktif yang otomatis memicu update tampilan saat berubah.

Computed Properties

Nilai turunan yang otomatis dihitung ulang HANYA saat dependency-nya berubah, dan di-cache di antaranya.

Event Handling di Vue

Menangani interaksi pengguna lewat direktif v-on, disingkat @.

Conditional Rendering: v-if, v-else, v-show

Menampilkan elemen secara kondisional lewat direktif v-if/v-else dan v-show.

List Rendering: v-for

Menampilkan array data sebagai daftar elemen lewat direktif v-for, dan pentingnya atribut key.

Forms & v-model

Two-way data binding pada input form lewat direktif v-model.

Watchers: watch() dan watchEffect()

Menjalankan side effect saat data reaktif tertentu berubah.

Komponen & Props di Vue

Membuat komponen anak dan mengirim data ke dalamnya lewat props.

Emitting Events

Mengirim event dan data dari komponen anak kembali ke komponen induk lewat defineEmits.

Slots

Menyisipkan konten kustom ke dalam komponen anak lewat default slot dan named slot.

Lifecycle Hooks

Menjalankan kode di titik tertentu siklus hidup komponen, mis. saat pertama muncul atau akan dihapus.

Composables

Mengekstrak logika reaktif yang berulang jadi fungsi composable sendiri, setara custom hook di React.

Provide/Inject

Membagikan data ke banyak komponen turunan tanpa passing props manual di tiap level.

Fetching Data

Mengambil data dari API lewat fetch() di dalam onMounted, dengan penanganan loading dan error.

Vue Router Dasar

Membuat aplikasi Single Page Application (SPA) dengan banyak halaman lewat vue-router.

Template Refs

Mengakses elemen DOM langsung lewat ref template, mis. untuk auto-focus input.

Tugas Akhir

Latihan akhir menggabungkan ref, v-model, v-for, dan computed dalam satu aplikasi Todo List.