Vue Academy · Ders

Tüm Form Öğelerinde v-model

Input, textarea, select, checkbox, radio — v-model'in her öğe türüne nasıl uyarlandığı.

Tüm Form Öğelerinde v-model, 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.

Form Girişlerini Bağlama

v-model, form denetimleri ile reaktif durumunuz arasında iki yönlü bağlama oluşturur. Her denetim türü — metin, onay kutusu, radyo düğmesi, seçim ve metin alanı — v-model'i biraz farklı kullanır. Bu derste hepsini ele alacağız.

Metin Girişi

Bir metin girişinde v-model, değeri bağlar ve giriş yapıldığında günceller. box'a yazdığınızda ref anında güncellenir.

<script setup>
import { ref } from 'vue'
const name = ref('')
</script>

<template>
  <input v-model="name" />
  <p>Hello, {{ name }}</p>
</template>

Metin Alanı

Bir metin alanı, metin girişiyle aynı şekilde çalışır. v-model'i doğrudan öğe üzerinde kullanın; etiketlerin arasına metin yerleştirmeyin.

<template>
  <textarea v-model="message"></textarea>
</template>

Onay Kutusu: Doğru/Yanlış

Bir Boolean ref'ine bağlanan tek bir onay kutusu, true ile false arasında geçiş yapar.

<script setup>
import { ref } from 'vue'
const agreed = ref(false)
</script>

<template>
  <input type="checkbox" v-model="agreed" />
  <p>Agreed: {{ agreed }}</p>
</template>

Birden Çok Onay Kutusunu Diziye Bağlama

Birden çok onay kutusunu aynı dizi ref'ine bağlayın. İşaretlenen her kutu, value değerini diziye ekler.

<script setup>
import { ref } from 'vue'
const hobbies = ref([])
</script>

<template>
  <input type="checkbox" value="reading" v-model="hobbies" />
  <input type="checkbox" value="coding" v-model="hobbies" />
  <p>{{ hobbies }}</p>
</template>

Radyo Düğmeleri

Bir gruptaki radyo düğmeleri tek bir ref'i paylaşır. Ref, seçilen seçeneğin value değerini tutar.

<script setup>
import { ref } from 'vue'
const picked = ref('')
</script>

<template>
  <input type="radio" value="small" v-model="picked" />
  <input type="radio" value="large" v-model="picked" />
  <p>Picked: {{ picked }}</p>
</template>

Seçim: Tekli

Tekli seçim, seçilen seçenekle eşleşen bir değere bağlanır. İsterseniz boş değere sahip bir yer tutucu seçenek sağlayabilirsiniz.

<script setup>
import { ref } from 'vue'
const city = ref('')
</script>

<template>
  <select v-model="city">
    <option value="">Choose</option>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

Seçim: Çoklu

multiple özniteliğini ekleyin ve bir diziye bağlayın. Seçilen seçenekler dizide toplanır.

<script setup>
import { ref } from 'vue'
const cities = ref([])
</script>

<template>
  <select v-model="cities" multiple>
    <option value="paris">Paris</option>
    <option value="tokyo">Tokyo</option>
  </select>
</template>

Değer Değiştiricileri

Değiştiriciler v-model davranışını özelleştirir: .trim boşlukları kaldırır, .number değeri sayıya dönüştürür ve .lazy her tuş vuruşu yerine değişiklik olduğunda eşitler.

<input v-model.number="age" />
<input v-model.trim="username" />
<input v-model.lazy="note" />

Tek Bir Zihinsel Model

Denetim ne olursa olsun v-model, değer girişi ve değişiklik çıkışı mantığıyla çalışır. Denetim türü yalnızca değerin biçimini belirler: Boolean, dize veya dizi.

Özel Giriş Bileşenleri

v-model, kendi bileşenlerinizde de çalışır. Özel bir giriş, modelValue prop'unu tanımlar ve update:modelValue olayını yayınlar; böylece üst bileşenine yerel bir denetim gibi davranır.

<!-- parent -->
<MyTextInput v-model="name" />

<!-- child declares modelValue + emits update:modelValue -->

Hızlı Kontrol

Form bağlama hakkındaki bilginizi sınayın.

Özet

Form denetimlerinde v-model:

Metin ve metin alanı bir dizeye bağlanır.
Tek bir onay kutusu Boolean'a, birden çok onay kutusu ise bir diziye bağlanır.
Radyo düğmeleri, seçilen değeri tutan tek bir ref'i paylaşır.
Seçim bir değere bağlanır; multiple ile kullanıldığında bir diziye bağlanır.
Değiştiriciler: .trim, .number, .lazy.

Sıkça Sorulan Sorular

“Tüm Form Öğelerinde v-model” dersi ücretsiz mi?

Evet — “Tüm Form Öğelerinde v-model” 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.

“Tüm Form Öğelerinde v-model” dersinde ne öğreneceğim?

Input, textarea, select, checkbox, radio — v-model'in her öğe türüne nasıl uyarlandığı. 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.

“Tüm Form Öğelerinde v-model” 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