
Setelah kemarin kita berkenalan dengan Framework Vue Js ini, sekarang kita akan mengulas Apa itu Vue Directive. Spoiler dulu nih, Vue Directive adalah salah satu Fitur yang sanget berguna di Vue Js, Vue Directive ini memiliki beberapa kegunaan yang akan sangat berguna saat kita mengembangkan Website kita.
Daftar Isi
Mengenal Apa itu Vue Directive
Secara Bahasa, Directive berarti petunjuk, arah, atau perintah.
Akan tetapi dalam Vue js, Directive
merupakan Atribut yang berfungsi menjalankan perintah atau ekspresi Jacascript didalam HTML biasa.
Biasanya, Directive ini diawali dengan v-
. nah sekarang coba Mimin contohkan Vue Directive paling sederhana.
<div id="app">
<h1 v-if="true">Terlihat</h1>
<h1 v-if="false">Tidak Terlihat</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
})
</script>
Nah, kalau dilihat diatas ada 2 tag <h1>
yang memiliki Vue Directive yaitu v-if
. Directive ini akan menampilkan tag <h1>
apabila bernilai True
. Jadi kalau dibuka di Website, maka hanya akan muncul seperti ini

Ajaib bukan? nah itu tadi merupakan Contoh Vue Directive paling sederhana. Nah di Artikel Apa itu Vue Directive ini kita akan membahas beberapa Vue Directive lainnya.
Daftar Vue Directive
Nah disini akan Mimin contohkan beberapa Vue Directive beserta kegunaanya masing-masing. Tiap Vue Directive memiliki kegunaan yang berbeda.
Directive v-bind
Seperti namanya, v-bind
digunakan untuk mengikat
elemen HTML yang kita punya. Biasanya v-bind ini mengikat elemen kita dengan Data dari Javascript yang kita miliki. Berikut contoh simplenya
<body>
<div id="app">
<a v-bind:href="link">Link</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
link: 'https://duniacoding.info/belajar-vue-js-untuk-pemula-1/'
}
})
</script>
</body>
Nah syntax diatas akan menampilkan sebuah Tombol Link, yang apabila di klik akan mengikuti link
yang sudah kita perkenalkan di data, yaitu akan mengarah ke https://duniacoding.info/belajar-vue-js-untuk-pemula-1/.
Directive v-for
Directive v-for
ini adalah Directive yang digunakan untuk melakukan Looping didalam HTML kita. Directive ini akan melooping sesuai dengan jumlah yang kita tentukan/banyaknya Data
yang kita Looping
, berikut contohnya.
<body>
<div id="app">
<h3>Looping v-for</h3>
<ul>
<li v-for="index of 5" v-bind:key="index">
{{ index }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
})
</script>
</body>
Nah syntax diatas akan menghasilkan output

Keren kan? kita bisa lakukan Looping didalam Bahasa HTML. Nah selain Looping dengan angka yang sudah ditentukan, v-for juga bisa melakukan Looping untuk Data dari Array yang kita punya. Contohnya seperti ini
<body>
<div id="app">
<h3>Looping Array</h3>
<ul>
<li v-for="data, index of mobil" v-bind:key="index">
{{ data }}
</li>
</ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
mobil: ['Toyota', 'Avanza', 'Xenia', 'Lamborgini']
}
})
</script>
</body>
Pada syntax diatas, kita memiliki Array Mobil yang berisi [‘Toyota’, ‘Avanza’, ‘Xenia’, ‘Lamborgini’]. Nah, kita bisa mengeluarkan semua Data di Array itu dengan v-for dengan cara <li v-for="data, index of mobil" v-bind:key="index">
. Hasilnya

Yang harus diingat dar v-for adalah selalu menggunakan v-bind:key
untuk memberi tau sistem dengan apa index yang kita gunakan untuk Looping ini.
Directive v-on
Selanjutnya yang kita pelajari di Artikel Apa itu Vue Directive adalah Directive v-on. Sebenarnya directive ini sangat sederhana, Directive ini digunakan untuk Event dalam HTML. Misal Event Click. Penerapannya seperti ini
<button v-on:click="FungsiClick()">Tombol</button>
Directive v-model
Directive ini sebenarnya sudah kita gunakna di artikel sebelumnya. Nah Directive v-model ini biasanya digunakan untuk menyambungkan
kode HTML dengan Data
yang dimiliki Javascript. Berikut contohnya
<body>
<div id="app">
<h3>{{ pesan }}</h3>
<input v-model="pesan">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
pesan: "Pesan dengan v-model"
}
})
</script>
</body>
Dengan syntax diatas kita akan menampilkan hasil seperti ini

Kerennya v-model ini adalah kita bisa mengubah tampilan dari HTML tanpa harus melakukan Refresh, coba saja diganti tulisan didalam kotak itu :D.
Directive v-if, v-else-if, v-else
Directive terakhir yang akan kita bahas disini adalah Directive yang khusus untuk pengkondisian. Directive ini berguna sekali saat kita membuat Website kedepannya. Berikut contohnya.
Contoh penggunaan v-if
<body>
<div id="app">
<h1 v-if="seen">Pesan ini diperlihatkan dengan v-if</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
seen: True
}
})
</script>
</body>
Nah kalau dilihat codingan diatas akan Menampilkan tampilan dari tag <h1> tersebut karena nilai dari seen
adalah True
, bisa dilihat di seen: True

Nah sekarang coba saja ganti nilai seen tersebut dengan false, maka tag <h1> tidak akan ditampilkan.
Terus.. bagaimana penggunaan dari v-else-if dan v-else? Nah kegunaan dari Directive ini sama dengan Pengkondisian if, else pada Umumnya.
<body>
<div id="app">
<h1 v-if="seen == 1">Pesan ini diperlihatkan dengan v-if 1</h1>
<h1 v-else-if="seen == 2">Pesan ini diperlihatkan dengan v-if 2</h1>
<h1 v-else>Pesan ini diperlihatkan dengan v-if Selain 1 dan 2</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
seen: 2
}
})
</script>
</body>
Pada syntax diatas, aku memberikan nilai seen
adalah 2
. jadi yang akan ditampilkan adalah v-else-if dengan Kondisi seen==2
.

Nah coba saja ganti nilai seen
menjadi angka lainnya, maka tampilan dari HTML kita akan menyesuakan dengan itu.
Kesimpulan
Nah cukup sampai disini saja Artikel Apa itu Vue Directive. Vue Directive ini adalah hal yang WAJIB kalian pelajari saat ingin mendalami Vue Js. Untuk mempelajari Apa itu Vue Directive dengan lebih jelas kalian bisa melihat Dokumentasi resmi Laravel di https://docs.vuejs.id/v2/guide/index.html.
Sampai disini saja Artikel Apa itu Vue Directive, semoga Bermanfaat ya!