Vue Academy · Ders

v-model: İki Yönlü Bağlamanın İç Yapısı

v-model'in :modelValue + @update:modelValue biçiminde derlenmesi, özel v-model adları, bileşenlerde v-model.

v-model: İki Yönlü Bağlamanın İç Yapısı, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

v-model Gerçekte Nedir?

v-model sihirli bir iki yönlü bağlama gibi görünür; ancak aslında bir değer bağlama ile bir olay dinleyicisinin kısaltmasıdır. Nasıl genişletildiğini anlamak, onu hem girdilerde hem de özel bileşenlerde kullanmanızı sağlar.

Metin Girdisinde v-model

Yerel bir girdide v-model, değeri bağlar ve input olaylarını dinler. Bu iki satır birbirine denktir.

<!-- shorthand -->
<input v-model="text" />

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

İki Parça: Bağla ve Dinle

:value, durumu öğeye aktarır; @input ise kullanıcı değişikliklerini yeniden duruma aktarır. Birlikte iki yönlü etkiyi oluştururlar.

Bileşenlerde v-model Farklıdır

Özel bir bileşende v-model farklı bir özellik ve olay kullanır: modelValue ve update:modelValue. Yerel value/input yalnızca yerel öğeler içindir.

<!-- on a component -->
<MyInput v-model="text" />

<!-- expands to -->
<MyInput :model-value="text" @update:model-value="text = $event" />

Alt Bileşende v-model Uygulama

v-model desteği sağlamak için alt bileşen bir modelValue özelliği tanımlar ve değer değişmesi gerektiğinde update:modelValue olayını yayınlar.

<script setup>
defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
function onInput(e) { emit('update:modelValue', e.target.value) }
</script>

Alt Bileşenin Şablonu

Alt bileşen, gelen özelliği girdiye bağlar ve değişiklik olduğunda olay yayınlar. Üst bileşen, iç ayrıntıları hiçbir zaman bilmez.

<template>
  <input :value="modelValue" @input="onInput" />
</template>

Adlandırılmış v-model Argümanları

Modeli adlandırarak belirli bir özelliği hedefleyebilirsiniz: v-model:title, title özelliğini ve update:title olayını kullanır.

<!-- parent -->
<MyDialog v-model:title="pageTitle" />

<!-- expands to -->
<MyDialog :title="pageTitle" @update:title="pageTitle = $event" />

Alt Bileşende Adlandırılmış Model Tanımlama

Alt bileşen, bu adla eşleşen bir özellik ve olay tanımlar.

<script setup>
defineProps(['title'])
const emit = defineEmits(['update:title'])
</script>

Tek Bileşende Birden Çok v-model

Her modelin kendi adı olduğundan birkaç modeli aynı anda bağlayabilirsiniz. Bir kullanıcı formu bileşeni, aynı anda v-model:first ve v-model:last kullanıma sunabilir.

<UserName
  v-model:first="firstName"
  v-model:last="lastName"
/>

Bu Tasarım Neden Güçlüdür

v-model yalnızca özellikler ve olaylardan oluştuğu için özel bileşenler, onları kullananlar açısından yerel girdilerle tamamen aynı şekilde çalışır. Birden çok adlandırılmış model, tek bir bileşenin birkaç iki yönlü bağlamayı düzenli biçimde yönetmesini sağlar.

Yaygın Bir Hata

Alt bileşen içinde modelValue özelliğini doğrudan değiştirmeyin — bu, özelliklerin tek yönlü akışını bozar. Her zaman güncelleme olayını yayınlayın ve durumu üst bileşenin yönetmesine izin verin.

Hızlı Kontrol

v-model iç işleyişi hakkındaki bilginizi sınayın.

Özet

v-model'in nasıl çalıştığını öğrendiniz:

Girdilerde :value + @input biçimine genişler.
Bileşenlerde modelValue + update:modelValue kullanılır.
Adlandırılmış modeller (v-model:title) belirli özellikleri ve olayları hedefler.
Tek bir bileşende birden çok v-model kullanabilirsiniz.

Sıkça Sorulan Sorular

“v-model: İki Yönlü Bağlamanın İç Yapısı” dersi ücretsiz mi?

Evet — “v-model: İki Yönlü Bağlamanın İç Yapısı” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“v-model: İki Yönlü Bağlamanın İç Yapısı” dersinde ne öğreneceğim?

v-model'in :modelValue + @update:modelValue biçiminde derlenmesi, özel v-model adları, bileşenlerde v-model. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“v-model: İki Yönlü Bağlamanın İç Yapısı” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Vue Academy Sayfasına Dön