Vue'da qanday direktivalar mavjud va o'zingiznikini qanday yozish mumkin?

Savol

Vue'da qanday o'rnatilgan direktivalar mavjud, ular bir-biridan nimasi bilan farq qiladi va o'zingizning direktivangizni qanday yozish mumkin?

Qisqa javob

Direktivalar — v- prefiksli maxsus atributlar bo'lib, DOM elementiga reaktiv xatti-harakatni qo'llaydi: v-if/v-show ko'rinishni boshqaradi, v-for ro'yxatlarni render qiladi, v-bind atributlarni bog'laydi, v-on — hodisa ishlovchilarini, v-model — ikki tomonlama bog'lashni. Maxsus direktiva DOM elementi bilan to'g'ridan-to'g'ri ishlash uchun lifecycle hook'larga ega obyekt (mounted, updated va h.k.) sifatida yoziladi.

Batafsil javob

O'rnatilgan direktivalar:

• v-if / v-else-if / v-else — shartli render: element DOM'dan to'liq qo'shiladi yoki olib tashlanadi. Shart kamdan-kam o'zgarganda mos keladi, chunki almashtirish qimmatroq.
• v-show — display: none CSS-xususiyatini almashtiradi, element DOM'da doim qoladi. Tez-tez almashtirilganda arzonroq, lekin birinchi render'da qimmatroq (element har holda render qilinadi).
• v-for — massiv/obyekt/diapazon bo'yicha ro'yxatni render qiladi: v-for="item in items" :key="item.id". Direktivani har doim :key — noyob identifikator — bilan birga ishlatish kerak, shunda Vue ro'yxat o'zgarganda DOM tugunlarini samarali va to'g'ri qayta ishlatishi mumkin.
• v-bind (:) — atribut/prop/klass/uslubni ifodaga reaktiv bog'laydi: :src="url", :class="{ active }}", :disabled="isLoading".
• v-on (@) — hodisa ishlovchisini o'rnatadi: @click="handleClick", modifikatorlarni qo'llab-quvvatlaydi (@click.stop, @submit.prevent).
• v-model — forma elementlari va komponentlarda ikki tomonlama bog'lash (formalar haqidagi alohida savolga qarang).

O'rnatilgan direktivalar yetmasa, maxsus direktiva yozish mumkin — komponent lifecycle'ini takrorlaydigan hook'larga ega obyekt: created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted. Har bir hook DOM elementining o'zini (el) va ifoda qiymati (binding.value), argumenti (binding.arg) hamda modifikatorlariga (binding.modifiers) ega binding obyektini oladi. Maxsus direktivalar DOM elementiga to'g'ridan-to'g'ri imperativ kirish talab qilinganda kerak bo'ladi — fokus, avtosayzing, uchinchi tomon kutubxonasi bilan integratsiya, element tashqarisiga bosishni kuzatish va h.k. — ya'ni shablon orqali deklarativ ifodalab bo'lmaydigan narsalar.

Misol

<!-- v-focus direktivasi: mount qilinganda elementga avtofokus -->
<script setup>
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

<template>
  <input v-focus placeholder="Paydo bo'lganda avtofokus" />
</template>

Parametr va modifikatorli direktiva — qiymat va argumentga qarab fon rangini yoritish:

// directives/highlight.js
export const vHighlight = {
  mounted(el, binding) {
    // binding.value — uzatilgan qiymat, binding.arg — v-highlight:color
    el.style.backgroundColor = binding.value || 'yellow'
  },
  updated(el, binding) {
    el.style.backgroundColor = binding.value || 'yellow'
  }
}

<script setup>
import { ref } from 'vue'
import { vHighlight } from './directives/highlight'

const color = ref('lightgreen')
</script>

<template>
  <p v-highlight="color">Reaktiv fon yoritilgan matn</p>
</template>

Qo'shimcha savollar

• Nega v-for :keyni talab qiladi va u bo'lmasa yoki kalit sifatida massiv indeksi ishlatilsa nima bo'ladi?
• Qaysi holatda v-show, qaysi holatda v-if tanlangani ma'qul?
• v-if va v-forni bitta elementda ishlatish mumkinmi va nega bunday qilish tavsiya etilmaydi?