Template syntax va direktivalar haqida.
Tags: vue, javascript, vuex, pinia
Published: 2024-06-15 19:47:31

﷽

Assalamu alaykum! [Ushbu](https://dev.to/mystery9807/vuejs-loyihamizning-tuzilmasi-haqida-3cek) postda Vue.js loyihamizning umummiy tuzulmasi (strukturasi, fayllari) bilan tanishib chiqidik.

Endi navbat Vue.js loyihamizning asosiy sintaksis haqida gaplashamiz.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o4ko6nqwhmpjmx9uqtxm.png)

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:

```App.vue

<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:

```html
<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:

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

#### `v-if`
Elementni shartli ravishda ko'rsatish uchun ishlatiladi:

```html
<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:

```html
<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:

```html
<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:

```html
<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:

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

#### `v-bind:style`
Dinamik stillarni qo'llash mumkin:

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

### Ikki tomonlama bog'lanish

#### `v-model`
Form elementlari bilan ikki tomonlama bog'lanishni ta'minlaydi:

```html
<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.

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

#### `v-pre`
Element va uning farzandlari (childlari) uchun remderlanishini to'xtatadi:

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

#### `v-cloak`
Elementga Vue.js ilovasi to'liq yuklanmaguncha ko'rinishini to'xtatadi:

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

#### `v-once`
Element va uning farzandlarini (child elementlarini)  faqat bir marta renderlaydi:

```html
<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:

```html
<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:

```html
<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:

```html
<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.

BaarakAllohu fiikum!

https://t.me/mukhriddinweb
https://khodieff.uz