Template di Vue JS merupakan salah satu bagian terpenting pada component Vue. Bagian template akan kita isi dengan elemen HTML. Nah, biasanya elemen HTML yang kita tampilkan pada template ini akan menampilkan data dari bagian script dengan cara memberikan tanda double mustache seperti ini {{ }}. Jika data yang ditampilkan mengandung HTML, maka secara otomatis akan ditampilkan dalam bentuk plain. Untuk lebih jelasnya, perhatikan contoh berikut ini.
<script setup lang="ts">
const title: string = "<b>This is title</b>";
</script>
<template>
<h1>{{title}}</h1>
</template>
<style scoped>
.title {
color: blue;
}
</style>Jika kita memanggil component diatas, maka kita akan mendapatkan hasil seperti di bawah ini. Jadi <b> dan </b> pada title akan tetap tercetak. Nah, cara semacam ini kita sebut dengan Text Interpolation. Dengan cara ini maka vue akan mengamankan kita dari serangan XSS.
Raw HTML
Meskipun secara default template di Vue JS menampilkan data dengan Text Interpolation, kita tetap bisa menggunakan Raw HTML dengan menggunakan attribute v-html. Perhatikan contoh berikut.
<script setup lang="ts">
const title: string = "<b><i>This is title</i></b>";
</script>
<template>
<h1 class="title">
<span v-html="title"></span>
</h1>
</template>
<style scoped>
.title {
color: blue;
}
</style>Pada contoh di atas, variable title kita masukkan ke dalam attribute v-html yang ada di span. Dengan begitu span akan menampilkan title beserta elemenya. Jika kita jalankan maka hasilnya akan menjadi seperti ini.
Attribute Binding
Kita tidak dapat menggunakan mustache di attribute elemen HTML seperti ini.
<div class="{{className}}"></div>Lalu bagaimana caranya jika kita ingin menentukan nilai attribute menggunakan variable dari script? Tenang saja, Vue sudah memikirkan itu dan memberikan kita fitur dengan nama Attribute Biding. Cara melakukan attribute binding adalah dengan menambahkan kata kunci v-bind sebelum nama attribute. Jadi contoh sebelumnya kita ubah menjadi seperti ini.
<div v-bind:class="className"></div>Mari kita coba membuat contoh yang lebih jelas. Pada contoh berikut ini, kita akan mencoba untuk membuat sebuah div, yang ketika kita klik warnanya akan berubah. Perubahan warna ini tergantung pada class style yang digunakan oleh div tersebut.
<script setup lang="ts">
import {ref} from "vue";
let className:any = ref("red");
function changeColor() {
if (className.value == "red") {
className.value = "blue";
} else {
className.value = "red";
}
}
</script>
<template>
<div @click="changeColor" v-bind:class="className"></div>
</template>
<style scoped>
div { width: 100px; height: 100px; }
.red { background-color: red; }
.blue { background-color: blue; }
</style>Dikarenakan v-bind itu sering sekali dilakukan, maka Vue menyediakan shortcut untuk melakukan v-bind. Jadi kita tidak perlu harus mengetikkan kata kunci v-bind. Kita cukup menambahkan titik dua (:) di depan attributenya. Dengan menggunakan shortcut kita bisa mengubah div menjadi seperti ini.
<div @click="changeColor" :class="className"></div>Jika penulisan di atas masih kurang simple, ada satu trik lagi yang bisa digunakan. Kita tinggal mengubah nama variablenya menjadi nama attribute.
<script setup lang="ts">
import {ref} from "vue";
let id:any = ref("red");
function changeColor() {
if (id.value == "red") {
id.value = "blue";
} else {
id.value = "red";
}
}
</script>
<template>
<div @click="changeColor" :id></div>
</template>Pada contoh di atas, kita gunakan attribute id karena class merupakan kata kunci yang tidak bisa digunakan sebagai variable.
Multiple Attribute Template di Vue JS
V-Bind tidak hanya mendukung untuk set nilai attribute satuan. Kita bisa melakukan set nilai attribute secara bersamaan menggunakan object. Jadi, pada object kita tentukan attribute object dengan nama attribute pada elemen html. Untuk lebih jelasnya, mari kita lihat contoh berikut ini.
<script setup lang="ts">
import {ref} from "vue";
class Shape {
name: string;
id: string;
style: string;
constructor(name: string, id: string, style: string) {
this.name = name;
this.id = id;
this.style = style;
}
}
const redRound = new Shape("redRound", "round", "background-color: red");
const blueSquare = new Shape("blueSquare", "square", "background-color: blue");
const currentShape = ref(redRound);
function changeShape() {
if (attribute.value.name == "redRound") {
currentShape.value = blueSquare;
} else {
currentShape.value = redRound;
}
}
</script>
<template>
<div @click="changeShape" v-bind="currentShape"></div>
</template>
<style scoped>
#square {
width: 100px;
height: 100px;
}
#round {
width: 100px;
height: 100px;
border-radius: 50%;
}
</style>Pada contoh di atas kita punya class Shape. Lalu kita membuat 2 buah object Shape, yaitu redRound dan blueSquare. Kita simpan Shape saat ini di variable currentShape. Nah, kita ingin ketika klik div maka dia akan mengganti currentShape. Jadi kita sediakan fungsi untuk merubah bentuk yaitu changeShape(). Pada div tersebut kita baca shape menggunakan v-bind=”currentShape”. Dengan v-bind tanpa menambahkan attribute maka attribute kelas akan dijadikan sebagai attribute.
Ekspresi pada Template di Vue JS
Kita bisa menambahkan ekspresi javascript ke dalam template di vue js. Caranya adalah menambahkan ekspresi tersebut di dalam mustache. Untuk lebih jelasnya, perhatikan contoh sederhana berikut ini.
<script setup lang="ts">
import {ref} from "vue";
const name = ref("Ardhan");
function square(n: number): number {
return n * n;
}
</script>
<template>
<div>{{ 100 * 100 }}</div>
<div>{{ name + " Wahyu" }}</div>
<div>{{ name.toUpperCase() }}</div>
<div>{{ square(4) + 100 }}</div>
</template>
<style scoped>
</style>Pada contoh di atas, kita bisa membuat perkalian angka, penggabungan string, formating string dan bahkan membaca fungsi dalam mustache.
Penutup
Demikianlah, sedikit penjelasan tentang template di Vue JS. Template ini benar-benar sangat memudahkan kita saat kita akan membuat tampilan dengan Vue. Semoga tulisan ini bermanfaat untuk kita semua. Sampai bertemu lagi pada tulisan yang lain.
