vue 3 template syntax

📘 Artikel 6 dari 16 — Vue from Zero to Zorro

Template Syntax & Direktif Vue 3 — v-if, v-for, v-bind, v-model, dan v-on Explained dengan Contoh Nyata

Kenali kekuatan template syntax vue dan kuasai direktif-direktif penting yang bikin komponen kamu hidup dan interaktif.

#BelajarVue #VueFrontEnd #DirektiVue3 #TemplateSyntax #Vue3Pemula

⏱ 10 mnt

Estimasi Baca

🎯 Pemula

Level

📅 2026

Diperbarui

📚

Bagian dari Seri

Belajar Vue: Vue from Zero to Zorro

16 artikel lengkap dari dasar hingga mahir — belajar Vue 3 step by step.

🗂 Lihat Semua Artikel →

Pernah nggak kamu bingung gimana cara bikin elemen muncul atau hilang di halaman web tanpa reload? Atau bingung gimana cara Vue tahu kalau input form kamu berubah, lalu langsung update datanya secara otomatis? Jawabannya ada di direktif vue 3 — fitur ajaib yang bikin HTML biasa berubah jadi komponen yang cerdas dan reaktif.

Di artikel ke-6 dari seri Vue from Zero to Zorro ini, kita akan bedah habis lima direktif paling penting dalam template syntax vue: v-if, v-for, v-bind, v-model, dan v-on. Semua pakai contoh nyata yang langsung bisa kamu coba. Yuk mulai!

🧩 Apa Itu Direktif dalam Template Syntax Vue?

Bayangkan kamu punya remote TV. Remote itu punya tombol-tombol yang masing-masing punya fungsi berbeda: tombol power, volume, channel. Nah, direktif vue 3 itu ibaratnya tombol-tombol di remote tersebut — masing-masing punya perintah khusus buat mengontrol tampilan HTML kamu.

Direktif adalah atribut spesial di template Vue yang diawali dengan prefix v-. Vue membaca direktif ini dan menerapkan perilaku reaktif ke elemen DOM yang bersangkutan.

📐 Definisi Penting

Direktif Vue adalah atribut HTML khusus berawalan v- yang memberi instruksi pada Vue untuk melakukan sesuatu terhadap elemen DOM — seperti menyembunyikannya, mengulanginya, atau mengikat datanya ke state reaktif.

Direktif	Fungsi	Analogi
v-if	Tampilkan/sembunyikan elemen berdasarkan kondisi	Lampu yang mati/nyala
v-for	Render daftar elemen dari array/objek	Mesin fotokopi dokumen
v-bind	Ikat atribut HTML ke data Vue	Label nama di baju seragam
v-model	Two-way binding antara input dan data	Cermin dua sisi
v-on	Dengarkan event dari user (klik, input, dll)	Satpam yang siap sedia

🔥

Fakta Menarik

Menurut State of JS Survey 2024, Vue.js konsisten masuk top 3 framework frontend paling digunakan di dunia. Salah satu alasannya? Sintaks direktifnya yang ekspresif dan mudah dipahami bahkan oleh pemula sekalipun.

🔀 v-if dan v-for — Kontrol Tampilan dengan v-if v-for Vue 3

Dua direktif ini adalah yang paling sering dipakai dalam v-if v-for vue 3. Mari kita kupas satu per satu.

1

v-if — Tampilkan Hanya Kalau Kondisinya Benar

Seperti lampu yang hanya nyala kalau ada listriknya, v-if hanya menampilkan elemen kalau kondisi bernilai truthy. Jika kondisi false, elemen benar-benar dihapus dari DOM.

App.vue — Contoh v-if

<template>
  <div>
    <button @click="isLoggedIn = !isLoggedIn">Toggle Login</button>

    <p v-if="isLoggedIn">Selamat datang, Zorro! 🎉</p>
    <p v-else>Kamu belum login. Silakan masuk dulu.</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const isLoggedIn = ref(false)
</script>

💡 Hasil: Ketika isLoggedIn = true, pesan sambutan muncul. Ketika false, pesan "belum login" yang tampil. Sesederhana itu!

2

v-for — Render Daftar dari Array

Bayangkan kamu punya 100 produk di toko online. Mustahil nulis 100 tag HTML secara manual, kan? v-for bisa iterasi array dan bikin elemen sebanyak data yang ada secara otomatis.

App.vue — Contoh v-for

<template>
  <ul>
    <li v-for="(buah, index) in listBuah" :key="index">
      {{ index + 1 }}. {{ buah }}
    </li>
  </ul>
</template>

<script setup>
const listBuah = ['🍎 Apel', '🍌 Pisang', '🍊 Jeruk']
</script>

⚠️

Perhatian

Saat menggunakan v-for, selalu tambahkan atribut :key yang unik! Tanpa :key, Vue bisa kebingungan saat data berubah dan menyebabkan bug rendering yang susah dilacak.

🔬 Analisis: v-if vs v-show — Kapan Pakai yang Mana?

v-if

• Elemen dihapus dari DOM saat false
• Cocok untuk kondisi yang jarang berubah
• Lebih ringan di memori saat hidden
• Ada overhead saat toggle (re-render)

v-show

• Elemen tetap di DOM, hanya display:none
• Cocok untuk toggle yang sering
• Render sekali, toggle cepat
• Tidak bisa dipakai di <template>

🔗 v-bind, v-model, dan v-on — Direktif Vue 3 untuk Interaktivitas

Kalau v-if dan v-for mengatur apa yang tampil, tiga direktif berikut mengatur bagaimana tampilan bereaksi terhadap data dan interaksi user.

3

v-bind — Ikat Atribut HTML ke Data Vue

v-bind digunakan untuk mengikat atribut HTML seperti src, href, class, atau disabled ke nilai dari data Vue. Shorthand-nya cukup pakai titik dua :.

App.vue — Contoh v-bind

<template>
  <!-- Full syntax -->
  <a v-bind:href="linkUrl">Kunjungi Blog</a>

  <!-- Shorthand (lebih umum dipakai) -->
  <a :href="linkUrl">Kunjungi Blog</a>

  <!-- Bind class dinamis -->
  <button :class="{ 'active': isActive }">Tombol</button>
</template>

<script setup>
import { ref } from 'vue'
const linkUrl = ref('https://saifiahmada.com')
const isActive = ref(true)
</script>

4

v-model — Two-Way Binding yang Ajaib

v-model adalah direktif paling "ajaib" di Vue. Bayangkan cermin dua sisi: ketika kamu mengubah input di form, data Vue langsung ikut berubah. Begitu pun sebaliknya. Itulah two-way data binding.

App.vue — Contoh v-model

<template>
  <div>
    <input v-model="nama" placeholder="Masukkan namamu" />
    <p>Halo, <strong>{{ nama }}</strong>! 👋</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const nama = ref('')
</script>

💡

Tips Pro

v-model sebenarnya adalah syntactic sugar dari kombinasi :value="nama" + @input="nama = $event.target.value". Vue hanya menyingkat keduanya jadi satu direktif yang elegan.

5

v-on — Tangkap Event dari User

v-on ibarat satpam yang siap siaga menunggu event dari user — klik tombol, input keyboard, scroll, dan lain-lain. Shorthand-nya cukup pakai tanda @.

App.vue — Contoh v-on

<template>
  <div>
    <p>Counter: {{ count }}</p>

    <!-- Full syntax -->
    <button v-on:click="count++">Tambah</button>

    <!-- Shorthand @ (lebih umum) -->
    <button @click="count--">Kurang</button>
    <button @click="reset">Reset</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
const reset = () => { count.value = 0 }
</script>

⚡

Insight Penting

v-on mendukung event modifiers seperti @click.prevent (mencegah default behavior), @keyup.enter (menangkap tekan tombol Enter), dan @click.stop (menghentikan event bubbling). Ini fitur yang sangat berguna saat membuat form interaktif!

🚀 Studi Kasus: To-Do List Mini Pakai Semua Direktif Vue 3

Sekarang waktunya kita gabungkan semua direktif yang sudah kita pelajari dalam satu contoh nyata: sebuah To-Do List sederhana. Ini adalah contoh paling klasik untuk memahami template syntax vue secara holistik.

TodoList.vue — Gabungan Semua Direktif

✅ Siap Dicoba

<template>
  <div class="todo-app">
    <h2>📝 To-Do List</h2>

    <!-- v-model untuk input -->
    <input
      v-model="tugasBaru"
      @keyup.enter="tambahTugas"
      placeholder="Tambah tugas baru..."
    />

    <!-- v-on untuk tombol -->
    <button @click="tambahTugas">+ Tambah</button>

    <!-- v-if untuk pesan kosong -->
    <p v-if="tugas.length === 0">Belum ada tugas. Yuk tambahkan! ✨</p>

    <!-- v-for untuk render daftar -->
    <ul>
      <li
        v-for="(item, i) in tugas"
        :key="i"
        :style="{ textDecoration: item.selesai ? 'line-through' : 'none' }"
      >
        <!-- v-bind dan v-on kombinasi -->
        <input
          type="checkbox"
          :checked="item.selesai"
          @change="item.selesai = !item.selesai"
        />
        {{ item.teks }}
        <button @click="hapusTugas(i)">🗑</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const tugasBaru = ref('')
const tugas = reactive([])

const tambahTugas = () => {
  if (tugasBaru.value.trim()) {
    tugas.push({ teks: tugasBaru.value, selesai: false })
    tugasBaru.value = ''
  }
}
const hapusTugas = (index) => tugas.splice(index, 1)
</script>

💡

Tips Belajar

Coba ketik kode To-Do List di atas secara manual, bukan copy-paste. Proses mengetik membantu otak lebih cepat mengingat sintaks direktif. Setelah berhasil jalan, coba tambahkan fitur baru sendiri — misalnya filter tugas yang sudah selesai!

🏁 Kesimpulan

Kamu sudah berhasil menguasai lima direktif vue 3 paling penting dalam template syntax vue! Mari kita rangkum:

• v-if / v-else — Tampilkan elemen berdasarkan kondisi boolean
• v-for — Render daftar elemen dari array/objek dengan :key
• v-bind (:) — Ikat atribut HTML dinamis ke data Vue
• v-model — Two-way binding antara input form dan data
• v-on (@) — Tangkap dan respons event dari interaksi user

Kelima direktif ini adalah fondasi dari hampir semua UI interaktif yang kamu buat dengan Vue 3. Kombinasikan semuanya dan kamu sudah bisa membangun aplikasi yang benar-benar hidup!

💬 Punya pertanyaan atau mau berbagi pengalaman?

Tulis di kolom komentar di bawah! Kita belajar bareng. Kalau artikel ini membantu, share ke teman-teman yang lagi belajar Vue juga ya! 🚀

💬 Tulis Komentar 📤 Share Artikel

📖 Navigasi Seri Artikel

← Sebelumnya

Reaktivitas di Vue 3 — Paham ref dan reactive Supaya Data Bisa Berubah Otomatis di Layar

→ Baca Artikel Sebelumnya

Selanjutnya →

Props & Emits — Cara Komponen Vue 3 Ngobrol Satu Sama Lain

→ Baca Artikel Selanjutnya

#BelajarVue #VueFrontEnd #DirektiVue3 #TemplateSyntax #Vue3Pemula #VueFromZeroToZorro