Directives di Vue.js memungkinkan Anda menerapkan perilaku khusus ke elemen di DOM. Mereka diawali dengan v- sintaks dan digunakan untuk memanipulasi DOM, menangani peristiwa, merender elemen secara kondisional, dan banyak lagi. Vue.js menyediakan beberapa built-in directives seperti, dan, yang mencakup banyak kasus penggunaan umum. v-if v-for v-bind v-on
Berikut beberapa hal umum directives di Vue.js:
1. Direktif: Direktif ini digunakan untuk membuat elemen secara kondisional berdasarkan suatu kondisi. v-if
Contoh:
<div v-if="isShow">This element is only displayed if isShow is true.</div>
2. Direktif: Direktif ini digunakan untuk mengulang array atau objek dan membuat elemen yang sesuai. v-for
Contoh:
<ul>
<li v-for="item in items">{{ item }}</li>
</ul>
3. Direktif: Direktif ini digunakan untuk mengikat nilai ekspresi ke atribut atau properti elemen. v-bind
Contoh:
<img v-bind:src="imageUrl">
4. Directive: Directive ini digunakan untuk mendengarkan dan menangani event pada sebuah elemen. v-on
Contoh:
<button v-on:click="handleClick">Click me!</button>
5. Direktif: Direktif ini membuat pengikatan dua arah antara elemen input dan properti data. v-model
Contoh:
<input v-model="message">
Ini hanya beberapa dasar directives di Vue.js. Anda juga dapat membuat kebiasaan Anda sendiri directives untuk melakukan perilaku tertentu di aplikasi Vue.js Anda.