v-model va hodisa modifikatorlari qanday ishlaydi?

Savol

Ikki tomonlama bog'lash uchun v-model direktivasi qanday tuzilgan va .prevent, .stop, .once kabi hodisa modifikatorlari nima qiladi?

Qisqa javob

v-model — bu qiymat bog'lanishi (:value) va shu qiymatni yangilaydigan kirish hodisasi ishlovchisi (@input)ga kapot ostida yoyiladigan sintaktik shakar. Hodisa modifikatorlari (.prevent, .stop, .once va boshqalar) — bu funksiya tanasida qo'lda yozmasdan event.preventDefault(), event.stopPropagation()ni chaqirish yoki ishlovchining ishga tushishini cheklashning deklarativ usuli.

Batafsil javob

v-model. Oddiy <input> uchun yozuv:

<input v-model="text" />

quyidagiga teng:

<input :value="text" @input="text = $event.target.value" />

Ya'ni v-model qiymatni atributga chiqarish va kirish hodisasida o'zgaruvchini yangilashni bitta direktivada birlashtiradi. Turli elementlar uchun Vue turli hodisa/atribut juftliklarini ishlatadi: <input type="checkbox"> checked/changedan, <select> — value/changedan foydalanadi va h.k. — direktiva mos bog'lanishni o'zi tanlaydi.

Foydalanuvchi komponentlarida v-model modelValue propi + update:modelValue hodisasiga yoyiladi (props/emits haqidagi savolga qarang) — komponent bu bog'lanishni qo'llab-quvvatlash uchun defineModel()ni (yoki qo'lda defineProps(['modelValue']) + defineEmits(['update:modelValue'])ni) e'lon qilishi kerak.

Hodisa modifikatorlari. v-onda hodisa nomidan keyin nuqta orqali yoziladi:

• .prevent — event.preventDefault()ni chaqiradi (masalan, submitda forma sahifani qayta yuklamasligi uchun).
• .stop — event.stopPropagation()ni chaqirib, hodisaning ota elementlarga ko'tarilishini to'xtatadi.
• .once — ishlovchi faqat bir marta ishga tushadi, keyin avtomatik yechiladi.
• .self — ishlovchi faqat hodisa aynan shu elementning o'zida sodir bo'lganda ishga tushadi, bola elementdan ko'tarilganda emas.
• .capture — ishlovchini ko'tarilish emas, ushlab qolish (capture) fazasida o'rnatadi.
• Tugma modifikatorlari (@keyup.enter, @keyup.esc) — ishlovchini muayyan tugma bo'yicha filtrlaydi.

Modifikatorlarni birlashtirish mumkin (@click.stop.prevent) va ular chapdan o'ngga yozilish tartibida o'qiladi — bu, masalan, .selfni boshqalar bilan birga ishlatganda muhim.

Shuningdek, v-modelning o'z modifikatorlari bor: .lazy (inputda emas, changeda yangilash), .number (songa keltirish), .trim (bo'shliqlarni kesish).

Misol

<script setup>
import { ref } from 'vue'

const email = ref('')
const submitted = ref(false)

function handleSubmit() {
  submitted.value = true
  console.log('Yuborildi:', email.value)
}
</script>

<template>
  <!-- .prevent — brauzerga submitda sahifani qayta yuklashga yo'l qo'ymaymiz -->
  <form @submit.prevent="handleSubmit">
    <!-- v-model.trim — :value + @input ustidagi shakar, plus bo'shliqlarni kesish -->
    <input v-model.trim="email" type="email" placeholder="Email" />
    <button type="submit">Yuborish</button>
  </form>

  <!-- .stop — bosishning konteynerga ko'tarilishiga yo'l qo'ymaymiz; .once — bir marta ishga tushadi -->
  <div @click="console.log('konteynerga bosildi')">
    <button @click.stop.once="() => console.log('tugmaga bosildi, faqat bir marta')">
      Meni bos
    </button>
  </div>

  <p v-if="submitted">Forma yuborildi: {{ email }}</p>
</template>

Qo'shimcha savollar

• Kiritish maydoni bo'lgan o'z komponentida v-modelni qanday amalga oshirish mumkin?
• .stop va .self modifikatorlari o'rtasida qanday farq bor?
• .sync modifikatori nima qiladi va u nega Vue 3'da v-model:propNamega almashtirildi?