WebTech Interaktif

Vue · Bab 1

Mengenal Vue dan Reaktivitas

Memahami kapan framework berguna, memasang Vue tanpa build tools, membuat aplikasi dengan createApp dan mount, memakai ref, reactive, dan computed, serta melihat bagaimana interpolasi meng-escape HTML.

Topik Vue adalah tingkat 5 kurikulum: frontend terpisah. Di tingkat sebelumnya kamu menulis HTML, CSS, dan JavaScript langsung, lalu membangun API dengan Laravel. Sekarang kamu membangun antarmuka yang hidup di browser dan berbicara dengan API itu. Bab ini meletakkan fondasinya: aplikasi Vue pertama dan cara Vue memperbarui tampilan sendiri ketika data berubah.

Contoh di semua bab materi memakai Perpustakaan Pelita: buku, anggota, peminjaman, rak, dan denda.

1.1 Mengapa Framework?

Di bab JavaScript 4 kamu memperbarui halaman secara manual: cari elemen dengan querySelector, ubah textContent, tambah elemen baru dengan append. Cara itu benar, tetapi setiap perubahan data menuntut kamu mengingat bagian halaman mana yang harus ikut diubah. Begitu aplikasi tumbuh, bagian yang terlupa menjadi bug.

Vue membalik arah kerjanya. Kamu menyimpan state (data aplikasi), lalu menulis template yang menyatakan bagaimana state itu tampil. Saat state berubah, Vue memperbarui DOM sendiri.

Cara manualCara Vue
ubah data, lalu ubah DOMubah data saja
setiap fungsi tahu struktur halamantemplate menyatakan struktur sekali
mudah lupa memperbarui satu bagiantampilan selalu mengikuti state
Vue (HTML + JavaScript)

🧪 Coba ubah: klik tombol beberapa kali. Perhatikan bahwa kode tidak pernah menyentuh <ul> atau <p>; keduanya ikut berubah karena daftarJudul berubah.

1.2 Vue Tanpa Build Tools

Vue bisa dipakai dengan satu tag <script> yang memuat berkas Vue, tanpa Node.js, tanpa npm, tanpa proses build. Di playground dan lab, Vue sudah dimuat untukmu, jadi kamu langsung memakai objek global Vue. Di berkasmu sendiri nanti (bab 10) Vue dipasang lewat npm create vue@latest.

Pola dasar setiap aplikasi:

const { createApp, ref } = Vue;   // ambil fungsi yang dibutuhkan dari objek global Vue

createApp({
  setup() {
    // state dan fungsi dibuat di sini
    return { /* semua yang dipakai template */ };
  },
}).mount('#app');                 // pasang aplikasi ke <div id="app">
  • createApp(...) membuat aplikasi dari sebuah objek komponen akar.
  • setup() dijalankan sekali saat aplikasi dibuat. Apa pun yang dikembalikan setup() bisa dipakai di template.
  • mount('#app') menyerahkan elemen #app kepada Vue. Isi elemen itu menjadi template.

Template di sini ditulis langsung di HTML halaman (disebut template in-DOM). Browser membaca HTML-nya lebih dulu, lalu Vue mengompilasinya. Akibatnya ada beberapa aturan penulisan yang dibahas di bab 3.

Tutorial lama sering memakai data(), methods, dan computed: {} di dalam objek. Itu Options API. Materi ini memakai Composition API dengan setup(), yang juga dipakai <script setup> di proyek Vue modern.

1.3 ref dan .value

ref(nilaiAwal) membuat state reaktif: sebuah wadah yang Vue pantau. Membaca dan mengubahnya di JavaScript selalu lewat .value. Di template, Vue membuka wadahnya otomatis, jadi kamu menulis tersedia, bukan tersedia.value.

Vue (HTML + JavaScript)

🧪 Coba ubah: hapus .value di dalam pinjam (menjadi tersedia--), jalankan, lalu klik Pinjam. Lihat galat di Console: tersedia adalah wadah, bukan angka, dan konstanta tidak bisa diubah.

1.4 reactive untuk Objek

reactive(objek) membuat objek reaktif. Propertinya dibaca dan diubah langsung, tanpa .value.

Vue (HTML + JavaScript)

Kapan memilih yang mana?

  • ref untuk nilai tunggal (angka, teks, boolean) dan untuk array atau objek yang mungkin diganti seluruhnya (daftarBuku.value = dataBaru). Ini pilihan aman bila ragu.
  • reactive untuk objek yang hanya diubah propertinya. Jangan menimpa variabelnya (anggota = {...}) dan jangan memecahnya dengan destrukturisasi (const { nama } = anggota): hasilnya tidak reaktif lagi.

1.5 computed: Nilai Turunan

Sebagian nilai tidak perlu disimpan karena bisa dihitung dari state lain. computed(() => ...) membuat nilai turunan yang otomatis dihitung ulang saat state yang dibacanya berubah, dan disimpan (di-cache) selama state itu tidak berubah.

Vue (HTML + JavaScript)

🧪 Coba ubah: ganti tarif denda menjadi 500 per hari, lalu isi hari terlambat 4. (v-model yang mengikat input dibahas di bab 2.)

computed hanya untuk menghitung. Jangan mengubah state lain atau memanggil API di dalamnya; tugas seperti itu ditaruh di fungsi atau di onMounted (bab 4). Nilai computed dibaca lewat .value di skrip, sama seperti ref.

1.6 Interpolasi Itu Aman

Kurung kurawal ganda {{ ... }} di template menampilkan nilai sebagai teks. Bila nilainya berisi tag HTML, tag itu tampil apa adanya, tidak dijalankan. Vue meng-escape karakter <, >, dan & untukmu.

Vue (HTML + JavaScript)

🧪 Coba ubah: isi catatan dengan teks lain berisi tag. Hasilnya selalu teks biasa. Directive v-html yang menafsirkan HTML (dan bahayanya) dibahas di bab 2.

Rangkuman

  • Vue menjaga tampilan tetap sesuai state; kamu mengubah data, Vue mengubah DOM.
  • Aplikasi dibuat dengan createApp({ setup() { ... } }).mount('#app'); yang dikembalikan setup() terlihat oleh template.
  • ref untuk nilai apa pun (baca/ubah lewat .value di skrip), reactive untuk objek yang hanya diubah propertinya, computed untuk nilai turunan.
  • {{ }} menampilkan teks dan meng-escape HTML.

Berikutnya: bab 2 membahas directive (v-if, v-for, v-model, dan lainnya) untuk membangun daftar dan form, lalu kamu mengerjakan lab pertama.