Halo teman-teman semuanya, pada artikel sebelumnya kita sudah berkenalan dengan Vue.js, menginstall Node.js, dan membuat proyek pertama menggunakan Vite.
Pada artikel kali ini, kita akan membahas tentang Template Syntax di Vue. Konsep ini sangat penting karena semua tampilan (view) di Vue ditulis menggunakan template.
Apa Itu Template Syntax?
Template Syntax adalah cara penulisan HTML di Vue yang mendukung ekspresi JavaScript sederhana dan directive khusus untuk mengontrol tampilan.
Dengan template, kita bisa:
- Menampilkan data dari state.
- Menyisipkan ekspresi JavaScript.
- Mengatur atribut dan class secara dinamis.
- Mengontrol rendering dengan directive seperti
v-if, v-for, dan v-model.
Interpolasi ({{ }})
Interpolasi digunakan untuk menampilkan data dari script ke template.
<script setup>
const name = "Santri Koding"
</script>
<template>
<h1>Halo, {{ name }}!</h1>
</template>
Hasilnya: Menampilkan teks Halo, Santri Koding!
Ekspresi JavaScript di Template
Kita bisa menggunakan ekspresi sederhana langsung di dalam {{ }}.
<script setup>
const a = 5
const b = 3
</script>
<template>
<p>Hasil penjumlahan: {{ a + b }}</p>
</template>
Hasilnya: Hasil penjumlahan: 8
Catatan: hanya ekspresi sederhana yang boleh digunakan, bukan statement (if, for, dll).
Binding Atribut dengan v-bind
Directive v-bind (atau shorthand :) digunakan untuk menghubungkan atribut HTML dengan data.
<script setup>
const imageUrl = "https://via.placeholder.com/150"
</script>
<template>
<img v-bind:src="imageUrl" alt="Gambar" />
<!-- shorthand -->
<img :src="imageUrl" alt="Gambar 2" />
</template>
Binding Class dan Style
Vue memudahkan kita mengatur class atau style secara dinamis.
<script setup>
const isActive = true
const textColor = "blue"
</script>
<template>
<!-- Dynamic Class -->
<p :class="{ active: isActive }">Teks ini aktif</p>
<!-- Dynamic Style -->
<p :style="{ color: textColor, fontSize: '20px' }">
Teks dengan warna dinamis
</p>
</template>
<style>
.active {
font-weight: bold;
}
</style>
Directive Khusus
Beberapa directive dasar di Vue:
v-if / v-else → conditional rendering.v-for → loop / list rendering.v-model → two-way data binding (form).
Contoh sederhana:
<script setup>
const isLoggedIn = true
const users = ["Budi", "Siti", "Andi"]
const message = "Hello Vue"
</script>
<template>
<!-- v-if -->
<p v-if="isLoggedIn">Selamat datang!</p>
<p v-else>Silakan login</p>
<!-- v-for -->
<ul>
<li v-for="(user, index) in users" :key="index">{{ user }}</li>
</ul>
<!-- v-model -->
<input v-model="message" />
<p>Pesan: {{ message }}</p>
</template>
Kesimpulan
Pada artikel ini, kita sudah belajar tentang Template Syntax di Vue, mulai dari interpolasi {{ }}, ekspresi sederhana, binding atribut dengan v-bind, dynamic class & style, hingga beberapa directive dasar.
Di artikel berikutnya, kita akan membahas tentang Component Dasar, yaitu bagaimana membuat dan menggunakan komponen di Vue.
Terima kasih