Vue hodisalari
Vue-da hodisalarni (events) boshqarish v-on direktivasi bilan amalga oshiriladi, shuning uchun biz masalan, tugma bosilganda nimadir sodir bo‘lishimiz mumkin.
Hodisalarni qayta ishlash - HTML elementlari ma’lum bir hodisa (event) sodir bo‘lganda ma’lum bir kodni ishga tushirish uchun o‘rnatiladi.
Vue-dagi voqealardan foydalanish oson va bizning sahifamizni chinakam sezgir qiladi.
Vue metodlari - bu voqea sodir bo‘lganda ishga tushirish uchun sozlanishi mumkin bo‘lgan kod.
v-on modifikatorlari yordamida siz voqeaga qanday munosabatda bo‘lishni batafsilroq tasvirlab berishingiz mumkin.
Voqealar bilan boshlang
Keling, o‘rmondagi g‘unajinlarni hisoblash uchun tugmani qanday bosishimiz mumkinligini ko‘rsatish uchun misol bilan boshlaylik.
Bizga kerak:
- Bir tugma
- "Click" hodisasini tinglash uchun
- Mos sonini ko‘paytirish uchun kod
- Moose sonini ushlab turish uchun Vue misolidagi xususiyat (o‘zgaruvchi).
- Qo‘sh jingalak qavslar {{}} sonining ko‘payishini ko‘rsatish uchun
Misol
O‘rmonda yana bitta muskulni sanash uchun tugmani bosing. Tugma har bosilganda count xususiyati ortadi.
<div id="app">
<img src="img_moose.jpg">
<p>{{ "Moose count: " + count }}</p>
<button v-on:click="count++">Count moose</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
count: 0
}
}
})
app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »
Eslatma: Vue bilan birga keladigan afzallik shundaki,
yorlig‘idagi muskullar soni avtomatik ravishda yangilanadi. Oddiy JavaScript bilan biz foydalanuvchi ko‘rgan raqamni qo‘shimcha kod qatori bilan yangilashimiz kerak.
Voqealar
Kodni ishga tushirish uchun trigger sifatida foydalanishimiz mumkin bo‘lgan ko‘plab hodisalar (events) mavjud, ulardan eng keng tarqalganlari: "klik", "sichqonchani bosish", "sichqonchani chiqarish", "tugmachani pastga tushirish" va "kirish".
Foydalanish uchun tadbirlarning to‘liq ro‘yxatini HTML DOM Voqealari sahifamizga tashrif buyurishingiz mumkin.
"v-on"
v-on direktivasi bizga foydalanuvchi nima qilayotganiga javob beradigan sahifalarni yaratishga imkon beradi.
Vue v-on brauzerga qaysi voqeani tinglash kerakligini va bu voqea sodir bo‘lganda nima qilish kerakligini aytib ishlaydi.
Metodlar
Agar voqea sodir bo‘lganda murakkabroq kodni ishga tushirishni istasak, kodni Vue usuliga qo‘yishimiz va HTML atributidan ushbu usulga murojaat qilishimiz mumkin, masalan:
<p v-on:click="changeColor">Click me</p>
Voqeani o‘zgartiruvchilar
V-on va Vue usullariga qo‘shimcha ravishda biz voqeani, masalan, sahifa yuklangandan keyin bir marta sodir bo‘ladigan tarzda o‘zgartirish uchun hodisa (event) modifikatorlari deb ataladigan narsadan foydalanishimiz mumkin yoki ariza yuborilishining oldini olish uchun "yuborish" kabi hodisani o‘zgartirishimiz mumkin.
Batafsil ma’lumot
Ko‘rib turganimizdek, Vue-da voqealardan foydalanishni o‘rganishimiz kerak bo‘lgan uchta texnika mavjud:
- Vue v-on direktivasi
- Vue metodlari
- Vue v-on modifikatorlari
Ushbu o‘quv qo‘llanmasini davom ettirish va hodisalarni (events) boshqarish bo‘yicha ushbu usullar haqida ko‘proq ma’lumot olish uchun “Keyingi” tugmasini bosing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!