Home-theater-designers
Mendengar acara pengguna ialah bahagian penting mana-mana apl web responsif, dan apl Vue tidak terkecuali. Vue dibina dengan cara yang mudah dan cekap untuk mengendalikan acara dengan arahan v-onnya.
Apakah Pengikatan Peristiwa dalam Vue?
Pengikatan acara ialah ciri Vue.js yang membolehkan anda melampirkan pendengar acara pada a Model Objek Dokumen (DOM) unsur. Apabila peristiwa berlaku, pendengar acara mencetuskan tindakan atau respons dalam apl Vue anda.
MAKEUSEOF VIDEO OF THE DAY SCROLL UNTUK MENERUSKAN KANDUNGAN
Anda boleh mencapai pengikatan acara dalam Vue dengan v-on arahan. Arahan ini membolehkan apl anda mendengar acara pengguna seperti klik, masukkan atau acara kekunci.
Untuk melampirkan pendengar acara pada elemen menggunakan v-on , tambahkan nama acara sebagai parameter pada arahan:
<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 kod di atas menunjukkan contoh apl Vue yang mendengar a klik peristiwa. Blok kod menggunakan a butang untuk menambah kaunter nilai dalam sifat data bagi contoh Vue dengan satu.
Blok kod di atas mengikat ungkapan JavaScript kaunter++ kepada butang klik acara dengan v-on arahan. Vue menggunakan @ watak sebagai singkatan menggantikan v-on arahan kerana v-on penggunaan yang kerap:
<button @click="counter++">Click me</button>
Pengikatan acara dalam Vue tidak terhad kepada acara klik. Vue mengendalikan acara lain, seperti acara akhbar utama, acara alih tetikus dan banyak lagi.
Untuk mengikat mana-mana peristiwa ini kepada v-on arahan, gantikan klik acara dengan nama acara yang dikehendaki:
<button @keydown.enter="counter++">Click me</button>
Kod di atas menyediakan pendengar acara pada butang yang mendengar untuk keydown peristiwa. Apabila sebarang kekunci ditekan semasa butang mempunyai fokus, Vue menilai kaunter++ ungkapan.
Memautkan Acara Dengan Kaedah dalam Vue
Dalam kebanyakan apl Vue, anda boleh mengendalikan logik yang lebih kompleks berdasarkan peristiwa tertentu yang berlaku. Acara dan kaedah berfungsi seiring untuk melaksanakan tindakan apl berdasarkan acara.
Harta kaedah dalam Objek Pilihan Vue memegang fungsi penting yang diperlukan apl Vue anda untuk kereaktifan yang dipertingkatkan. Dengan sifat kaedah dalam Vue, anda boleh mengendalikan logik kompleks berdasarkan peristiwa.
Berikut ialah contoh apl Vue yang menunjukkan acara yang dikendalikan oleh sifat kaedah:
<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>
Apl Vue di atas menggambarkan cara memautkan acara dengan kaedah. Apl ini mempunyai dua butang yang pengguna boleh klik untuk menambah atau mengurangkan nilai pembilang dalam sifat data.
Aplikasi ini mencapai ini dengan @klik arahan. The @klik arahan menunjuk kepada fungsi dalam sifat kaedah untuk memanipulasi nilai pembilang.
Apabila memautkan hujah ke acara klik, anda boleh menyesuaikan kenaikan dan mengurangkan kaedah untuk menambah atau mengurangkan nilai pembilang berdasarkan hujah yang anda berikan kepada kaedah tersebut.
merakam video dari laman web
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 kod ini dilanjutkan pada apl Vue sebelumnya untuk membenarkan penghantaran hujah kepada kaedah yang dipautkan kepada pendengar acara klik pada butang.
Kaedah menambah dan mengurangkan dalam contoh Vue mengambil nombor hujah untuk menambah atau mengurangkan sifat balas.
Contoh ini menunjukkan cara anda boleh menggunakan hujah apabila memautkan kaedah dengan peristiwa dalam Vue. Kaedah memautkan dengan acara boleh membantu dalam menjadikan apl Vue lebih interaktif.
Meneroka Pengubahsuai Cegah dan Hentikan dalam Vue
Pengubah suai acara dalam Vue membolehkan anda mencipta pendengar acara yang lebih baik yang memenuhi keperluan khusus aplikasi anda. Untuk menggunakan pengubah suai acara ini, anda rantaikan pengubah kepada acara dalam Vue.
Sebagai contoh:
<form @submit.prevent="handleSubmit">
<input type="text" v-model="text">
<button type="submit">Submit</button>
</form>
Blok kod di atas merantai mencegah pengubah suai kepada acara penyerahan. The mencegah pengubah suai biasanya digunakan apabila bekerja dengan borang dalam Vue.
The mencegah tujuan pengubah suai adalah untuk menghalang tingkah laku lalai penyerahan borang, iaitu memuat semula halaman. menggunakan mencegah , Vue boleh meneruskan prosesnya sementara mengendalikanSerah kaedah menjaga penghantaran borang.
Satu lagi contoh pengubah suai yang sangat berguna ialah berhenti pengubahsuai acara. The berhenti pengubah suai acara menghentikan acara daripada menyebar lebih jauh ke atas pokok DOM.
Biasanya, acara elemen anak HTML muncul melalui pepohon DOM, mengaktifkan mana-mana pendengar acara yang dilampirkan pada elemen induk. Anda boleh mencegah perkara ini penyebaran acara dengan berhenti pengubah suai dan menghalang acara daripada mencetuskan pendengar acara selanjutnya.
Untuk memahami bagaimana berhenti pengubah suai menghentikan penyebaran peristiwa lebih jauh ke atas pokok DOM, pertimbangkan blok kod di bawah:
<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 kod di atas mempunyai tiga pendengar acara yang dilampirkan pada tiga elemen berbeza. The butang elemen berada di dalam div dengan dalaman kelas, manakala div dengan dalaman kelas berada di dalam div dengan luar kelas.
Setiap daripada tiga elemen mendengar a klik acara dan log ke konsol, nama elemen HTML diklik. Di bawah ialah penggayaan CSS kelas tambahan untuk menjadikan blok kod di atas lebih mudah difahami:
<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>
Semasa menjalankan program, apl Vue yang dibuat akan kelihatan seperti ini:
Ambil perhatian bahawa apabila anda mengklik butang, program memanggil butangKlik kaedah dan log mesej ke konsol. Program ini juga memanggil innerClick kaedah.
Walau bagaimanapun, program ini tidak memanggil outerClick kaedah kerana blok kod menambah a berhenti pengubah suai kepada innerClick pendengar acara. Ini menghentikan acara daripada menyebarkan lebih jauh ke atas pokok DOM.
Tanpa berhenti pengubah suai, program akan memanggil butangKlik kaedah apabila anda mengklik butang, dan acara akan terus merambat ke atas pokok, mencapai innerClick kaedah dan kemudiannya outerClick kaedah.
Mengendalikan Acara dalam Apl Web
Anda telah mempelajari cara menggunakan pengikatan peristiwa dalam Vue untuk melampirkan pendengar acara pada elemen dan cara memanggil kaedah apabila peristiwa berlaku. Anda juga telah memahami cara menggunakan pengubah suai acara untuk menyesuaikan gelagat acara.
Apl web bergantung pada beberapa bentuk acara pengguna untuk menjalankan fungsi. JavaScript datang terbina dengan banyak kaedah untuk menangkap dan mengendalikan pelbagai acara ini. Acara ini membantu dalam membina apl interaktif.