VueJS

Belajar Vue JS Bagian 5 : Menggunakan v-once dan v-on

Hallo coder, pada tutorial sebelumnya kita telah membahas Menggunakan if dan else di vue js pada pembahasan kali ini kita akan membahas v-once dan v-on pada Vue js. v-once dan v-on merupakan directive.

Directive merupakan atribut khusus yang disematkan pada elemen atau markup HTML sebagai penanda bahwa elemen DOM tersebut akan dikenai perlakuan tertentu oleh Vue js.

Menggunakan v-once dan v-on

V-once digunakan agar nilai variabel pada template tidak bisa diubah-ubah lagi, kita lihat contohnya di bawah ini.

di contoh di atas kita punya dua data yaitu message dan message2, di message2 kita akan kasih directive v-once, setalah copy code di atas coba run. setelah itu coba buka console ganti data message dan message2 dengan mengketikan seperti berikut

dan ini lah hasil yang akan terjadi

bisa terlihat bahwa data message2 tidak berubah tetap sama, berarti directive v-once berjalan.

v-on

Merupakan directive yang berperan sebagai sebuah event listener pada elemen HTML/komponen Vue Js.
Directive ini bertugas memantau aktifitas (aksi) yang dilakukan terhadap suatu elemen HTML/komponen Vue Js.

Contoh penggunaannya

maka hasilnya akan seperti ini

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.