Template syntax va direktivalar haqida.

Assalamu alaykum! Ushbu postda Vue.js loyihamizning umummiy tuzulmasi (strukturasi, fayllari) bilan tanishib chiqidik.

Endi navbat Vue.js loyihamizning asosiy sintaksis haqida gaplashamiz.

Vue.js template sintaksisi HTML ga o'xshaydi va Vue komponentlari ichida reaktiv ma'lumotlarni ko'rsatish va boshqarish uchun ishlatiladi. Yuqoridagi rasmda asosiy ketmaketlik qizil chiziq bilan belgilab sanab o'tilgan , ko'rib turganingizdek juda ham sodda va quyida Vue.js template sintaksisining asosiy jihatlarini batafsil ko'rishimzi mumkin:

Interpolatsiya

Matn Interpolatsiyasi

Matn interpolatsiyasi orqali komponent ma'lumotlarini HTML ichida ko'rsatish mumkin:

<script setup>
const message="Assalamu alaykum";
</script>

<template>
  <h1 class="title">{{ message }}</h1>
</template>

<style scoped>
  .title{
    color:#32cd32;
    text-align: center;
  }
</style>

Bu yerda {{ message }} orqali message o'zgaruvchisining qiymati HTMLda ko'rsatiladi.

HTML Interpolatsiyasi

Agar siz o'zgaruvchi qiymatini HTML sifatida kiritish kerak bo'lsa, v-html direktivasidan foydalaniladi:

<div v-html="rawHtml"></div>

va ushbu divni parent sifatida qabul qilib ichiga HTML elementlarimizni render qiladi.

Direktivalar

v-bind

Atributlarni dinamik ravishda bog'lash uchun ishlatiladi:

<img v-bind:src="imageSrc">
<!-- qisqacha sintaksis -->
<img :src="imageSrc">

v-if

Elementni shartli ravishda ko'rsatish uchun ishlatiladi:

<p v-if="seen"> Ushbu xabar ko'rinvottimi bro 😎 </p>

v-else va v-else-if

v-if bilan birga qo'llaniladi va shartlarga qarab elementni ko'rsatadi:

<p v-if="type === 'A'">A javob</p>
<p v-else-if="type === 'B'">B javob</p>
<p v-else>C javob</p>

v-for

Ro'yxatlarni iteratsiya (loop) qilish uchun ishlatiladi:

<ul>
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

itmes bu yerda array [] , item esa array elementi hisoblanadi , :key esa iteratsiya qilinayotgan elementni 'unique' qilish uchun ishlatiladi.

v-on

Hodisalarga qo'llaniladi, masalan, tugmalarni bosish:

<button v-on:click="doSomething">Bos</button>
<!-- qisqacha sintaksis 😎 -->
<button @click="doSomething">Bos</button>

Class va Style

v-bind:class

Dinamik ravishda classlarni qo'shish mumkin:

<div :class="{ active: isActive }"></div>
<div :class="[classA, classB]"></div>

v-bind:style

Dinamik stillarni qo'llash mumkin:

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

Ikki tomonlama bog'lanish

v-model

Form elementlari bilan ikki tomonlama bog'lanishni ta'minlaydi:

<input v-model="message" placeholder="Xabar kiriting">

Qo'shimcha Direktivalar

v-show

Elementni ko'rinishini boshqaradi, ammo DOMdan olib tashlamaydi:
ya'ni display:none; saqlaydi holos.

<p v-show="isShown">Ko'rinadigan xabar</p>

v-pre

Element va uning farzandlari (childlari) uchun remderlanishini to'xtatadi:

<span v-pre>{{ bu mustahkamlanmaydi }}</span>

v-cloak

Elementga Vue.js ilovasi to'liq yuklanmaguncha ko'rinishini to'xtatadi:

<div v-cloak>{{ message }}</div>

v-once

Element va uning farzandlarini (child elementlarini) faqat bir marta renderlaydi:

<span v-once>{{ bu faqat bir marta renderlaydi }}</span>

Qo'shimcha Misollar

Shartli Rendering

Vue.js da shartli rendering orqali elementlarni ko'rsatish yoki yashirish mumkin. v-if, v-else-if, va v-else direktivalari ishlatiladi:

<div v-if="type === 'A'">A javob</div>
<div v-else-if="type === 'B'">B javob</div>
<div v-else>C javob</div>

Ro'yxatni Iteratsiya Qilish

v-for direktivasi orqali ro'yxat elementlarini iteratsiya qilish mumkin:

<ul>
  <li v-for="(item, index) in items" :key="item.id">
    {{ index }} - {{ item.text }}
  </li>
</ul>

items=array;
item=arrayning elementi;
index=array elementining indeksi.

Form Elementlari

v-model direktivasi orqali form elementlari bilan ikki tomonlama bog'lanishni ta'minlash mumkin:

<input v-model="message" placeholder="Xabar kiriting">
<p>Yozilgan xabar: {{ message }}</p>

Template Sintaksisi orqali Ma'lumotlar Bindingi

Template sintaksisi orqali Vue.js komponentlarida ma'lumotlarni dinamik ravishda bog'lash juda sodda va qulay. Bu esa reaktiv ilovalarni yaratishda katta yordam beradi.

Vue.js template sintaksisi HTMLni kengaytirish orqali dinamik va reaktiv veb ilovalarni yaratishda kuchli vositalarni taqdim etadi. Bu direktivalar va interpolatsiyalar orqali ma'lumotlarni boshqarish va hodisalarga javob berish oson va samarali bo'ladi.

inshaaAlloh keyingi maqolalarda reactive data va bir qanncha ma'lumotlarni o'rganib olamiz.