Pada tutorial kali ini kita akan mencoba mengenal directive pada VueJs dan membahas beberapa contoh dasar dari Directive pada VueJs. Jika anda belum pernah menggunakan framework Javascript seperti Vue.js atau Angular.js sebelumnya, anda mungkin tidak mengetahui apa itu Directive. Pada dasarnya, Directive adalah token khusus pada markup yang memberitahukan sebuah library untuk melakukan sesuatu pada elemen DOM.
Untuk lebih mengenal penggunaan Directive pada Vue.js, kita akan membahas beberapa directive yaitu:
- v-show yang digunakan untuk menampilkan elemen secara kondisional
- v-if yang bisa digunakan sebagai pengganti v-show
- v-else yang menampilkan elemen ketika v-if bernilai false
- v-for yang digunakan perulangan array
Directive v-show
Untuk mendemonstrasikan directive v-show, kita akan membuat sesuatu yang sederhana misalnya kita perlu menampilkan elemen HTML jika sebuah input text tidak diisi.
<html>
<head>
<title>Learn Vue</title>
</head>
<body>
<div id="app">
<h1 v-show="!message">Anda harus mengisi text area dibawah</h1>
<input v-model="message">
<div>
<button v-show="message">
Submit
</button>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
</html>Pada kode diatas kita memiliki sebuah peringatan sederhana di tag H1 dan sebuah button yang akan ditampilkan secara kondisional. Tag H1 hanya akan muncul jika tidak ada pesan pada input text, sementara button akan muncul jika terdapat pesan pada input text.
Sebuah elemen dengan v-show akan selalu di render dan tetap berada di DOM. v-show pada dasarnya menggunakan property CSS display. Jika kondisi bernilai false, elemen ini akan menggunakan property CSS display:none
Directive v-if
Pada titik ini anda mungkin bertanya apa perbedaan antara v-if dan v-show, yang mana keduanya melakukan sesuatu pada saat terjadi kondisi tertentu.
Directive v-if memiliki fungsi yang hampir serupa dengan dengan directive v-show, letak perbedaannya adalah jika v-show hanya menggunakan properti CSS display: none, maka v-if akan menghapus elemen jika kondisinya tidak terpenuhi dan akan membuat kembali elemen tersebut jika kondisinya sudah terpenuhi.
Untuk lebih memahami perbedaan antara keduanya, kita akan menggunakan contoh sebelumnya, hanya saja kali ini kita akan menggunakan Directive v-if.
<html>
<head>
<title>Learn Vue</title>
</head>
<body>
<div id="app">
<h1 v-if="!message">Anda harus mengisi text area dibawah</h1>
<input v-model="message">
<div>
<button v-if="message">
Submit
</button>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
</html>Kode diatas akan menghasilkan tampilan yang sama dengan contoh sebelumnya, untuk melihat perbedaannya kita akan menggunakan Inspect Element dari browser.
Pada gambar diatas, terlihat bahwa button submit tidak ada di dalam DOM karena v-if akan menghapus elemen jika kondisinya tidak terpenuhi dan akan membuat kembali elemen tersebut jika kondisinya terpenuhi.
Sekarang mari kita lihat apa yang akan terjadi jika kita mengisi input text.
Pada gambar diatas kita sudah bisa melihat elemen button karena kondisi untuk elemen ini terpenuhi, dan sebaliknya tag H1 yang kita gunakan untuk pesan peringatan hilang.
Template v-if
Jika suatu saat kita ingin menampilkan/menghilangkan beberapa elemen sekaligus, kita bisa menggunakan v-if pada elemen <template> yang berfungsi sebagai pembungkus yang tidak akan terlihat di dalam DOM.
<div id="app">
<template v-if="!message">
<h1>Anda harus mengisi text area dibawah</h1>
<p>Silahkan di isi ya</p>
</template>
<input v-model="message">
<div>
<button v-if="message">
Submit
</button>
</div>
</div>
Seperti kita lihat pada gambar diatas, elemen <template> yang kita buat pada kode diatas tidak akan muncul pada DOM.
Berbeda dengan v-if, directive v-show tidak support syntax template.
Directive v-else
Ketika menggunakan v-if kita juga bisa menggunakan directive v-else untuk menangani kondisi yang tidak terpenuhi pada directive v-if.
<html>
<head>
<title>Learn Vue</title>
</head>
<body>
<div id="app">
<h1 v-if="!message">Anda harus mengisi input text dibawah</h1>
<h2 v-else>Anda mengisi input text</h2>
<input v-model="message">
<div>
<button v-if="message">
Submit
</button>
</div>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
message: ''
}
})
</script>
</html>
Hanya untuk contoh, kita telah menggunakan tag H2 dengan peringatan berbeda dari sebelumnya, yang ditampilkan secara kondisional. Jika tidak ada pesan yang di input di input text, kita akan melihat tag H1. Jika ada pesan, kita akan melihat H2 menggunakan sintaks yang sangat sederhana dari Vue v-if dan v-else.
Directive v-for
Untuk melakukan perulangan setiap item dalam array, kita bisa menggunakan Directive v-for. Directive v-for dapat digunakan pada data dengan tipe array atau object. Jika sebelumnya kita menggunakan PHP, Directive v-for ini hampir mirip dengan foreach pada PHP, hanya saja penempatan parameternya yang berbeda. Pada PHP syntax kita biasa menggunakan foreach dengan format foreach ($array as $value) , sedangkan v-for kebalikannya yaitu value in array.
<html>
<head>
<title>Learn Vue</title>
</head>
<body>
<div id="app">
<ol>
<li v-for="name in names">{{ name }}</li>
</ol>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
persons: [
'Alfa Adhitya',
'Nurul Aqmarina',
'Muhammad Kahfi El-Azzam'
]
}
})
</script>
</html>Pada contoh diatas Vue akan melakukan perulangan pada array persons dan ditampilkan pada halaman HTML. Pada contoh diatas juga, kita menampilkan nama di dalam tag <li>, kita juga bisa menggunakan Directive v-text untuk menampilkan hasil perulangan.
<li v-for="person in persons" v-text="person"></li>Kita juga bisa melakukan perulangan pada object array hanya saja pemanggilannya yang sedikit berbeda.
<html>
<head>
<title>Learn Vue</title>
</head>
<body>
<div id="app">
<ol>
<li v-for="person in persons">
Nama {{ person.name }} umur {{ person.age }}
</li>
</ol>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
persons: [
{
name: 'Alfa Adhitya',
age: 28
},
{
name: 'Nurul Aqmarina',
age: 26
},
{
name: 'Muhammad Kahfi El-Azzam',
age: 4
}
]
}
})
</script>
</html>Range v-for
Directive v-for juga bisa menangani integer, ketika kita menggunakan integer dalam v-for, template akan diulang sebanyak jumlah angka yang diberikan.
<ol>
<li v-for="i in 10" class="list-group-item">
Angka {{ i }}
</li>
</ol>Kode diatas akan mengulang angka dari 1 sampai 10.
Artikel ini hanya menjelaskan sebagian kecil dari directive yang ada pada Vue.js dengan tujuan untuk mengenal apa itu Directive pada VueJs, masih banyak directive lainnya yang akan kita bahas pada tutorial Vue.js selanjutnya.
No Comments
Leave a comment Cancel