Sintaks Template

Teks dan Ekspresi

{{ message }}
{{ count + 1 }}
{{ ok ? 'Yes' : 'No' }}

Direktif

{{ expr }}	Interpolasi teks
v-bind:attr / :attr	Ikat atribut ke ekspresi
v-on:event / @event	Pasang event listener
v-model	Binding dua arah (form)
v-if / v-else-if / v-else	Rendering kondisional
v-show	Toggle CSS display (tetap di DOM)
v-for	Rendering daftar
v-slot / #name	Konten slot bernama

Binding Atribut

Reaktivitas

ref (Primitif)

import { ref } from 'vue'

const count = ref(0)
console.log(count.value)  // 0
count.value++             // pembaruan reaktif

reactive (Objek)

import { reactive } from 'vue'

const state = reactive({ count: 0, name: 'Vue' })
state.count++  // tidak perlu .value

ref vs reactive

ref()	Semua tipe; akses via `.value` di script
reactive()	Hanya objek/array; akses properti langsung
Template	Keduanya auto-unwrap (tidak perlu `.value`)
Destructure	`reactive` kehilangan reaktivitas; gunakan `toRefs()`

Computed dan Watcher

Properti Computed

import { ref, computed } from 'vue'

const items = ref([1, 2, 3, 4, 5])
const evenItems = computed(() =>
  items.value.filter(n => n % 2 === 0)
)

Nilai computed di-cache dan hanya dievaluasi ulang saat dependensi berubah

Watcher

import { ref, watch, watchEffect } from 'vue'

const query = ref('')

// Pantau sumber tertentu
watch(query, (newVal, oldVal) => {
  console.log(`Changed: ${oldVal} → ${newVal}`)
})

// Lacak dependensi secara otomatis
watchEffect(() => {
  console.log(`Query is: ${query.value}`)
})

Opsi Watch

immediate: true	Jalankan callback segera saat dibuat
deep: true	Pantau mendalam objek bersarang
flush: 'post'	Jalankan setelah pembaruan DOM
once: true	Dipicu sekali lalu berhenti

Komponen

Single-File Component (SFC)

Mendaftarkan Komponen

Blok SFC

<script setup>	Composition API (disarankan)
<template>	Template HTML
<style scoped>	CSS berskope ke komponen
<style module>	CSS Modules (objek $style)

Props dan Event

Mendefinisikan Props

Emit Event

Penggunaan di Komponen Induk

v-model pada Komponen

Slot

Slot Default

Konten kustom di sini

Slot Bernama

Konten utama

Scoped Slot

Composition API

Fungsi Composable

// useMouse.js
import { ref, onMounted, onUnmounted } from 'vue'

export function useMouse() {
  const x = ref(0)
  const y = ref(0)
  function update(e) {
    x.value = e.pageX
    y.value = e.pageY
  }
  onMounted(() => window.addEventListener('mousemove', update))
  onUnmounted(() => window.removeEventListener('mousemove', update))
  return { x, y }
}

Menggunakan Composable

provide / inject

// Induk
import { provide, ref } from 'vue'
const theme = ref('dark')
provide('theme', theme)

// Keturunan (kedalaman berapa pun)
import { inject } from 'vue'
const theme = inject('theme', 'light') // default

Router (Vue Router)

Definisi Route

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About },
    { path: '/user/:id', component: User },
  ]
})

Navigasi di Template

Home

  User 1

Navigasi Programatik

import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

router.push('/about')
router.push({ name: 'user', params: { id: 1 } })
console.log(route.params.id)

Fitur Route

/user/:id	Segmen dinamis (`route.params.id`)
name: 'user'	Route bernama untuk navigasi programatik
children: [...]	Route bersarang
beforeEnter	Navigation guard per route
meta: { auth: true }	Metadata kustom untuk guard
redirect: '/new-path'	Redirect route

Lifecycle Hook

Urutan Hook

onBeforeMount	Sebelum render DOM awal
onMounted	DOM siap (ambil data, tambah listener)
onBeforeUpdate	Sebelum state reaktif me-render ulang DOM
onUpdated	Setelah re-render DOM
onBeforeUnmount	Sebelum komponen dihancurkan
onUnmounted	Pembersihan (hapus listener, timer)

Penggunaan

Daftar dan Kondisional

v-for

  {{ item.name }}

  {{ index }}: {{ item.name }}

  {{ key }}: {{ val }}

Selalu gunakan :key dengan v-for untuk pembaruan DOM yang efisien

v-if vs v-show

v-if	Render kondisional (tambah/hapus dari DOM)
v-else-if	Rantai else-if
v-else	Cabang fallback
v-show	Toggle `display: none` (tetap di DOM)

Gunakan v-show untuk toggle sering, v-if untuk perubahan jarang

Contoh Kondisional

Memuat...
Error!
{{ data }}

Penanganan Form

Dasar v-model

Modifier v-model

v-model.lazy	Sinkron pada `change` bukan `input`
v-model.number	Auto-typecast ke angka
v-model.trim	Auto-trim spasi

Modifier Event

@click.prevent	Panggil `preventDefault()`
@click.stop	Panggil `stopPropagation()`
@click.once	Dipicu paling banyak sekali
@keyup.enter	Hanya pada tombol Enter
@submit.prevent	Cegah pengiriman form default

REFERENSI CEPAT VUE.JS

Judul