Kurikulum Vue

Belajar Vue online lewat 43 lesson terstruktur, contoh kode, dan 215 soal kuis.

43 lesson 4 bab 215 soal

Ringkasan dan poin kunci bisa dilihat gratis. Materi lengkap, contoh kode, dan kuis memerlukan langganan.

Vue Tutorial

17 lesson

01Vue HOMEHalaman HOME ini menjadi pintu masuk materi Vue.js, sebuah JavaScript framework progresif untuk membangun antarmuka pengguna. Vue berfokus pada lapisan view saja sehingga mudah…

Vue IntroPelajaran ini menjelaskan apa itu Vue dan filosofi deklaratif di baliknya. Alih-alih menginstruksikan browser langkah demi langkah lewat manipulasi DOM manual, kamu…

Scaling Up

24 lesson

01Vue Why, How and SetupSaat proyek tumbuh, struktur berkas dan keputusan awal menjadi sangat menentukan kemudahan pengembangan. Vue menyediakan berbagai cara memulai, mulai dari menggabungkan lewat CDN…02Vue First SFC PageHalaman ini membahas pembuatan halaman pertama Anda dengan komponen single-file. Sebuah berkas .vue memuat tiga blok utama: template untuk struktur tampilan, script setup untuk…03Vue ComponentsKomponen adalah potongan tampilan yang bisa digunakan kembali, terdiri dari template, logika, dan gaya yang dikemas menjadi satu unit. Dengan komponen, aplikasi besar dapat…04Vue PropsProps adalah cara komponen induk mengirim data ke komponen anak melalui atribut, sehingga anak tidak perlu mengambil data secara global. Props didefinisikan di komponen anak,…05Vue v-for ComponentsKetika sebuah daftar dirender menjadi banyak komponen, setiap item perlu menjadi instance komponen yang berdiri sendiri dengan props masing-masing. Directive v-for dapat dipasang…06Vue $emit()Metode $emit dipakai oleh komponen anak untuk memancarkan kejadian kustom menuju induk, sehingga alur data tetap satu arah dari induk ke anak dan kebalikannya lewat event. Induk…07Vue Fallthrough AttributesFallthrough attributes adalah atribut yang ditempel pada tag komponen namun tidak terdaftar sebagai props, seperti class, style, id, atau data tertentu. Secara bawaan Vue…08Vue Scoped StylingScoped styling menjamin gaya CSS hanya berlaku pada komponen tempatnya ditulis sehingga tidak saling bentrok antar komponen. Vue menerapkannya dengan menambahkan atribut data…09Vue Local ComponentsKomponen lokal didaftarkan pada komponen induk lewat opsi components sehingga hanya bisa dipakai di dalam induk tersebut. Pendekatan ini berbeda dengan komponen global yang…10Vue SlotsSlot memberi cara bagi komponen induk untuk menyisipkan kontennya sendiri ke dalam komponen anak, sehingga anak menjadi wadah yang fleksibel. Slot bawaan menampung semua konten…11Vue v-slotDirective v-slot memberi tahu Vue ke mana konten induk harus dimasukkan saat terdapat banyak slot bernama. Sintaks penuhnya v-slot diikuti nama slot, dengan singkatan pagar…12Vue Scoped SlotsScoped slot memungkinkan komponen anak meneruskan data miliknya kepada induk melalui slot, sehingga induk dapat menentukan cara menampilkannya. Induk menerima slot props dalam…13Vue Dynamic ComponentsKomponen dinamis memungkinkan Vue merender komponen berbeda berdasarkan data, misalnya ketika menu aktif berubah. Vue menyediakan elemen bawaan component dengan atribut is yang…14Vue TeleportTeleport adalah komponen bawaan Vue yang memindahkan potongan template ke lokasi lain di dalam DOM, di luar hierarki komponen saat ini. Kasus paling umum adalah modal, toast, dan…15Vue HTTP RequestAplikasi Vue sering perlu mengambil atau mengirim data ke server melalui HTTP request. Pada Vue 3, permintaan biasanya dilakukan di dalam lifecycle hook onMounted dengan…16Vue Template RefsTemplate refs memberi cara mengakses elemen DOM atau instance komponen secara langsung dari logika Vue. Dengan Composition API, kamu membuat ref dengan nama yang sama persis…17Vue Lifecycle HooksSetiap komponen Vue melewati siklus hidup, mulai dari dibuat, dirender, dipasang ke DOM, hingga dibongkar. Lifecycle hook adalah titik di mana kamu bisa menjalankan kode pada…18Vue Provide/InjectProvide dan inject menyediakan cara mengirim data ke banyak komponen turunan tanpa perlu meneruskan props di setiap tingkat (prop drilling). Komponen induk mendeklarasikan data…19Vue RoutingRouting memungkinkan aplikasi satu halaman menampilkan berbagai tampilan berdasarkan URL tanpa memuat ulang halaman. Vue Router menyediakan router-link untuk navigasi,…20Vue Form InputsElemen form seperti checkbox, radio, select, dan textarea masing-masing punya perilaku khusus ketika dihubungkan dengan v-model. Checkbox menghasilkan nilai boolean atau array,…21Vue AnimationsKomponen bawaan Transition di Vue membungkus satu elemen atau komponen agar mendapat animasi saat masuk, keluar, atau berubah. Vue menambahkan kelas CSS transisi seperti…22Vue Animations with v-forUntuk daftar yang sering berubah, komponen TransitionGroup mengelola animasi perpindahan posisi antar item, bukan hanya masuk dan keluar. Vue menambahkan kelas move pada saat…23Vue BuildBuild adalah proses mengubah kode sumber Vue menjadi aset produksi yang siap dijalankan di browser, biasanya mencakup penggabungan modul, minifikasi, dan pemisahan berkas. Vite…24Vue Composition APIComposition API adalah cara menulis logika komponen dengan menggabungkan fungsi-fungsi kecil melalui setup, berbeda dengan Options API yang mengelompokkan berdasar options…

Kurikulum Vue

Vue Tutorial

Scaling Up

Vue Examples