Vue.js adalah library yang sangat kuat, mudah dipelajari, dan mudah didekati yang dengan pengetahuan tentang HTML, CSS, dan Javascript, kita dapat mulai membangun aplikasi web di dalamnya. Vue.js dibangun dengan menggabungkan fitur-fitur terbaik dari Angular dan React Frameworks yang sudah ada. Ini adalah kerangka kerja Javascript progresif dan reaktif yang digunakan untuk membangun UI (Antarmuka Pengguna) dan SPA (Aplikasi Satu Halaman), itulah sebabnya para pengembang suka membuat kode dan merasakan kebebasan dan kenyamanan saat mengembangkan aplikasi di Vue.js.Jika kita lihatlah Event Listening and Handling di Vue.js., kita akan tahu bahwa Vue.js menyediakan directive v-on untuk mendengarkan dan menangani event. Kita dapat menggunakan direktif v-on untuk mendengarkan DOM dan melakukan tugas yang diperlukan. Ini juga menyediakan banyak event handler. Namun, dalam artikel ini, kita hanya akan mempelajari dan tetap fokus pada peristiwa klik. Jadi, mari kita mulai!
Sama seperti event onClick Javascript, Vue.js menyediakan v-on:click untuk mendengarkan event.
Sintaks untuk v-on:click event akan seperti ini:
< tombol v-on: klik='namafungsi'>Klik</ tombol >
Vue.js menyediakan singkatan @ daripada menggunakan v-on juga.
< tombol @klik='namafungsi'>Klik</ tombol >
Vue.js tidak berhenti hanya dengan mendengarkan event klik dan memanggil fungsi tersebut. Ini juga akan memungkinkan kita untuk langsung menulis operasi aritmatika atau apapun yang berhubungan dengan Javascript di dalam tanda kutip. Seperti ini:
< tombol @klik='angka += 1'>Tambahkan</ tombol >
Vue.js menyediakan kita untuk memanggil metode atau fungsi dalam pernyataan Javascript inline, seperti yang ditunjukkan di bawah ini:
< tombol @klik='pesan('Hai')'>Tampilkan</ tombol >Dengan menggunakan event handler Vue.js, kita juga dapat mengakses event DOM, menggunakan pernyataan sebaris, dengan meneruskan variabel $event yang disediakan khusus oleh Vue.js ke dalam argumen metode, seperti contoh di bawah ini:
< tombol @klik='message('Hai', $event)'>Kirim</ tombol >
Vue.js juga menyediakan kita untuk memanggil beberapa fungsi atau metode. Kita dapat memanggil lebih dari satu fungsi dan memisahkannya dengan koma, seperti contoh berikut:
< tombol @klik='pertama('Halo'), kedua('Hai', $acara) '>Kirim</ tombol >Vue.js juga menyediakan pengubah acara.
Pengubah Acara
Kita sering perlu memanggil pengubah bersama dengan acara. Jadi, Vue.js menyediakan beberapa modifier berikut:
.berhenti
Ini akan menghentikan transmisi acara klik.
< ke @click.stop='melakukan hal ini'></ ke >.mencegah
Ini akan mencegah halaman untuk memuat ulang atau mengarahkan ulang.
< membentuk @submit.prevent='dikirim'></ membentuk >.satu kali
Ini akan memicu acara klik hanya sekali.
< ke @klik.sekali='melakukan hal ini'></ ke >.menangkap
Ini sebagian besar digunakan untuk menambahkan pendengar acara.
< div @klik.capture='melakukan hal ini'> ...</ div >Kami juga dapat merantai pengubah. Namun, perlu diingat bahwa urutan pengubah memang penting, dan itu akan mempengaruhi hasil.
< ke @click.stop.prevent='lakukan itu'></ ke >Kesimpulan
Pada artikel ini, kami telah membahas seluruh konsep penanganan event Click dari level noob hingga ninja. Kami telah mempelajari tentang sintaks yang berbeda dari penulisan peristiwa klik dan berbagai cara untuk menggunakan |_+_| arahan yang disediakan oleh Vue.js untuk kemudahan pengembang dan pengubah acara yang berbeda. Untuk konten yang lebih bermanfaat seperti ini, terkait dengan Vue.js, kunjungi terus linuxhint.com.