Template adalah HTML milik komponen, ditambah sedikit sintaks Vue untuk menaruh data ke dalamnya. Bayangin nota yang sudah dicetak di Warung Bu Sri: "Menu: ____, Harga: Rp ____". Kasir gak menulis ulang notanya, dia cuma mengisi titik-titiknya dari catatan. Template itu nota cetakannya, dan Vue yang mengisi titik-titiknya dari data. Begitu catatannya berubah, isian di nota ikut berganti.
🧪 Tebakan cepat: Ada
const url = ref("/menu")dan template<a href="{{ url }}">Lihat menu lengkap</a>. Link-nya menuju ke mana? Tebak dulu, jawabannya ada di bagian "v-bind: data ke atribut".
Interpolasi: {{ }} mengisi teks
const menu = ref("Es Teh")
const harga = ref(5000)
---template---
<div>
<h2>{{ menu }}</h2>
<p>Harga: Rp{{ harga }}</p>
</div>
Hasil render-nya di halaman:
<div>
<h2>Es Teh</h2>
<p>Harga: Rp5000</p>
</div>
{{ menu }}disebut interpolasi, sintaks mustache (kurawal ganda yang mirip kumis). Vue menggantinya dengan nilaimenu.- Teks di sekitarnya,
Harga: Rp, tetap ditulis di template. Cuma bagian yang bisa berubah yang diambil dari data. - Pola yang sama dipakai di latihan:
<h1>Halo, {{ nama }}!</h1>dengannamaberisi"Budi"tampilHalo, Budi!. Koma dan tanda serunya ditulis di template, bukan di data. - Kalau
menu.valuediganti jadi"Mie Ayam",<h2>ikut berganti. Teks yang diketik langsung, misalnya<h2>Es Teh</h2>, gak akan pernah berubah.
Di dalam kurawal: satu ekspresi JavaScript
Isi kurawal ganda boleh lebih dari nama variabel, asal satu ekspresi: potongan kode yang menghasilkan satu nilai. Dengan data menu = "Es Teh", harga = 5000, jumlah = 3, dan stok = 0:
| Di template | Yang tampil |
|---|---|
{{ menu.toUpperCase() }} |
ES TEH |
{{ harga * jumlah }} |
15000 |
{{ harga.toLocaleString("id-ID") }} |
5.000 |
{{ stok > 0 ? "Ada" : "Habis" }} |
Habis |
- Method string boleh dipanggil. Kalau
pesanberisi"Halo Vue",{{ pesan.toUpperCase() }}menampilkanHALO VUE. toLocaleString("id-ID")memberi titik ribuan ala Indonesia.- Ternary
syarat ? a : bmemilih satu dari dua nilai. Ini cara menulis "kalau" di dalam kurawal. - Statement (perintah yang gak menghasilkan nilai) gak boleh:
let,if, atau dua perintah dipisah;.{{ if (stok > 0) { "Ada" } }}gagal di-compile dan seluruh komponennya gak tampil. Build development menulis[Vue warn]: Template compilation error: Error parsing JavaScript expression: avoid using JavaScript keyword as property name: "if". Playground memakai build production, jadi yang muncul cuma error JavaScript polos:Unexpected token 'if'. - Hitungan yang panjang lebih rapi dipindah ke script. Caranya ada di pelajaran computed.
Teks aman: {{ }} dan v-html
const promo = ref("<b>Diskon 10%</b>")
---template---
<p>{{ promo }}</p>
<p v-html="promo"></p>
| Template | Yang tampil |
|---|---|
<p>{{ promo }}</p> |
<b>Diskon 10%</b>, tag-nya ikut tampil sebagai teks |
<p v-html="promo"></p> |
Diskon 10%, tebal |
{{ }}selalu memasang isinya sebagai teks. Tag HTML di dalam data gak dijalankan, cuma ditampilkan. Ini melindungi halaman dari HTML jahat yang diketik orang, misalnya di komentar pembeli.v-htmladalah directive, atribut khusus Vue yang diawaliv-. Dia memasang isinya sebagai HTML sungguhan.- Pakai
v-htmlcuma untuk HTML yang kamu tulis sendiri. Isian pengguna yang masuk lewatv-htmlbisa menjalankan script di browser orang lain. Serangan ini namanya XSS.
v-bind: data ke atribut
const url = ref("/menu")
const habis = ref(true)
---template---
<a :href="url">Lihat menu lengkap</a>
<button :disabled="habis">Pesan</button>
v-bind:href="url"mengikat atributhrefke dataurl. Singkatannya:href="url", dan artinya sama persis.- Isi tanda kutip setelah
:adalah ekspresi JavaScript, bukan teks.:href="url"membaca variabelurl. - Untuk atribut yang cuma ada atau gak ada, seperti
disabled,:disabled="habis"memasang atributnya saathabisbernilaitruedan membuangnya saatfalse.
| Yang ditulis | href hasilnya |
|---|---|
:href="url" |
/menu |
href="url" |
url, teks biasa |
href="{{ url }}" |
{{ url }}, persis tulisan itu |
Link dengan href="{{ url }}" menuju alamat yang tulisannya persis {{ url }}. Itu jawaban tebakannya. Kurawal ganda cuma jalan di antara tag, gak di dalam atribut. Vue 3 gak memberi error atau warning apa pun, linknya cuma diam-diam salah.
⚠️ Jebakan yang sering ketemu
- Kurawal ganda di atribut.
href="{{ url }}"gak membaca data. Pakai:href="url". - Mengetik nilainya langsung.
<h1>Halo, Budi!</h1>tampil sama, tapi gak ikut berubah saat datanya berubah. Latihan memeriksa bahwanamadantahundibaca lewat{{ }}, danhreflewat:href. - Statement di dalam kurawal.
if,let, atau;membuat template gagal di-compile dan komponennya hilang. Pakai ekspresi, misalnya ternary. v-htmluntuk isian pengguna. Komentar, nama, atau pesan dari orang lain ditampilkan dengan{{ }}, bukanv-html.
TL;DR: Template adalah HTML komponen plus sintaks Vue. {{ menu }} (interpolasi, sintaks mustache) menaruh nilai data di antara tag sebagai teks yang aman, dan ikut berubah saat datanya berubah. Isi kurawal ganda harus satu ekspresi, misalnya {{ pesan.toUpperCase() }} atau ternary {{ stok > 0 ? "Ada" : "Habis" }}, bukan if atau let. v-html memasang HTML sungguhan, jadi pakai cuma untuk konten milikmu sendiri. Atribut diikat dengan v-bind:href="url" atau singkatannya :href="url"; href="{{ url }}" cuma menghasilkan link ke tulisan {{ url }}.
