Kita akan mempelajari tentang salah satu fasilitas menarik lainnya yang disediakan Vue Js, yaitu tentang Event Handler Directive v-on:click dengan Methods. Fasilitas Event Handler ini menangkap event yang dilakukan oleh user, kemudian menjalankan suatu kode Javascript tertentu yang telah dibuat. Event yang dimaksud disini ada bermacam-macam dan yang nantinya akan jelaskan satu per satu.

Untuk menggunakan fasilitas Event Handler klik mouse atau v-on:click dengan Methods ini, Vue Js menyediakan sebuah directive dengan jenis yang bermacam-macam yang dapat ditulis dengan dua cara, untuk cara pertama dengan menuliskan seperti dibawah ini:

 

Atau bisa juga diringkas menjadi seperti dibawah ini:

 

Kita akan langsung saja mencoba membuat sebuah program yang menangkap event berupa klik mouse, jadi pada saat mouse di klik di area tertentu yang sudah ditentukan, maka akan ada reaksi berupa alert atau popup bertulisan sebuah pesan. Tentu saja kita akan Menggunakan Event Handler Directive v-on:click dengan Methods pada Vue Js, atau bisa juga ditulis dengan ringkas menjadi @click. Langsung saja berikut ini adalah scriptnya:

index.html

 

Untuk hasil Menggunakan Event Handler Directive v-on:click dengan Methods pada Vue Js, kalian bisa save dan buka pada browser. Dan ketika kita klik tombol Klik disini maka akan muncul teks Penggunaan v-on:click dalam bentuk alert atau popup pesan. Semoga bermanfaat.