Postingan ini adalah kelanjutan dari postingan yang berjudul Apa Sih Directive Pada Vue JS itu – Directive merupakan atribut khusus yang disematkan pada elemen atau markup HTML sebagai penanda dan berfungsi untuk menjalankan satu perintah javascript di dalam atribut diawali dengan v-.
bahwa elemen DOM tersebut akan dikenai perlakuan tertentu oleh Vue. Directive berbentuk ekspresi Javascript yang secara reaktif menerapkan efek tertentu ke elemen DOM ketika nilai ekspresinya berubah.
Directive V-html, V-once, V-text, dan V-show itu sudah saya bahas di postingan pertama saya dengan judul Apa sih Directive pada Vue Js itu
Dalam postingan ini akan saya bahas tentang Directive :
V-if
V-if ini tidak jauh beda dengan v-show, v-if ini merupakan directive yang digunakan untuk merender atau tidak merender suatu elemen DOM (conditional rendering).
Contoh
Contoh
[html] <h1 v-if=”renderTitle”>{{ title }}</ha1> [/html]
Jika variabel renderTitle bernilai false maka teks variabel title tidak akan dirender sehingga dilakukan inspectt elemen, maka elemen tersebut memang benar-benar tidak ada dibrowser.
Kita juga bisa menggunakan elemen template atau div.
Contoh :
[html] <template v-if="content">
<h1>Title</h1></pre>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<pre></template> [/html]
Atau
[html] <div v-if="content">
<h1>Title</h1></pre>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<pre></div> [/html]
Ketika menggunakan v-if maka kita juga bisa menggunakan v-else sebagai blok pengecualian.
[html] <h1 v-if="renderTitle">{{ title }}</h1>
<h1 v-else>Untitle</h1>[/html]
Vue juga menyediakan v-else-if sebagai blok pengecualian bersyarat jika variabel yang diuji memiliki kemungkinan nilai lebih dari dua. Contoh :
<div id="app"> <div v-if="nilai === 'A'"> Sempurna </div> <div v-else-if="nilai === 'B'"> Bagus </div> <div v-else-if="nilai === 'C'"> Cukup </div> <div v-else> Kurang </div> </div> <script> var vm = new Vue({ el: '#app', data: { nilai: "B", }, }) </script>
V-on
Merupakan directive yang berperan sebagai sebuah event listener pada elemen HTML/komponen Vue.
Directive ini bertugas memantau aktifitas (aksi) yang dilakukan terhadap suatu elemen HTML/komponen Vue.
Contoh :
[html] <button v-on:click="info(‘halo’)"> Informasi </button> [/html]
Notte : info() adalah method yang harus kita deklarasikan dalam Vue, lihat pembahasan berikutnya.
Kode pada directive ini akan dijalankan ketika button Informasi diklik.
Directive v-on:click pada elemen HTML dikasus ini setara dengan event onclick native HTML biasa
Contoh :
[html] <button onclick="window.alert(‘halo’)"> Informasi </button>[/html]
Directive v-on ini juga dapat kita manfaatkan untuk memanipulasi variabel data.
Contoh :
<div id=“app”>
<button v-on:click=“counter += 1”>
Counter
</button>
<p>Button di atas telah diklik sebanyak {{ counter }} kali.</p>
</div>
<script>
var example1 = new Vue({
el: ‘#app’,
data: {
counter: 0
}
})
</script>
Ketika button diklik maka akan terjadi increment (penambahan 1) pada nilai dari variabel counter.
Directive ini juga dapat digunakan untuk memanggil methods pada object Vue. Methods merupakan salah
satu properti dalam objek Vue sebagaimana data dan el yang dapat berisi kumpulan fungsi yang digunakan pada aplikasi.
Contoh :
[html] var vm = new Vue({
el: ‘#app’,
data: {
counter: 0
},
methods: {
info (text) {
alert(text)
}
}
}) [/html]
Untuk memanggil fungsi info, pada directive v-on, cukup dengan menuliskan nama fungsinya diikuti dengan parameter fungsinya. Berikut ini contoh impelementasinya pada button Informasi.
[html] <button v-on:click="info(‘selamat datang’)">Informasi</button>[/html]
Hasilnya, ketika button Informasi diklik maka Vue akan mengeksekusi fungsi info beserta parameter selamat datang dimana fungsi tersebut akan menampilkan alert yang berisi sesuai parameter yang dikirimkan.
Gambar
Directive v-on juga dapat menangkap event native HTML melalui variabel $event yang dilewatkan sebagai
parameter. Misalnya kita ingin mencegah event melakukan normal flow pada elemen anchor (link) HTML.
Contoh
[html] <a href="http://vuejs.org" v-on:click="link()">Vuejs.org</a>[/html]
Tambahkan fungsi link() pada methods.
Contoh
[html]
methods: {
info (text) {
alert(text)
},
link () {
alert(‘Go to link’)
}
}
[/html]
Hasilnya ketika link Vuejs.org diklik maka akan muncul alert.
Kita bisa mencegah redirect dengan menggunakan perintah event.preventDefault(), caranya,
tambahkan parameter $event pada pemanggilan fungsi link di template.
Contoh
[html] <a href="http://vuejs.org" v-on:click="link($event)">Vuejs.org</a>[/html]
Kemudian gunakan event native HTML pada fungsi link di methods
Contoh
[html] methods: {
info (text) {
alert(text)
},
link (event) {
alert(‘Go to link’)
event.preventDefault()
}
}[/html]
Silahkan dicoba dan lihat hasilnya bahwa setelah alert muncul maka halaman tidak diredirect ke website
Vuejs sesuai nilai yang tertera di atribut href.
Contoh
[html] alert(‘Go to link ‘+ event.target.value)
<a href="http://vuejs.org" v-on:click.prevent="info(‘Go to link’)">
Vuejs.org
</a>[/html]
Dengan menambahkan modifier .prevent setelah directive v-on:click maka setelah alert muncul,
halaman tidak akan di-redirect ke website Vue.
Disamping itu kita bisa juga membatasi agar misalnya suatu button atau link hanya boleh diklik sekali saja.
Hal ini bisa kita lakukan dengan menggunakan modifier once.
[html] <button v-on:click.once="info(‘selamat datang’)">Informasi</button>[/html]
Pada contoh di atas, button Informasi hanya akan bereaksi ketika pertama kali diklik, kemudian button akan
mengabaikan klik berikutnya.
Selain directive v-on:click ada beberapa directive lain yang bisa kita gunakan, diantaranya:
• v-on:mouseover ketika mouse berada di area elemen.
• v-on:mouseenter ketika mouse masuk ke area elemen.
• v-on:mouseout ketika mouse keluar dari area elemen.
• v-on:mousedown sama dengan v-on:click.
• v-on:keyup ketika keyboard up pada elemen (biasanya digunakan pada elemen input).
• v-on:keydown ketika keyboard down pada elemen (biasanya digunakan pada elemen input).
• v-on:submit ketika form di submit.
Contoh
[html] <!– mencegah reload halaman saat event submit –>
<form v-on:submit.prevent="onSubmit"></form>
<!– ketika ditekan enter maka akan menjalankan fungsi submit –>
<input v-on:keyup.enter="info(‘Terima kasih ‘ + $event.target.value)">
<!– Shift + Click –>
<button v-on:click.ctrl="info(‘hola’)">
SHIFT + CLICK
</button>[/html]
v-bind
Directive ini berfungsi untuk mem-binding atribut HTML atau komponen agar nilainya terupdate secara
reactive sesuai dengan datanya, kebalikan dari v-on.
Contoh
<div id="app"> <img v-bind:src="imageSrc"> </div> <script> var vm = new Vue({ el: '#app', data: { imageSrc: 'logo-vue.png', } }) setTimeout(()=>{ vm.imageSrc = 'flowers.jpg' },3000); </script>
Pada contoh di atas, attribut src mem-binding variabel imageSrc, sehingga nilai dari atribut src tersebut
mengikuti nilai dari variabel imageSrc. Demikian juga ketika nilai variabel imageSrc diganti secara runtime
maka image yang ditampilkanpun juga akan berubah karena variabel imageSrc diubah.
setelah tiga detik maka gambar akan berubah
Kita juga bisa mem-binding satu elemen dengan dua atau lebih variabel data sekaligus, yaitu dengan
menggunakan kurung siku []
[html] <div v-bind:class="[classA, classB]"></div>[/html]
Boolean expression juga dimungkinkan
[html] <div v-bind:class="{ red: isRed }"></div>
<div v-bind:style="{ fontSize: size + ‘px’ }"></div>[/html]
Sekian postingan dengan judul Apa Sih Directive Pada Vue JS Semoga bermanfaat
