Vue v-on
Oddiy JavaScript-da hodisalarni (events) boshqarish kabi, Vue-dagi v-on direktivasi brauzerga quyidagilarni aytadi:
- qaysi hodisani tinglash kerak ("klik", "tugmachani pastga tushirish", "sichqonchani bosish" va boshqalar)
- bu voqea sodir bo‘lganda nima qilish kerak
v-on-dan foydalanishga misollar
Keling, ba’zi misollarni ko‘rib chiqaylik v-on turli hodisalar (events) va bu hodisalar (events) sodir bo‘lganda ishga tushirish uchun turli kodlar bilan qanday foydalanish mumkinligini ko‘rib chiqaylik.
Eslatma: Voqea sodir bo‘lganda yanada rivojlangan kodni ishga tushirish uchun Vue usullarini joriy qilishimiz kerak. Ushbu qo‘llanmaning keyingi sahifasida Vue metodlari haqida bilib oling.
voqeani bosing
v-on direktivasi bizga ko‘rsatilgan hodisalarga asoslangan harakatlarni bajarishga imkon beradi.
Element bosilganda amalni bajarish uchun v-on:click dan foydalaning.
Misol
v-on direktivasi
<div id="app">
<div id="lightDiv">
<div v-show="lightOn"></div>
<img src="img_lightBulb.svg">
</div>
<button v-on:click="lightOn = !lightOn">Switch light</button>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
lightOn: false
}
}
})
app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »
oninput hodisasi
V-on:input dan foydalaning, masalan, matn maydoni ichidagi tugmachani bosish kabi element kirishda amalni bajarish.
Misol
Matn kiritish maydoni uchun tugmalar sonini hisoblang:
<div id="app">
<input v-on:input="inpCount++">
<p>{{ 'Input events occured: ' + inpCount }}</p>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
inpCount: 0
}
}
})
app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »
mousemove hodisasi
Sichqoncha ko‘rsatkichi element ustida harakat qilganda amalni bajarish uchun v-on:mousemove funksiyasidan foydalaning.
Misol
Sichqoncha ko‘rsatkichi har safar harakatlansa,
<div id="app">
<p>Move the mouse pointer over the box below</p>
<div v-on:mousemove="colorVal=Math.floor(Math.random()*360)"
v-bind:style="{backgroundColor:'hsl('+colorVal+',80%,80%)'}">
</div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
colorVal: 50
}
}
})
app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »
v-for siklida v-on-dan foydalaning
Siz v-for sikli ichida v-on direktivasidan ham foydalanishingiz mumkin.
Massivning elementlari v-on qiymatidagi har bir iteratsiya uchun mavjud.
Misol
Oziq-ovqat massiviga asoslangan massivni ko‘rsating va tasvir manbasini o‘zgartirish uchun massiv elementidagi qiymatdan foydalanadigan har bir element uchun bosish hodisasini qo‘shing.
<div id="app">
<img v-bind:src="imgUrl">
<ol>
<li v-for="food in manyFoods" v-on:click="imgUrl=food.url">
{{ food.name }}
</li>
</ol>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
imgUrl: 'img_salad.svg',
manyFoods: [
{name: 'Burrito', url: 'img_burrito.svg'},
{name: 'Salad', url: 'img_salad.svg'},
{name: 'Cake', url: 'img_cake.svg'},
{name: 'Soup', url: 'img_soup.svg'}
]
}
}
})
app.mount('#app')
</script>
O‘zingiz sinab ko‘ring »
v-on uchun stenografiya
"V-on" ning qisqartmasi oddiygina "@" dir.
Misol
Bu yerda biz "v-on" o‘rniga "@" yozamiz:
<button @:click="lightOn = !lightOn">Switch light</button>
O‘zingiz sinab ko‘ring »
Biz ushbu qo‘llanmada @ sintaksisidan biroz keyinroq foydalanishni boshlaymiz.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!