Vue direktivalari
Vue direktivalari HTML tegiga qo‘shimcha funksiyalar beradigan v- prefiksi bilan maxsus HTML atributlaridir.
Vue direktivalari dinamik va reaktiv foydalanuvchi interfeyslarini yaratish uchun Vue misoliga ulanadi.
Vue bilan javob beruvchi sahifalarni yaratish ancha oson va an’anaviy JavaScript metodlari bilan solishtirganda kamroq kod talab qiladi.
Turli xil Vue direktivalari
Ushbu qo‘llanmada biz foydalanadigan turli xil Vue direktivalari quyida keltirilgan.
| Direktiva | Tafsilotlar |
|---|---|
| v-bind | HTML tegidagi atributni Vue misolidagi ma’lumotlar o‘zgaruvchisiga ulaydi. |
| v-if | Shartga qarab HTML teglarini yaratadi. v-else-if va v-else direktivalari v-if direktivasi bilan birga ishlatiladi. |
| v-show | Shartga qarab HTML elementi ko‘rinadigan yoki bo‘lmasligi kerakligini belgilaydi. |
| v-for | For-loop yordamida Vue misolidagi massiv asosida teglar ro‘yxatini yaratadi. |
v-on |
HTML tegidagi hodisani JavaScript ifodasi yoki Vue misol usuliga ulaydi. Shuningdek, biz sahifamizning ma’lum bir hodisaga qanday munosabatda bo‘lishini aniqroq aniqlashimiz mumkin. |
v-model |
<form> , <input> va <button> kabi teglar bilan HTML shakllarida qo‘llaniladi. Kirish elementi va Vue misoli ma’lumotlar xususiyati o‘rtasida ikki tomonlama bog‘lanish hosil qiladi. |
Misol: v-bind direktivasi
Brauzer
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.pinkBG {
background-color: lightpink;
}
</style>
</head>
<body>
<div id="app">
<div v-bind:class="vueClass"></div>
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
const app = Vue.createApp({
data() {
return {
vueClass: "pinkBG"
}
}
})
app.mount('#app')
</script>
</body>
</html>
O‘zingiz sinab ko‘ring »
Eslatma: Yuqoridagi misol Vue kodisiz ancha sodda yozilishi mumkin, ammo sabrli bo‘ling. Vue-ning haqiqiy afzalliklarini biz sezgir sahifalar yaratganimizda keyingi misollarda ko‘rish mumkin.
W3Schools-da Vue-ni o‘rganish
W3Schools.com saytida Vue-ni o‘rganayotganda siz kod va natijani ko‘rsatadigan "O‘zingiz sinab ko‘ring" vositamizdan foydalanishingiz mumkin. Bu oldinga siljishimiz davomida har bir qismni tushunishingizni osonlashtiradi.
Qo‘llanmani davom ettirish uchun "Keyingi" tugmasini bosing.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!