Template Syntax & Interpolasi
Interpolasi teks {{ }}, ekspresi JavaScript di template, v-text, v-html (dan bahayanya), serta aturan penulisan template.
Template Vue = HTML + sihir kecil
Template Vue adalah HTML yang valid, tetapi diberi "bumbu" tambahan yang dimengerti Vue. Ada dua jenis bumbu utama: interpolasi {{ }} (menampilkan data) dan directive yang diawali v- (memerintah Vue melakukan sesuatu pada elemen).
Interpolasi teks: {{ }}
Kurung kurawal ganda ("mustache") menampilkan nilai sebagai teks biasa.
<template>
<p>Nama: {{ nama }}</p>
</template>
<script setup>
const nama = 'Sinta'
</script>Hasil: Nama: Sinta. Jika nilai variabel berubah (lewat reactivity, bab berikutnya), teks ikut berubah.
Ekspresi JavaScript di dalam kurung kurawal ganda
Di dalamnya kamu boleh menulis satu ekspresi JavaScript — yaitu sesuatu yang menghasilkan nilai.
{{ harga * 2 }}
{{ nama.toUpperCase() }}
{{ stok > 0 ? 'Tersedia' : 'Habis' }}
{{ daftar.length }} item
{{ `Halo ${nama}` }}| Boleh (ekspresi) | Tidak boleh (pernyataan) |
|---|---|
{{ a + b }} | {{ let x = 1 }} |
{{ ok ? 'ya' : 'tidak' }} | {{ if (ok) { ... } }} |
{{ nama.trim() }} | {{ for (...) {} }} |
Jangan menaruh logika panjang di template. Template harus tetap mudah dibaca. Logika rumit sebaiknya dipindah ke computed (bab 9).
v-text dan v-html
v-text="pesan"setara{{ pesan }}, tetapi mengganti seluruh isi elemen.v-html="html"menampilkan string sebagai HTML mentah.
<p v-html="isi"></p>
const isi = '<b>Diskon 50%!</b>' // tampil tebalBahaya XSS! Jangan pernah memakai v-html untuk isi yang berasal dari pengguna (komentar, nama, dll.). Penyerang bisa menyisipkan skrip atau atribut berbahaya. Pakai v-html hanya untuk konten yang kamu percaya, dan lebih baik pakai {{ }} yang otomatis meng-escape HTML.
Akses global yang diizinkan di template
Template hanya bisa mengakses variabel dari <script setup> dan beberapa global aman seperti Math, Date, JSON, Number, String, Array. Variabel global lain (misal window) tidak tersedia — jadikan dulu variabel di script.
Komentar & banyak akar
- Komentar template:
<!-- ... -->. - Di Vue 3 komponen boleh punya banyak elemen akar (fragment) — berbeda dengan Vue 2 yang wajib satu.
Kesalahan umum
- Menulis kurung kurawal ganda di dalam atribut:
<a href="{{ url }}">— tidak berfungsi. Untuk atribut gunakan:href="url"(bab 4). - Memakai pernyataan (
if,let) di dalam kurung kurawal ganda — gunakan ternary atau computed. - Lupa bahwa objek/array ditampilkan sebagai JSON (
{{ obj }}). Akses properti spesifik:{{ obj.nama }}.