Cara Menangani Acara di Vue
Table of content:
Mendengarkan peristiwa pengguna adalah bagian integral dari setiap aplikasi web responsif, dan tidak terkecuali aplikasi Vue. Vue dibuat dengan cara yang sederhana dan efisien untuk menangani event dengan direktif v-on.
Apa itu Pengikatan Acara di Vue?
Pengikatan acara adalah fitur Vue.js yang memungkinkan Anda melampirkan pendengar acara ke elemen Model Objek Dokumen (DOM). Saat suatu peristiwa terjadi, pendengar peristiwa memicu tindakan atau respons di aplikasi Vue Anda.
Anda dapat mencapai event-binding di Vue dengan v-on pengarahan. Direktif ini memungkinkan aplikasi Anda memproses peristiwa pengguna seperti klik, masuk, atau peristiwa key-up.
Baca Juga:
Untuk melampirkan pendengar acara ke elemen menggunakan v-ontambahkan nama peristiwa sebagai parameter ke direktif:
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="counter++">Click me</button>
<p>{{ counter}}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
}
}) app.mount('#app')
</script>
</body>
</html>
Blok kode di atas menunjukkan contoh aplikasi Vue yang mendengarkan a klik peristiwa. Blok kode menggunakan a tombol untuk meningkatkan menangkal nilai dalam properti data instance Vue per satu.
Blok kode di atas mengikat ekspresi JavaScript penghitung++ ke tombol klik acara dengan v-on pengarahan. Vue menggunakan @ karakter sebagai singkatan di tempat v-on direktif karena v-onpenggunaan yang sering:
<button @click="counter++">Click me</button>
Pengikatan acara di Vue tidak terbatas pada acara klik. Vue menangani event lain, seperti event penekanan tombol, event mouseover, dan lainnya.
Untuk mengikat salah satu peristiwa ini ke v-on direktif, ganti klik acara dengan nama acara yang diinginkan:
<button @keydown.enter="counter++">Click me</button>
Kode di atas menyiapkan pendengar acara di tombol yang mendengarkan untuk keydown peristiwa. Saat tombol apa saja ditekan saat tombol memiliki fokus, Vue akan mengevaluasi penghitung++ ekspresi.
Menghubungkan Acara Dengan Metode di Vue
Di sebagian besar aplikasi Vue, Anda dapat menangani logika yang lebih kompleks berdasarkan peristiwa tertentu yang terjadi. Acara dan metode bekerja bahu-membahu untuk melakukan tindakan aplikasi berdasarkan suatu acara.
Properti metode di Objek Opsi Vue memiliki fungsi penting yang dibutuhkan aplikasi Vue Anda untuk meningkatkan reaktivitas. Dengan properti metode di Vue, Anda dapat menangani logika kompleks berdasarkan peristiwa.
Berikut adalah contoh aplikasi Vue yang menunjukkan peristiwa yang ditangani oleh properti metode:
<html>
<head>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="app">
<button @click="increment">Add 1</button>
<button @click="reduce">reduce 1</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(){
this.counter = this.counter + 1
},
reduce() {
this.counter = this.counter - 1
}
}
})
app.mount('#app')
</script>
</body>
</html>
Aplikasi Vue di atas menggambarkan cara menautkan acara dengan metode. Aplikasi ini memiliki dua tombol yang dapat diklik pengguna untuk menambah atau mengurangi nilai penghitung di properti data.
Aplikasi mencapai ini dengan @klik pengarahan. Itu @klik direktif menunjuk ke fungsi dalam properti metode untuk memanipulasi nilai penghitung.
Saat menautkan argumen ke event klik, Anda bisa menyesuaikan metode kenaikan dan pengurangan untuk menambah atau mengurangi nilai penghitung berdasarkan argumen yang Anda teruskan ke metode.
Seperti itu:
<body>
<div id="app">
<button @click="increment(5)">Add 5</button>
<button @click="reduce(3)">reduce 3</button>
<p>{{ counter }}</p>
</div>
<script>
const app = Vue.createApp({
data() {
return {
text: 'Vue is awesome!',
counter: 0
}
},
methods: {
increment(num){
this.counter = this.counter + num
},
reduce(num) {
this.counter = this.counter - num
}
}
})
app.mount('#app')
</script>
</body>
Blok kode ini diperluas pada aplikasi Vue sebelumnya untuk memungkinkan penerusan argumen ke metode yang ditautkan ke click event listener pada tombol.
Metode penambahan dan pengurangan dalam instance Vue menggunakan argumen num untuk menambah atau mengurangi properti penghitung.
Contoh ini menunjukkan bagaimana Anda bisa bekerja dengan argumen saat menautkan metode dengan event di Vue. Menautkan metode dengan acara dapat membantu membuat aplikasi Vue lebih interaktif.
Menjelajahi Pengubah Cegah dan Hentikan di Vue
Pengubah acara di Vue memungkinkan Anda membuat pendengar acara yang lebih baik yang memenuhi kebutuhan spesifik aplikasi Anda. Untuk memanfaatkan pengubah acara ini, Anda menghubungkan pengubah ke acara di Vue.
Misalnya:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
Blok kode di atas rantai mencegah pengubah ke acara kirim. Itu mencegah pengubah umumnya digunakan saat bekerja dengan formulir di Vue.
Itu mencegah tujuan pengubah adalah untuk mencegah perilaku default pengiriman formulir, yaitu memuat ulang halaman. Menggunakan mencegahVue dapat melanjutkan prosesnya sementara handleSubmit metode menangani pengiriman formulir.
Contoh lain dari pengubah yang sangat berguna adalah berhenti pengubah acara. Itu berhenti pengubah acara menghentikan penyebaran acara lebih jauh ke atas pohon DOM.
Biasanya, event elemen turunan HTML muncul melalui pohon DOM, mengaktifkan setiap event listener yang dilampirkan ke elemen induk. Anda dapat mencegah penyebaran acara ini dengan berhenti pengubah dan mencegah acara memicu pendengar acara lebih lanjut.
Untuk memahami bagaimana berhenti pengubah menghentikan propagasi peristiwa lebih jauh di pohon DOM, pertimbangkan blok kode di bawah ini:
<body>
<div id="app">
<div @click="outerClick" class="outer">
<div @click.stop="innerClick" class="inner">
<button @click="buttonClick" class="button">Click me</button>
</div>
</div>
</div>
<script>
const app = Vue.createApp({
methods: {
outerClick() {
console.log('Outer click')
},
innerClick() {
console.log('Inner click')
},
buttonClick() {
console.log('Button click')
}
}
}); app.mount("#app");
</script>
</body>
Blok kode di atas memiliki tiga event listener yang dilampirkan ke tiga elemen berbeda. Itu tombol elemen ada di dalam div dengan batin kelas, sedangkan div dengan batin kelas ada di dalam div dengan luar kelas.
Masing-masing dari tiga elemen mendengarkan a klik acara dan log ke konsol, nama elemen HTML diklik. Di bawah ini adalah gaya CSS tambahan untuk membuat blok kode di atas lebih mudah dipahami:
<head>
<style>
.outer {
padding: 20px;
background-color: black;
}
.inner {
padding: 20px;
background-color: gray;
}
button {
padding: 10px;
background-color: white;
border: 2px solid black;
font-size: 16px;
font-weight: bold;
cursor: pointer;
}
</style>
</head> Saat menjalankan program, aplikasi Vue yang dibuat akan terlihat seperti ini:
Perhatikan bahwa ketika Anda mengklik tombol, program memanggil tombolKlik metode dan mencatat pesan ke konsol. Program ini juga memanggil innerClick metode.
Namun, program tidak memanggil klik luar metode karena blok kode menambahkan a berhenti pengubah ke innerClick pendengar acara. Ini menghentikan penyebaran acara lebih jauh ke atas pohon DOM.
Tanpa berhenti pengubah, program akan memanggil tombolKlik metode ketika Anda mengklik tombol, dan acara akan terus menyebar ke atas pohon, mencapai innerClick metode dan kemudian klik luar metode.
Menangani Acara di Aplikasi Web
Anda telah mempelajari cara menggunakan event binding di Vue untuk melampirkan event listener ke elemen dan cara memanggil metode saat event terjadi. Anda juga telah memahami cara menggunakan pengubah acara untuk menyesuaikan perilaku acara.
Aplikasi web mengandalkan beberapa bentuk peristiwa pengguna untuk menjalankan fungsi. JavaScript hadir dengan banyak metode untuk menangkap dan menangani berbagai peristiwa ini. Acara ini membantu dalam membangun aplikasi interaktif.
Artikel Terkait
