Salah satu aspek esensial dari framework Vue.js adalah directive. Directive memiliki ciri khusus yang mudah dikenali, yaitu awalan v-. Kegunaannya antara lain untuk : listening DOM (Document Object Model) events, binding property (key:value pair) dari object Javascript ke expression, binding atribut tag HTML ke expression, manipulasi DOM dan lain-lain. Jika disederhanakan, tugas directive adalah memberitahu DOM untuk melakukan sesuatu ketika didapati value / nilai expression berubah.

Beberapa directive yang dimiliki oleh Vue, antara lain :

  • v-model : data binding dua arah, meneruskan data (property yang ada di objek Javascript) ke expression dan sebaliknya.
  • v-for : me-render satu per satu elemen HTML melalui looping / perulangan.
  • v-if : me-render elemen HTML ketika kondisi true terpenuhi.
  • v-else : kebalikan dari v-if, render elemen HTML justru dilakukan saat kondisi false.
  • v-show : serupa dengan v-if, namun elemen akan tetap di-render baik dalam kondisi true maupun false. Pada elemen yang kondisi-nya false, v-show akan menggunakan CSS style="display:none;" untuk menyembunyikan elemen tersebut.
  • v-bind : binding atribut tag HTML dengan expression, sekaligus mengirim data (property yang ada di objek Javascript) ke expression yang memiliki nama sama.
  • v-on : menyisipkan event listener ke elemen HTML.

Untuk penjelasan setiap jenis Vue Directive di atas beserta contohnya, dapat dibaca melalui tautan di bawah :

Oya, selain membuka tautan di atas, tidak ada salahnya Anda juga memahami beberapa istilah HTML berikut karena akan sering dijumpai pada materi-materi saya selanjutnya :

DOM (Document Object Model)

DOM mendefinisikan HTML sebagai objek, properties sebagai elemen HTML, methods sebagai elemen HTML dan events sebagai elemen HTML. Mudahnya, DOM adalah semua yang ada di halaman HTML.

Tag HTML

Misal tag <p> untuk menampilkan paragraf, tag <img> untuk menampilkan gambar, tag <input> untuk menampilkan input, tag <button> untuk menampilkan tombol dan lain-lain.

Elemen HTML

<tag> ... </tag> semua konten yang diapit oleh tag HTML, dari awal tag sampai akhir tag.

Event Listening

Cara HTML merespon event / aktivitas yang terjadi, misal tag <input> membaca setiap karakter yang diketik, tag <button> mengenali klik dari mouse, tag <img> merubah gambar gelap menjadi terang ketika mouse diarahkan di atasnya dan lain-lain.

Javascript Object

  • { jogja:'Gudeg', makassar:'Coto' }
  • { nama:'Rian', koleksiMobil: { mobil1:'Bugatti', mobil2:'Mercedez', mobil3:'Subaru' } }

Properties

Pada contoh objek di atas : (jogja:'Gudeg'), (makassar:'Coto'), (nama:'Rian') masing-masing terhitung satu property dan setiap property terdiri dari pasangan key:value.

Key:Value pair

jogja, makassar, nama masing-masing adalah Key, sedangkan 'Gudeg', 'Coto', 'Rian' adalah Value dari setiap Key.

Attribute / Atribut dan Expression

<img src="senyum.gif" alt="icon senyum" height="48" width="64"> pada tag HTML ini : src, alt, height, width adalah attribute / atribut milik tag <img>, sedangkan "senyum.gif", "icon senyum", "48" dan "64" adalah expression-nya.