{"id":41958,"date":"2026-05-21T14:03:32","date_gmt":"2026-05-21T11:03:32","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/vue-js-ozel-bilesenlere-v-model-destegi-nasil-eklenir\/"},"modified":"2026-05-21T14:03:54","modified_gmt":"2026-05-21T11:03:54","slug":"vue-js-ozel-bilesenlere-v-model-destegi-nasil-eklenir","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-ozel-bilesenlere-v-model-destegi-nasil-eklenir\/","title":{"rendered":"Vue.js \u00d6zel Bile\u015fenlere v-model Deste\u011fi Nas\u0131l Eklenir?"},"content":{"rendered":"

Vue.js \u00d6zel Bile\u015fenlere v-model Deste\u011fi Nas\u0131l Eklenir?<\/h2>\n

Vue.js ile dinamik ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczleri geli\u015ftirirken, form elemanlar\u0131yla veri ba\u011flama ihtiyac\u0131 s\u0131k\u00e7a kar\u015f\u0131m\u0131za \u00e7\u0131kar. Peki, kendi \u00f6zel bile\u015fenlerinizi olu\u015fturdu\u011funuzda, Vue’nun sihirli iki y\u00f6nl\u00fc veri ba\u011flama direktifi olan v-model<\/code>‘i bunlara nas\u0131l entegre edebilirsiniz? Bu makale, \u00f6zel bile\u015fenlerinize v-model<\/code> deste\u011fi eklemenin inceliklerini ad\u0131m ad\u0131m a\u00e7\u0131klayarak geli\u015ftirme s\u00fcrecinizi kolayla\u015ft\u0131rmay\u0131 hedefliyor. Modern Vue uygulamalar\u0131nda veri ak\u0131\u015f\u0131n\u0131 optimize etmek ve bile\u015fenler aras\u0131 ileti\u015fimi basitle\u015ftirmek i\u00e7in bu g\u00fc\u00e7l\u00fc \u00f6zelli\u011fi nas\u0131l kullanaca\u011f\u0131n\u0131z\u0131 ke\u015ffedin.<\/p>\n

v-model ve Temel Veri Ba\u011flama Kavramlar\u0131<\/h2>\n

Vue.js, kullan\u0131c\u0131 aray\u00fcz\u00fc geli\u015ftirmeyi basitle\u015ftiren ilerici bir JavaScript framework’\u00fcd\u00fcr. Geli\u015ftiricilerin deklaratif bir yakla\u015f\u0131mla karma\u015f\u0131k aray\u00fczler olu\u015fturmas\u0131na olanak tan\u0131r. Vue’nun en temel ve g\u00fc\u00e7l\u00fc \u00f6zelliklerinden biri, veri ba\u011flamad\u0131r. Bu mekanizma, uygulaman\u0131z\u0131n verileri (state) ile DOM (Document Object Model) aras\u0131ndaki senkronizasyonu sa\u011flar. Veri ba\u011flama, tek y\u00f6nl\u00fc ve iki y\u00f6nl\u00fc olmak \u00fczere iki ana kategoriye ayr\u0131l\u0131r. Tek y\u00f6nl\u00fc veri ba\u011flamada, veriler bile\u015fenden g\u00f6r\u00fcn\u00fcme do\u011fru akar; yani state de\u011fi\u015fti\u011finde DOM g\u00fcncellenir, ancak kullan\u0131c\u0131 etkile\u015fimleri state’i do\u011frudan de\u011fi\u015ftirmez. \u0130ki y\u00f6nl\u00fc veri ba\u011flama ise hem state’ten g\u00f6r\u00fcn\u00fcme hem de g\u00f6r\u00fcn\u00fcmden state’e do\u011fru veri ak\u0131\u015f\u0131n\u0131 m\u00fcmk\u00fcn k\u0131lar. \u0130\u015fte v-model<\/code> direktifi tam da bu noktada devreye girer ve iki y\u00f6nl\u00fc veri ba\u011flamay\u0131 standart HTML form elemanlar\u0131 (input, textarea, select) i\u00e7in basitle\u015ftirir.<\/p>\n

v-model<\/code> asl\u0131nda bir “syntax sugar”d\u0131r, yani daha uzun bir yaz\u0131m \u015feklinin k\u0131salt\u0131lm\u0131\u015f halidir. Temelde, bir bile\u015fene :value<\/code> prop’unu ba\u011flamak ve @input<\/code> olay\u0131n\u0131 dinlemekten ibarettir. \u00d6rne\u011fin, bir <input><\/code> eleman\u0131 i\u00e7in v-model=\"searchText\"<\/code> kullanmak, asl\u0131nda :value=\"searchText\" @input=\"searchText = $event.target.value\"<\/code> yazmakla ayn\u0131 anlama gelir. Bu, bile\u015fenin i\u00e7indeki de\u011feri prop arac\u0131l\u0131\u011f\u0131yla al\u0131rken, kullan\u0131c\u0131 giri\u015fi oldu\u011funda bir olay (event) yayarak ana bile\u015fenin veri modelini g\u00fcncellemesini sa\u011flar. Bu basit ancak etkili mekanizma, form y\u00f6netimini ve kullan\u0131c\u0131 etkile\u015fimlerini \u00e7ok daha sezgisel hale getirir.<\/p>\n

\u00d6zel bile\u015fenlerimize v-model<\/code> deste\u011fi eklemek istedi\u011fimizde, bu temel prensibi anlamak kritik \u00f6neme sahiptir. Kendi bile\u015fenimiz, t\u0131pk\u0131 standart bir <input><\/code> gibi davranmal\u0131d\u0131r: d\u0131\u015far\u0131dan bir de\u011fer almal\u0131 (prop olarak) ve i\u00e7indeki de\u011fer de\u011fi\u015fti\u011finde d\u0131\u015far\u0131ya bir olay (event) yaymal\u0131d\u0131r. Vue 3 ile birlikte, v-model<\/code>‘in \u00e7al\u0131\u015fma \u015fekli daha da standartla\u015ft\u0131r\u0131ld\u0131 ve esnek hale getirildi. Art\u0131k \u00f6zel bile\u015fenlerimizde v-model<\/code> kullanmak i\u00e7in varsay\u0131lan olarak modelValue<\/code> adl\u0131 bir prop ve update:modelValue<\/code> adl\u0131 bir olay kullan\u0131l\u0131r. Bu adland\u0131rma kural\u0131, bile\u015fenlerimizin v-model<\/code> ile sorunsuz bir \u015fekilde entegre olmas\u0131n\u0131 sa\u011flar ve kodun okunabilirli\u011fini art\u0131r\u0131r. Bu sayede, geli\u015ftiriciler kendi \u00f6zel form elemanlar\u0131n\u0131 veya etkile\u015fimli bile\u015fenlerini olu\u015ftururken, Vue’nun sundu\u011fu kolayl\u0131klar\u0131 tam anlam\u0131yla kullanabilirler.<\/p>\n

\u00d6zel Vue Bile\u015fenlerine v-model Deste\u011fi Nas\u0131l Eklenir?<\/h2>\n

Kendi \u00f6zel Vue bile\u015fenlerinizi geli\u015ftirirken, kullan\u0131c\u0131lar\u0131n bu bile\u015fenlerle t\u0131pk\u0131 standart HTML form elemanlar\u0131 gibi etkile\u015fim kurmas\u0131n\u0131 sa\u011flamak isteyebilirsiniz. Bu noktada, Vue’nun v-model<\/code> direktifi devreye girer ve iki y\u00f6nl\u00fc veri ba\u011flamay\u0131 basitle\u015ftirir. \u00d6zel bir bile\u015fene v-model<\/code> deste\u011fi eklemek i\u00e7in temel olarak iki \u015feye ihtiyac\u0131m\u0131z vard\u0131r: bile\u015fenin d\u0131\u015far\u0131dan bir de\u011fer almas\u0131n\u0131 sa\u011flayan bir prop ve bile\u015fenin i\u00e7indeki de\u011fer de\u011fi\u015fti\u011finde d\u0131\u015far\u0131ya bildirimde bulunan bir olay (event). Vue 3 ile birlikte bu s\u00fcre\u00e7, varsay\u0131lan modelValue<\/code> prop’u ve update:modelValue<\/code> olay\u0131 kullan\u0131larak standartla\u015ft\u0131r\u0131lm\u0131\u015ft\u0131r. Bu yakla\u015f\u0131m, kodun daha anla\u015f\u0131l\u0131r olmas\u0131n\u0131 ve farkl\u0131 geli\u015ftiriciler aras\u0131nda tutarl\u0131l\u0131\u011f\u0131 art\u0131rmas\u0131n\u0131 sa\u011flar.<\/p>\n

Tek De\u011ferli Alanlar \u0130\u00e7in v-model Entegrasyonu<\/h3>\n

Bir metin giri\u015fi veya say\u0131 se\u00e7ici gibi tek bir de\u011feri temsil eden \u00f6zel bile\u015fenler i\u00e7in v-model<\/code> entegrasyonu olduk\u00e7a basittir. \u0130lk ad\u0131m olarak, bile\u015feninizde modelValue<\/code> ad\u0131nda bir prop tan\u0131mlamal\u0131s\u0131n\u0131z. Bu prop, ana bile\u015fenden gelen de\u011feri alacakt\u0131r. \u0130kinci olarak, bile\u015fen i\u00e7indeki de\u011fer de\u011fi\u015fti\u011finde (\u00f6rne\u011fin, bir <input><\/code> eleman\u0131na metin girildi\u011finde), update:modelValue<\/code> ad\u0131nda bir olay yaymal\u0131s\u0131n\u0131z. Bu olay, de\u011fi\u015fen de\u011feri payload olarak ta\u015f\u0131r ve ana bile\u015fenin v-model<\/code> taraf\u0131ndan ba\u011flanan verisini g\u00fcnceller. Bu sayede, \u00f6zel bile\u015feniniz d\u0131\u015f d\u00fcnyayla iki y\u00f6nl\u00fc bir ileti\u015fim kurmu\u015f olur.<\/p>\n

A\u015fa\u011f\u0131daki \u00f6rnekte, basit bir \u00f6zel metin giri\u015fi bile\u015feni (MyCustomInput.vue<\/code>) olu\u015fturarak v-model<\/code> deste\u011fini nas\u0131l ekleyece\u011fimizi g\u00f6relim. Bu bile\u015fen, bir prop arac\u0131l\u0131\u011f\u0131yla ba\u015flang\u0131\u00e7 de\u011feri al\u0131r ve kullan\u0131c\u0131 her tu\u015f vuru\u015funda yeni de\u011feri ana bile\u015fene geri bildirir.<\/p>\n

\n<!-- MyCustomInput.vue -->\n<template>\n  <div>\n    <label for="custom-input">{{ label }}:<\/label>\n    <input\n      id="custom-input"\n      type="text"\n      :value="modelValue"\n      @input="$emit('update:modelValue', $event.target.value)"\n    \/>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  props: {\n    modelValue: {\n      type: String,\n      default: ''\n    },\n    label: {\n      type: String,\n      default: '\u00d6zel Giri\u015f'\n    }\n  },\n  emits: ['update:modelValue']\n};\n<\/script>\n<\/code><\/pre>\n
Yukar\u0131daki kod blo\u011funda g\u00f6rd\u00fc\u011f\u00fcn\u00fcz gibi, MyCustomInput<\/code> bile\u015feni modelValue<\/code> prop’unu kabul ediyor ve <input><\/code> eleman\u0131n\u0131n value<\/code> \u00f6zelli\u011fine ba\u011fl\u0131yor. Kullan\u0131c\u0131 <input><\/code> eleman\u0131na her yazd\u0131\u011f\u0131nda, @input<\/code> olay\u0131 tetiklenir ve $emit('update:modelValue', $event.target.value)<\/code> ifadesiyle yeni de\u011feri ana bile\u015fene g\u00f6nderir. Ana bile\u015feninizde bu \u00f6zel giri\u015fi \u015fu \u015fekilde kullanabilirsiniz:<\/p>\n
\n<!-- App.vue -->\n<template>\n  <div>\n    <h1>v-model ile \u00d6zel Bile\u015fen Kullan\u0131m\u0131<\/h1>\n    <MyCustomInput v-model="message" label="Mesaj\u0131n\u0131z" \/>\n    <p>Girilen Mesaj: {{ message }}<\/p>\n\n    <hr>\n\n    <MyCustomInput v-model="username" label="Kullan\u0131c\u0131 Ad\u0131" \/>\n    <p>Kullan\u0131c\u0131 Ad\u0131: {{ username }}<\/p>\n  <\/div>\n<\/template>\n\n<script>\nimport MyCustomInput from '.\/components\/MyCustomInput.vue';\n\nexport default {\n  components: {\n    MyCustomInput\n  },\n  data() {\n    return {\n      message: 'Merhaba Vue!',\n      username: ''\n    };\n  }\n};\n<\/script>\n<\/code><\/pre>\n
Bu \u00f6rnekte, App.vue<\/code> bile\u015feni MyCustomInput<\/code> bile\u015fenini iki farkl\u0131 veri modeliyle (message<\/code> ve username<\/code>) kullan\u0131yor. Her iki durumda da v-model<\/code> direktifi sayesinde, MyCustomInput<\/code> i\u00e7indeki de\u011fer de\u011fi\u015fiklikleri otomatik olarak App.vue<\/code>‘daki ilgili veri \u00f6zelliklerini g\u00fcnceller ve tersi de ge\u00e7erlidir. Bu, form elemanlar\u0131 ile \u00e7al\u0131\u015f\u0131rken kodunuzu temiz ve y\u00f6netilebilir tutman\u0131n zarif bir yoludur.<\/p>\n
Birden Fazla v-model Ba\u011flama ve \u0130leri D\u00fczey Kullan\u0131mlar<\/h3>\n
Baz\u0131 durumlarda, \u00f6zel bir bile\u015fenin birden fazla de\u011feri y\u00f6netmesi ve bu de\u011ferlerin her birine ayr\u0131 ayr\u0131 v-model<\/code> ile ba\u011flanabilmesi gerekebilir. Vue 3, bu senaryoyu ele almak i\u00e7in v-model<\/code> direktifine arg\u00fcman ekleme yetene\u011fi sunar. Varsay\u0131lan modelValue<\/code> yerine, v-model:fieldName=\"dataProperty\"<\/code> \u015feklinde bir adland\u0131rma kullanarak farkl\u0131 prop’lara ve olaylara ba\u011flanabilirsiniz. Bu, \u00f6zellikle karma\u015f\u0131k form bile\u015fenleri veya ayar panelleri gibi \u00e7oklu veri giri\u015fine ihtiya\u00e7 duyan bile\u015fenler i\u00e7in olduk\u00e7a kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n
\u00d6rne\u011fin, bir tarih ve saat se\u00e7ici bile\u015feni d\u00fc\u015f\u00fcnelim. Bu bile\u015fen hem tarihi hem de saati ayr\u0131 ayr\u0131 y\u00f6netebilir. Bu durumda, iki farkl\u0131 v-model<\/code> ba\u011flamas\u0131 kullanabiliriz: v-model:date=\"selectedDate\"<\/code> ve v-model:time=\"selectedTime\"<\/code>. Bile\u015fen i\u00e7inde, date<\/code> ve time<\/code> ad\u0131nda iki prop tan\u0131mlayacak ve her birinin de\u011fi\u015fti\u011finde update:date<\/code> ve update:time<\/code> olaylar\u0131n\u0131 yayaca\u011f\u0131z. Bu esneklik, bile\u015fenlerinizin daha mod\u00fcler ve yeniden kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar.<\/p>\n
\n<!-- DateTimePicker.vue -->\n<template>\n  <div>\n    <label>Tarih:<\/label>\n    <input type="date" :value="date" @input="$emit('update:date', $event.target.value)">\n    <br>\n    <label>Saat:<\/label>\n    <input type="time" :value="time" @input="$emit('update:time', $event.target.value)">\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  props: {\n    date: {\n      type: String,\n      default: ''\n    },\n    time: {\n      type: String,\n      default: ''\n    }\n  },\n  emits: ['update:date', 'update:time']\n};\n<\/script>\n<\/code><\/pre>\n
Bu DateTimePicker<\/code> bile\u015fenini ana bile\u015fenimizde kullan\u0131rken, v-model<\/code>‘i arg\u00fcmanlarla birlikte kullan\u0131r\u0131z:<\/p>\n
\n<!-- App.vue -->\n<template>\n  <div>\n    <h1>Birden Fazla v-model Ba\u011flama<\/h1>\n    <DateTimePicker\n      v-model:date="selectedDate"\n      v-model:time="selectedTime"\n    \/>\n    <p>Se\u00e7ilen Tarih: {{ selectedDate }}<\/p>\n    <p>Se\u00e7ilen Saat: {{ selectedTime }}<\/p>\n  <\/div>\n<\/template>\n\n<script>\nimport DateTimePicker from '.\/components\/DateTimePicker.vue';\n\nexport default {\n  components: {\n    DateTimePicker\n  },\n  data() {\n    return {\n      selectedDate: '2023-10-27',\n      selectedTime: '14:30'\n    };\n  }\n};\n<\/script>\n<\/code><\/pre>\n
Bu yakla\u015f\u0131m, bile\u015fenlerinizin daha karma\u015f\u0131k veri yap\u0131lar\u0131n\u0131 y\u00f6netmesine olanak tan\u0131rken, ana bile\u015fen taraf\u0131nda veri ba\u011flamay\u0131 hala temiz ve deklaratif tutar. Birden fazla v-model<\/code> kullan\u0131rken, her bir v-model<\/code> i\u00e7in benzersiz bir prop ad\u0131 ve buna kar\u015f\u0131l\u0131k gelen bir update:PropAdi<\/code> olay\u0131 tan\u0131mlad\u0131\u011f\u0131n\u0131zdan emin olmal\u0131s\u0131n\u0131z. Bu, Vue’nun hangi v-model<\/code> ba\u011flamas\u0131n\u0131n hangi prop ve olay \u00e7iftiyle e\u015fle\u015fti\u011fini do\u011fru bir \u015fekilde anlamas\u0131n\u0131 sa\u011flar.<\/p>\n
v-model Modifiers (De\u011fi\u015ftiriciler) ile Geli\u015fmi\u015f Kontrol<\/h2>\n
Vue’nun v-model<\/code> direktifi, standart olarak baz\u0131 de\u011fi\u015ftiriciler (modifiers) ile birlikte gelir: .lazy<\/code>, .number<\/code> ve .trim<\/code>. Bu de\u011fi\u015ftiriciler, veri ba\u011flaman\u0131n davran\u0131\u015f\u0131n\u0131 daha da \u00f6zelle\u015ftirmeye yarar. \u00d6rne\u011fin, .lazy<\/code> de\u011fi\u015ftiricisi, input<\/code> olay\u0131n\u0131 dinlemek yerine change<\/code> olay\u0131n\u0131 dinleyerek veri g\u00fcncellemesini geciktirir. .number<\/code> de\u011fi\u015ftiricisi, kullan\u0131c\u0131 girdisini otomatik olarak say\u0131ya d\u00f6n\u00fc\u015ft\u00fcrmeye \u00e7al\u0131\u015f\u0131rken, .trim<\/code> ise ba\u015ftaki ve sondaki bo\u015fluklar\u0131 kald\u0131r\u0131r. Peki, kendi \u00f6zel bile\u015fenleriniz i\u00e7in bu t\u00fcr de\u011fi\u015ftiricileri veya hatta tamamen \u00f6zel de\u011fi\u015ftiricileri nas\u0131l uygulayabilirsiniz?<\/p>\n
\u00d6zel Bile\u015fenlerde Modifiers Kullan\u0131m\u0131<\/h3>\n
\u00d6zel bile\u015fenlerinizde v-model<\/code> de\u011fi\u015ftiricilerini desteklemek i\u00e7in, Vue 3 ile birlikte gelen modelModifiers<\/code> prop’unu kullan\u0131r\u0131z. Bu prop, ana bile\u015fenden v-model<\/code> direktifine uygulanan t\u00fcm de\u011fi\u015ftiricileri i\u00e7eren bir nesne olarak gelir. \u00d6rne\u011fin, v-model.capitalize=\"text\"<\/code> \u015feklinde bir kullan\u0131mda, bile\u015feniniz modelModifiers: { capitalize: true }<\/code> \u015feklinde bir prop alacakt\u0131r. Bu bilgiyi kullanarak, bile\u015feninizin i\u00e7indeki veri i\u015fleme mant\u0131\u011f\u0131n\u0131 de\u011fi\u015ftirebilirsiniz.<\/p>\n
A\u015fa\u011f\u0131daki \u00f6rnekte, basit bir metin giri\u015fi bile\u015fenine .capitalize<\/code> ad\u0131nda \u00f6zel bir de\u011fi\u015ftirici ekleyelim. Bu de\u011fi\u015ftirici, kullan\u0131c\u0131n\u0131n girdi\u011fi metnin ilk harfini otomatik olarak b\u00fcy\u00fck harfe \u00e7evirecektir.<\/p>\n
\n<!-- MyCapitalizeInput.vue -->\n<template>\n  <div>\n    <label>B\u00fcy\u00fck Harfli Giri\u015f:<\/label>\n    <input\n      type="text"\n      :value="modelValue"\n      @input="emitValue"\n    \/>\n  <\/div>\n<\/template>\n\n<script>\nexport default {\n  props: {\n    modelValue: String,\n    modelModifiers: {\n      default: () => ({})\n    }\n  },\n  emits: ['update:modelValue'],\n  methods: {\n    emitValue(e) {\n      let value = e.target.value;\n      if (this.modelModifiers.capitalize) {\n        value = value.charAt(0).toUpperCase() + value.slice(1);\n      }\n      this.$emit('update:modelValue', value);\n    }\n  }\n};\n<\/script>\n<\/code><\/pre>\n
Yukar\u0131daki kodda, emitValue<\/code> metodu, modelModifiers.capitalize<\/code> \u00f6zelli\u011finin var olup olmad\u0131\u011f\u0131n\u0131 kontrol eder. E\u011fer bu de\u011fi\u015ftirici varsa, de\u011feri b\u00fcy\u00fck harfe \u00e7evirir ve ard\u0131ndan update:modelValue<\/code> olay\u0131n\u0131 yayar. Ana bile\u015feninizde bu \u00f6zel de\u011fi\u015ftiriciyi \u015fu \u015fekilde kullanabilirsiniz:<\/p>\n
\n<!-- App.vue -->\n<template>\n  <div>\n    <h1>\u00d6zel v-model Modifiers<\/h1>\n    <MyCapitalizeInput v-model.capitalize="capitalizedText" \/>\n    <p>Girilen Metin: {{ capitalizedText }}<\/p>\n  <\/div>\n<\/template>\n\n<script>\nimport MyCapitalizeInput from '.\/components\/MyCapitalizeInput.vue';\n\nexport default {\n  components: {\n    MyCapitalizeInput\n  },\n  data() {\n    return {\n      capitalizedText: ''\n    };\n  }\n};\n<\/script>\n<\/code><\/pre>\n
Bu \u00f6zellik, bile\u015fenlerinizin daha ak\u0131ll\u0131 ve esnek olmas\u0131n\u0131 sa\u011flar. Kullan\u0131c\u0131lar\u0131n farkl\u0131 ihtiya\u00e7lar\u0131na g\u00f6re veri giri\u015fini \u00f6zelle\u015ftirmelerine olanak tan\u0131r. Ayr\u0131ca, birden fazla v-model<\/code> ba\u011flamas\u0131 kullan\u0131yorsan\u0131z, her bir v-model<\/code> i\u00e7in ayr\u0131 bir de\u011fi\u015ftirici prop’u olacakt\u0131r: \u00f6rne\u011fin, v-model:foo.bar=\"value\"<\/code> i\u00e7in fooModifiers: { bar: true }<\/code> \u015feklinde bir prop al\u0131rs\u0131n\u0131z. Bu, Vue’nun ne kadar d\u00fc\u015f\u00fcn\u00fclerek tasarland\u0131\u011f\u0131n\u0131 ve geli\u015ftiricilere ne kadar kontrol imkan\u0131 sundu\u011funu g\u00f6steren harika bir \u00f6rnektir.<\/p>\n
Ger\u00e7ek D\u00fcnya Senaryolar\u0131 ve \u0130pu\u00e7lar\u0131<\/h2>\n
v-model<\/code> deste\u011fi eklemek, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, \u00f6zel bile\u015fenlerinizi daha kullan\u0131\u015fl\u0131 ve y\u00f6netilebilir hale getirir. Ger\u00e7ek d\u00fcnya senaryolar\u0131nda bu yetene\u011fi kullanarak, daha temiz kod tabanlar\u0131 olu\u015fturabilir ve geli\u015ftirme verimlili\u011fini art\u0131rabilirsiniz. \u0130\u015fte baz\u0131 pratik uygulamalar ve ipu\u00e7lar\u0131:<\/p>\n
Form Bile\u015fenleri ve Validasyon Entegrasyonu<\/h3>\n
\u00d6zel bir form bile\u015feni, \u00f6rne\u011fin bir adres giri\u015fi (sokak, \u015fehir, posta kodu) veya bir kredi kart\u0131 formu (kart numaras\u0131, son kullanma tarihi, CVV) gibi birden fazla alan\u0131 kapsayabilir. Bu t\u00fcr bile\u015fenlerde v-model<\/code> kullanmak, ana bile\u015fenin bu karma\u015f\u0131k veri yap\u0131s\u0131n\u0131 tek bir de\u011fi\u015fkenle y\u00f6netmesini sa\u011flar. \u00d6rne\u011fin, bir AddressInput<\/code> bile\u015feni, v-model:street=\"address.street\"<\/code>, v-model:city=\"address.city\"<\/code> ve v-model:zip=\"address.zip\"<\/code> gibi birden fazla v-model<\/code> ba\u011flamas\u0131 kullanarak t\u00fcm adres bilgilerini y\u00f6netebilir.<\/p>\n
Validasyon (do\u011frulama) entegrasyonu, form bile\u015fenlerinin ayr\u0131lmaz bir par\u00e7as\u0131d\u0131r. \u00d6zel bile\u015fenlerinizde v-model<\/code> kullan\u0131rken, validasyon mant\u0131\u011f\u0131n\u0131 bile\u015fenin i\u00e7ine dahil edebilirsiniz. \u00d6rne\u011fin, bir EmailInput<\/code> bile\u015feni, modelValue<\/code> prop’u arac\u0131l\u0131\u011f\u0131yla e-posta adresini al\u0131rken, ayn\u0131 zamanda bu e-postan\u0131n ge\u00e7erli bir formatta olup olmad\u0131\u011f\u0131n\u0131 kontrol edebilir. Ge\u00e7ersiz bir giri\u015f durumunda, bile\u015fen i\u00e7inden bir hata mesaj\u0131 g\u00f6sterebilir veya ana bile\u015fene bir validation-error<\/code> olay\u0131 yayabilir. Bu, kullan\u0131c\u0131 geri bildirimini an\u0131nda sa\u011flaman\u0131za ve formun genel ge\u00e7erlili\u011fini y\u00f6netmenize yard\u0131mc\u0131 olur. Ayr\u0131ca, bu yakla\u015f\u0131m, validasyon mant\u0131\u011f\u0131n\u0131 ilgili bile\u015fenle birlikte tutarak kodun mod\u00fclerli\u011fini art\u0131r\u0131r.<\/p>\n
Birden fazla v-model<\/code> kullanan bir bile\u015fende, t\u00fcm alanlar\u0131n ge\u00e7erli olup olmad\u0131\u011f\u0131n\u0131 kontrol eden bir metot tan\u0131mlayabilir ve bu durumu ana bile\u015fene bir prop veya olay arac\u0131l\u0131\u011f\u0131yla bildirebilirsiniz. Bu, ana formun t\u00fcm alt bile\u015fenlerinin ge\u00e7erli olup olmad\u0131\u011f\u0131n\u0131 tek bir yerden kontrol etmesini sa\u011flar. \u00d6rne\u011fin, bir UserRegistrationForm<\/code> bile\u015feni, i\u00e7indeki EmailInput<\/code>, PasswordInput<\/code> ve AddressInput<\/code> gibi \u00f6zel bile\u015fenlerin her birinin kendi v-model<\/code>‘i ve validasyon mant\u0131\u011f\u0131na sahip olmas\u0131n\u0131 sa\u011flayarak, son kullan\u0131c\u0131 deneyimini \u00f6nemli \u00f6l\u00e7\u00fcde iyile\u015ftirebilir.<\/p>\n
Eri\u015filebilirlik ve Mobil Uyumluluk<\/h3>\n
Web uygulamalar\u0131 geli\u015ftirirken eri\u015filebilirlik (Accessibility – A11y) ve mobil uyumluluk (Responsive Design) vazge\u00e7ilmez unsurlard\u0131r. \u00d6zel bile\u015fenlerinize v-model<\/code> deste\u011fi eklerken, bu konular\u0131 g\u00f6z ard\u0131 etmemek \u00f6nemlidir. Semantik HTML kullan\u0131m\u0131, eri\u015filebilirli\u011fin temelidir. \u00d6rne\u011fin, <label><\/code> etiketlerini for<\/code> niteli\u011fi ile ilgili form eleman\u0131na ba\u011flamak, ekran okuyucular\u0131n formu do\u011fru bir \u015fekilde anlamas\u0131na yard\u0131mc\u0131 olur. \u00d6zel giri\u015f bile\u015fenlerinizde aria-*<\/code> niteliklerini (\u00f6rne\u011fin, aria-describedby<\/code>, aria-invalid<\/code>) do\u011fru bir \u015fekilde kullanmak, engelli kullan\u0131c\u0131lar i\u00e7in daha iyi bir deneyim sunar.<\/p>\n
Mobil uyumluluk a\u00e7\u0131s\u0131ndan, \u00f6zel bile\u015fenlerinizin farkl\u0131 ekran boyutlar\u0131nda ve cihazlarda iyi g\u00f6r\u00fcnmesini sa\u011flamak kritik \u00f6neme sahiptir. Bu genellikle CSS media query’leri ile sa\u011flan\u0131r, ancak HTML yap\u0131n\u0131z\u0131n da buna uygun olmas\u0131 gerekir. Esnek kutu modeli (Flexbox) veya \u0131zgara modeli (CSS Grid) gibi modern CSS d\u00fczenleme tekniklerini kullanarak, bile\u015fenlerinizin i\u00e7eri\u011finin farkl\u0131 ekran boyutlar\u0131na dinamik olarak uyum sa\u011flamas\u0131n\u0131 sa\u011flayabilirsiniz. \u00d6rne\u011fin, mobil cihazlarda yan yana duran form elemanlar\u0131n\u0131 alt alta s\u0131ralamak veya daha b\u00fcy\u00fck ekranlarda daha fazla s\u00fctun kullanmak gibi d\u00fczen de\u011fi\u015fiklikleri, kullan\u0131c\u0131 deneyimini b\u00fcy\u00fck \u00f6l\u00e7\u00fcde iyile\u015ftirir. Unutmay\u0131n, iyi tasarlanm\u0131\u015f ve eri\u015filebilir \u00f6zel bile\u015fenler, uygulaman\u0131z\u0131n kalitesini ve kullan\u0131c\u0131 memnuniyetini do\u011frudan etkiler.<\/p>\n
v-model<\/code> ile olu\u015fturdu\u011funuz \u00f6zel bile\u015fenlerin, klavye navigasyonu ve dokunmatik ekran etkile\u015fimleri i\u00e7in de optimize edildi\u011finden emin olun. \u00d6rne\u011fin, bir \u00f6zel se\u00e7ici bile\u015feni, klavye ok tu\u015flar\u0131yla se\u00e7enekler aras\u0131nda gezinmeye ve Enter tu\u015fuyla se\u00e7im yapmaya izin vermelidir. Dokunmatik cihazlarda ise, b\u00fcy\u00fck dokunma hedefleri ve sezgisel kayd\u0131rma\/kayd\u0131rma davran\u0131\u015flar\u0131 sa\u011flamak \u00f6nemlidir. Bu detaylar, uygulaman\u0131z\u0131n herkes i\u00e7in kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar ve modern web standartlar\u0131na uygunlu\u011funu art\u0131r\u0131r.<\/p>\n
Sonu\u00e7 ve S\u0131k\u00e7a Sorulan Sorular<\/h2>\n
Vue.js’de \u00f6zel bile\u015fenlere v-model<\/code> deste\u011fi eklemek, geli\u015ftirme s\u00fcrecinizi \u00f6nemli \u00f6l\u00e7\u00fcde basitle\u015ftiren ve kodunuzu daha mod\u00fcler hale getiren g\u00fc\u00e7l\u00fc bir yakla\u015f\u0131md\u0131r. Bu makalede, v-model<\/code>‘in temel prensiplerinden ba\u015flayarak, tek ve \u00e7oklu de\u011ferler i\u00e7in nas\u0131l uygulanaca\u011f\u0131n\u0131, \u00f6zel de\u011fi\u015ftiricilerle nas\u0131l zenginle\u015ftirilece\u011fini ve ger\u00e7ek d\u00fcnya senaryolar\u0131nda nas\u0131l kullan\u0131laca\u011f\u0131n\u0131 detayl\u0131 bir \u015fekilde inceledik. Vue 3’\u00fcn modelValue<\/code> prop’u ve update:modelValue<\/code> olay standard\u0131 sayesinde, kendi bile\u015fenlerinizi standart HTML form elemanlar\u0131 gibi davranacak \u015fekilde tasarlayabilir, b\u00f6ylece geli\u015ftirici deneyimini iyile\u015ftirebilirsiniz. Bu yetenek, karma\u015f\u0131k formlar\u0131n, ayar panellerinin veya etkile\u015fimli aray\u00fcz elemanlar\u0131n\u0131n geli\u015ftirilmesinde size b\u00fcy\u00fck esneklik sunar.<\/p>\n
Unutmay\u0131n ki iyi tasarlanm\u0131\u015f bir \u00f6zel bile\u015fen sadece i\u015flevsel olmakla kalmaz, ayn\u0131 zamanda eri\u015filebilir ve mobil uyumlu olmal\u0131d\u0131r. Semantik HTML kullan\u0131m\u0131, do\u011fru aria-*<\/code> nitelikleri ve duyarl\u0131 tasar\u0131m prensipleri, uygulaman\u0131z\u0131n geni\u015f bir kullan\u0131c\u0131 kitlesi taraf\u0131ndan kullan\u0131labilir olmas\u0131n\u0131 sa\u011flar. v-model<\/code>‘i do\u011fru bir \u015fekilde uygulayarak, Vue.js uygulamalar\u0131n\u0131zda veri ak\u0131\u015f\u0131n\u0131 kolayla\u015ft\u0131rabilir, kod tekrar\u0131n\u0131 azaltabilir ve daha s\u00fcrd\u00fcr\u00fclebilir bir mimari olu\u015fturabilirsiniz. Bu teknikleri projelerinizde kullanarak, daha verimli ve keyifli bir geli\u015ftirme deneyimi ya\u015fayaca\u011f\u0131n\u0131zdan emin olabilirsiniz.<\/p>\n
S\u0131k\u00e7a Sorulan Sorular (SSS)<\/h3>\n