Directive di Vue JS adalah attribute khusus yang diawal dengan v-. Pada materi template kita sudah menggunakan salah satu directive, yaitu v-bind. Sebenarnya selain v-bind masih ada banyak directive yang bisa gunakan. Directive ini bersifat seperti function, bisa memiliki parameter atau tidak menggunakan parameter. Pada tulisan ini aku hanya akan membahas beberapa directive yang mungkin sering digunakan. Jika ingin mengetahui lebih lengkap ada directive apa saja, teman-teman bisa lihat di link ini: https://vuejs.org/api/built-in-directives.html.
v-if
Directive pertama yang menurutku akan sering kita gunakan adalah v-if. Cara kerja v-if sebenarnya hampir sama dengan if-else pada bahasa pemrograman sehingga kita bisa menggunakan v-if saja atau ditambah dengan v-else-if dan juga v-else. Untuk lebih jelasnya mari kita perhatikan contoh sederhana berikut ini.
<script setup lang="ts">
import {ref} from "vue";
const score = ref(90);
</script>
<template>
<div v-if="score > 80">Amazing</div>
<div v-else-if="score > 60">Almost Amazing</div>
<div v-else>Try to study harder</div>
</template>
<style scoped>
</style>Pada contoh di atas, jika score yang kita tentukan lebih dari 80 maka hanya div pertama yang akan ditampilkan. Begitu juga jika nilainya kurang dari 80 dan lebih dari 60 maka hanya div kedua yang ditampilkan. Jika tidak memenuhi keduanya, tentunya div ketiga yang akan ditampilkan.
v-for, looping directive di vue js
Sekarang kita akan membahas directive v-for. Seperti namanya v-for bisa kita gunakan untuk membuat perulangan di template. v-for dapat kita gunakan untuk melakukan perulangan terhadap array dan juga object. Penggunaan v-for cukup mudah, perhatikan contoh berikut.
<script setup lang="ts">
import {ref} from "vue";
let names = ref(["Ardhan", "Wahyu", "Rahmanu"]);
</script>
<template>
<ul>
<li v-for="name in names">{{name}}</li>
</ul>
</template>
<style scoped>
</style>Dengan menggunakan v-for maka kita tidak perlu menulis banyak <li></li> karena dia akan secara otomatis dilooping oleh v-for. Selain dapat melakukan perulangan terhadap array, kita juga bisa melakukan perulangan terhadap object. Perhatikan contoh berikut.
<script setup lang="ts">
import {ref} from "vue";
let person = ref({
name: "Ardhan",
department: "Pusat TIK",
gender: "Laki-Laki"
});
</script>
<template>
<table>
<tr v-for="(value, key) in person">
<td>{{key}}</td>
<td>:</td>
<td>{{value}}</td>
</tr>
</table>
</template>
<style scoped>
</style>Dengan kode di atas, kita bisa mengamil key dari object dan juga valuenya. Berikut ini adalah tampilan yang dihasilkan oleh component vue di atas.
Yang tidak bisa dilakukan dengan v-for adalah melakukan iterasi menggunakan index. Kita tidak bisa menggunakan v-for=”(let i=0; i<10; i++)”.
v-on
Directive di vue js terakhir yang akan kita bahas pada tulisan ini adalah v-on. Sebelumnya kita pernah menggunakan @click= yang merupakan shortcut dari v-on. Jika kita tidak menggunakan shortcut, kita harus menulis v-on:click=. Mari kita lihat contoh sederhana berikut ini.
<script setup lang="ts">
import {ref} from "vue";
let text = ref("touch me");
function touchMe() {
text.value = "you touch me"
}
function leaveMe() {
text.value = "you leave me";
}
</script>
<template>
<div v-on:mouseenter="touchMe" v-on:mouseleave="leaveMe">{{text}}</div>
</template>
<style scoped>
div {
width: 100px;
height: 100px;
background-color: magenta;
padding: 10px;
}
</style>Pada contoh di atas, kita menambahkan 2 v-on, yaitu v-on:mouseenter yang nilainya adalah function touchMe dan v-on:mouseleave yang nilainya adalah leaveMe. Dengan v-on tersebut, jika kita mengarahkan mouse ke div, maka tulisan div akan berubah menjadi “you touch me”. Saat kita meninggalkan div, tulisannya akan berubah menjadi “you leave me”.
Penulisan v-on di atas, sebenarnya bisa kita sederhanakan dengan shorcut @mouseenter dan @mouseleave. Tapi, jika kita ingin lebih sederhana kita juga bisa menggunakan object sebagai nilai v-on. Berikut ini contohnya:
<template>
<div v-on="{mouseenter: touchMe, mouseleave: leaveMe}">{{text}}</div>
</template>Object yang menjadi value bisa juga kita ambilkan dari script sehingga kita bisa membuat value untuk v-on yang sangat banyak tanpa mengotori template. Perhatikan contoh potongan code berikut ini
<script setup lang="ts">
....
isikan sendiri functionya ya
....
let mouseEvent = ref({
mouseenter: touchMe,
mouseleave: leaveMe,
click: clickMe
});
</script>
<template>
<div v-on="mouseEvent">{{text}}</div>
</template>
Penutup Directive di Vue JS
Demikianlah sedikit penjelasan tentang penggunakaan directive. Kita baru membahas 3 directive. Sebenarnya masih banyak lagi directive yang disediakan di Vue. Untuk mempelajarinya, teman-teman bisa melihat dokumentasinya ya. Selamat belajar.
