Kita akan mempelajari tentang salah satu fasilitas menarik lainnya yang disediakan Vue Js, yaitu tentang Event Handler Directive v-on:click. 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 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:
|
1 |
v-on:click |
Atau bisa juga diringkas menjadi seperti dibawah ini:
|
1 |
@click |
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 tampilan pesan. Tentu saja kita akan Menggunakan Event Handler Directive v-on:click pada Vue Js, atau bisa juga ditulis dengan ringkas menjadi @click. Langsung saja berikut ini adalah scriptnya:
index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <button @click=' pesan="Penggunaan v-on:click"'>Klik Disini</button> <br> <p>{{ pesan }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { pesan: '' } }); </script> </body> </html> |
Untuk hasil Menggunakan Event Handler Vue Js pada klik Mouse dengan Directive v-on:click, kalian bisa save dan buka pada browser. Dan ketika kita klik tombol Klik disini maka akan muncul teks Penggunaan v-on:click. Semoga bermanfaat.