Belajar Vue - Template & Rendering

#Pendahuluan

Setiap aplikasi Vue pada akhirnya menghasilkan tampilan. Dan tampilan di Vue ditulis dalam template — sintaks HTML yang diperkaya dengan direktif. Episode 4 adalah episode di mana kalian mulai benar-benar "melihat" hasil kerja kalian: merender data ke layar, merespons klik, menampilkan daftar, dan mengontrol apa yang muncul.

Template adalah bahasa sehari-hari penulisan UI Vue. Menguasainya berarti kalian bisa menyusun hampir semua antarmuka: dari daftar produk, formulir, hingga dashboard yang dinamis. Kita akan membahas interpolasi, direktif v-bind, v-if, v-for, v-on, conditional dan list rendering, lalu menutup dengan template refs dan dynamic attributes.

#Sintaks Template dan Direktif

#Interpolasi dan Mustache

Cara paling dasar merender data adalah dengan interpolasi {{ }}:

Interpolasi dasar

<script setup>
const nama = "Arman";
const hitung = 2 + 3;
</script>
 
<template>
  <p>Halo, {{ nama }}</p>
  <p>Total: {{ hitung }}</p>
</template>

Ekspresi {{ nama }} dan {{ hitung }} dievaluasi sebagai JavaScript. Halaman akan menampilkan "Halo, Arman" dan "Total: 5".

#v-bind untuk Atribut Dinamis

Mustache tidak bekerja di dalam atribut HTML. Gunakan v-bind untuk menghubungkan atribut dengan ekspresi:

Dynamic attributes dengan v-bind

<script setup>
const imgUrl = "/images/logo.png";
const disabled = true;
</script>
 
<template>
  <img v-bind:src="imgUrl" alt="Logo" />
  <button :disabled="disabled">Simpan</button>
</template>

v-bind:src dan shorthand-nya :disabled membuat nilai atribut mengikuti state. Dalam kode di atas, :disabled="disabled" mengikat atribut disabled pada button ke variabel disabled.

#Event Handling dengan v-on

#Mendengarkan Event

v-on mendengarkan event DOM dan menjalankan ekspresi atau method:

Event handling

<script setup>
import { ref } from "vue";
const jumlah = ref(0);
 
function tambah() {
  jumlah.value = jumlah.value + 1;
}
</script>
 
<template>
  <button v-on:click="tambah">Tambah</button>
  <button @click="jumlah--">Kurang</button>
</template>

@click adalah shorthand dari v-on:click. Ekspresi jumlah-- dieksekusi langsung, sedangkan tambah adalah method. Event object bisa diakses dengan modifier $event.

#Modifier Event

Vue menyediakan modifier untuk menangani detail event:

Modifier event

<template>
  <form @submit.prevent="kirim">
    <input @keyup.enter="cari" />
    <button @click.stop="klik">Hentikan</button>
  </form>
</template>

@submit.prevent memanggil preventDefault untuk mencegah reload halaman, @keyup.enter hanya memicu saat tombol Enter, dan @click.stop menghentikan propagasi event ke elemen parent.

#Conditional dan List Rendering

#v-if dan v-show

Dua cara mengontrol kemunculan elemen:

Conditional rendering

<script setup>
import { ref } from "vue";
const login = ref(false);
</script>
 
<template>
  <p v-if="login">Selamat datang!</p>
  <p v-else>Silakan login dulu.</p>
  <p v-show="login">Ini tetap ada di DOM.</p>
</template>

v-if menghapus dan membuat elemen di DOM; v-show hanya mengubah CSS display. Gunakan v-if untuk elemen yang jarang berganti, dan v-show untuk toggling cepat yang sering terjadi.

#v-for untuk List Rendering

Merender daftar memakai v-for dengan sintaks item in list:

List rendering

<script setup>
const produk = [
  { id: 1, nama: "Keyboard", harga: 250000 },
  { id: 2, nama: "Mouse", harga: 150000 },
];
</script>
 
<template>
  <ul>
    <li v-for="item in produk" :key="item.id">
      {{ item.nama }} - Rp{{ item.harga }}
    </li>
  </ul>
</template>

v-for="item in produk" mengulang setiap item, dan :key="item.id" memberi identitas unik — wajib agar Vue bisa melacak perubahan daftar secara efisien. Selalu gunakan key yang stabil.

#Template Refs dan Dynamic Attributes

#Akses DOM Langsung dengan ref

Kadang kalian perlu menyentuh elemen DOM langsung, misalnya untuk fokus otomatis. Gunakan template refs:

Template refs

<script setup>
import { ref, onMounted } from "vue";
const inputEl = ref(null);
 
onMounted(() => {
  inputEl.value.focus();
});
</script>
 
<template>
  <input ref="inputEl" placeholder="Ketik di sini" />
</template>

Deklarasi ref="inputEl" menautkan elemen ke variabel, dan setelah onMounted elemen tersedia di inputEl.value. Template refs berguna untuk integrasi library DOM seperti chart atau peta, yang akan kita manfaatkan di episode 15.

#Dynamic Attributes dan Binding Object

Atribut yang terkumpul dalam satu object bisa disebar dengan v-bind="attrs"; saat state berubah, atribut ikut diperbarui otomatis.

#Penutup

Episode 4 memberi kalian bahasa penulisan UI Vue: interpolasi dengan mustache, binding atribut dengan v-bind, event dengan v-on dan modifier, conditional rendering dengan v-if/v-show, list rendering dengan v-for, serta akses DOM langsung lewat template refs.

Inti yang harus dibawa pulang:

• Interpolasi {{ }} untuk teks; v-bind untuk atribut dinamis.
• @click adalah shorthand dari v-on:click.
• v-if untuk kondisi; v-else untuk pasangannya.
• v-for selalu disertai :key yang stabil.
• v-show lebih cepat untuk toggling yang sering.
• Template refs menghubungkan elemen DOM dengan variabel reactive.

Di episode 5 selanjutnya kita mendalami reactive state dan Composition API — ref dan reactive secara mendalam, computed dan watchers, lifecycle hooks seperti onMounted dan watchEffect, perbandingan Composition API vs Options API, hingga pembuatan custom composables untuk logika yang bisa dipakai ulang.