{"id":37644,"date":"2026-01-11T13:40:45","date_gmt":"2026-01-11T10:40:45","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37644"},"modified":"2026-01-11T13:40:45","modified_gmt":"2026-01-11T10:40:45","slug":"vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/","title":{"rendered":"Vue.js’te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131"},"content":{"rendered":"

<\/p>\n

Vue.js’te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131<\/h2>\n
Vue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in a\u015famal\u0131 olarak benimsenebilen bir JavaScript framework’\u00fcd\u00fcr. Veri ba\u011flama (data binding), Vue’nun temel \u00f6zelliklerinden biridir ve uygulaman\u0131z\u0131n veri katman\u0131 ile DOM (Document Object Model) aras\u0131ndaki senkronizasyonu sa\u011flar. Bu makalede, Vue.js’in en g\u00fc\u00e7l\u00fc ve en s\u0131k kullan\u0131lan direktiflerinden biri olan `v-model<\/code>‘\u0131, \u00f6zellikle form elemanlar\u0131 ve \u00f6zel bile\u015fenlerde iki y\u00f6nl\u00fc veri ba\u011flama (two-way data binding) amac\u0131yla nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131 derinlemesine inceleyece\u011fiz.<\/p>\n`

Giri\u015f: Veri Ba\u011flama ve \u0130ki Y\u00f6nl\u00fc Ba\u011flama Nedir?<\/h3>\nModern web uygulamalar\u0131nda, kullan\u0131c\u0131 etkile\u015fimleri ve veri ak\u0131\u015f\u0131 olduk\u00e7a \u00f6nemlidir. Kullan\u0131c\u0131lar\u0131n girdi\u011fi verileri an\u0131nda uygulaman\u0131n durumuna yans\u0131tmak ve uygulaman\u0131n durumundaki de\u011fi\u015fiklikleri de an\u0131nda kullan\u0131c\u0131 aray\u00fcz\u00fcne (UI) yans\u0131tmak, dinamik ve etkile\u015fimli bir deneyim sunar. \u0130\u015fte burada veri ba\u011flama devreye girer.<\/p>\n Temelde iki t\u00fcr veri ba\u011flama vard\u0131r:<\/p>\n 1. Tek Y\u00f6nl\u00fc Veri Ba\u011flama (One-Way Data Binding):<\/strong> Veri ak\u0131\u015f\u0131 tek bir y\u00f6ndedir. Genellikle uygulaman\u0131n veri katman\u0131ndan (state) UI’a do\u011frudur. Vue’da v-bind<\/code> (k\u0131saca :<\/code>) direktifi ile bir prop’u veya HTML \u00f6zniteli\u011fini dinamik olarak bir veri \u00f6zelli\u011fine ba\u011flayabilirsiniz. Veri de\u011fi\u015fti\u011finde UI g\u00fcncellenir, ancak UI’daki bir de\u011fi\u015fiklik veriyi do\u011frudan etkilemez.<\/p>\n 2. \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama (Two-Way Data Binding):<\/strong> Veri ak\u0131\u015f\u0131 \u00e7ift y\u00f6nl\u00fcd\u00fcr. Hem uygulaman\u0131n veri katman\u0131ndan UI’a hem de UI’dan uygulaman\u0131n veri katman\u0131na do\u011fru \u00e7al\u0131\u015f\u0131r. Bu, \u00f6zellikle form elemanlar\u0131yla \u00e7al\u0131\u015f\u0131rken b\u00fcy\u00fck kolayl\u0131k sa\u011flar. Kullan\u0131c\u0131 bir input alan\u0131na veri girdi\u011finde, bu veri an\u0131nda uygulaman\u0131n veri modeline yans\u0131r; veri modelindeki bir de\u011fi\u015fiklik de an\u0131nda input alan\u0131na yans\u0131r.<\/p>\n Vue.js’te iki y\u00f6nl\u00fc veri ba\u011flaman\u0131n anahtar\u0131 v-model<\/code> direktifidir. v-model<\/code>, temelde bir HTML eleman\u0131n\u0131n value<\/code> \u00f6zelli\u011fini bir veri \u00f6zelli\u011fine ba\u011flayan (v-bind:value<\/code>) ve eleman\u0131n input<\/code> veya change<\/code> olay\u0131n\u0131 dinleyerek veri \u00f6zelli\u011fini g\u00fcncelleyen (v-on:input<\/code> veya v-on:change<\/code>) bir s\u00f6zdizimsel kolayla\u015ft\u0131r\u0131c\u0131 (syntactic sugar) olarak i\u015flev g\u00f6r\u00fcr. Bu, form verilerini y\u00f6netmeyi son derece basit ve sezgisel hale getirir.<\/p>\n v-model’in Temelleri: Nas\u0131l \u00c7al\u0131\u015f\u0131r?<\/h3>\nv-model<\/code> direktifi, \u00f6zellikle <\/code>, <\/code> ve <code><select><\/code> gibi form elemanlar\u0131nda kullan\u0131l\u0131r. En basit haliyle, bir metin giri\u015f alan\u0131n\u0131 bir Vue veri \u00f6zelli\u011fiyle ba\u011flamak i\u00e7in a\u015fa\u011f\u0131daki gibi kullan\u0131l\u0131r:<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <input type=\"text\" v-model=\"mesaj\">\n <p>Mesaj\u0131n\u0131z: {{ mesaj }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n mesaj: 'Merhaba Vue!'\n }\n }\n}).mount('#app');<\/code><\/pre>\n<p>Yukar\u0131daki \u00f6rnekte:<br \/>\n* <code>mesaj<\/code> veri \u00f6zelli\u011fi, input alan\u0131n\u0131n ba\u015flang\u0131\u00e7 de\u011ferini belirler.<br \/>\n* Kullan\u0131c\u0131 input alan\u0131na yaz\u0131 yazd\u0131\u011f\u0131nda, <code>mesaj<\/code> veri \u00f6zelli\u011fi an\u0131nda g\u00fcncellenir.<br \/>\n* <code>mesaj<\/code> veri \u00f6zelli\u011fi programatik olarak g\u00fcncellendi\u011finde (\u00f6rne\u011fin bir metot \u00e7a\u011fr\u0131s\u0131 ile), input alan\u0131ndaki de\u011fer de otomatik olarak g\u00fcncellenir.<\/p>\n<p>Bu basit kullan\u0131m, <code>v-model<\/code>‘in g\u00fcc\u00fcn\u00fc ve form y\u00f6netimini ne kadar kolayla\u015ft\u0131rd\u0131\u011f\u0131n\u0131 g\u00f6stermektedir. Vue, arka planda bu direktifi \u015fu \u015fekilde yorumlar:<\/p>\n<pre><code class=\"language-html\"><input\n :value=\"mesaj\"\n @input=\"event => mesaj = event.target.value\"\n><\/code><\/pre>\n<p>Yani, <code>v-model<\/code> asl\u0131nda <code>v-bind:value<\/code> ve <code>v-on:input<\/code> (veya duruma g\u00f6re <code>v-on:change<\/code>) ikilisinin k\u0131sa yaz\u0131m\u0131d\u0131r. Bu mekanizmay\u0131 anlamak, <code>v-model<\/code>‘i \u00f6zel bile\u015fenlerde kullan\u0131rken veya daha karma\u015f\u0131k senaryolarla kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131zda \u00e7ok faydal\u0131 olacakt\u0131r.<\/p>\n<h3>v-model ile Farkl\u0131 HTML Form Elemanlar\u0131<\/h3>\n<p><code>v-model<\/code>, farkl\u0131 HTML form elemanlar\u0131 i\u00e7in otomatik olarak uygun <code>value<\/code> \u00f6zniteli\u011fini ve olay dinleyicisini se\u00e7er.<\/p>\n<h4>Text Input (input type=”text”, “email”, “password”, vb.)<\/h4>\n<p>Metin tabanl\u0131 input alanlar\u0131 i\u00e7in <code>v-model<\/code>, <code>value<\/code> \u00f6zniteli\u011fini ve <code>input<\/code> olay\u0131n\u0131 kullan\u0131r.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <input type=\"text\" v-model=\"kullaniciAdi\" placeholder=\"Kullan\u0131c\u0131 Ad\u0131\">\n <input type=\"email\" v-model=\"emailAdresi\" placeholder=\"E-posta\">\n <p>Kullan\u0131c\u0131 Ad\u0131: {{ kullaniciAdi }}<\/p>\n <p>E-posta: {{ emailAdresi }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n kullaniciAdi: '',\n emailAdresi: ''\n }\n }\n}).mount('#app');<\/code><\/pre>\n<h4>Textarea<\/h4>\n<p><code><textarea><\/code> elemanlar\u0131 i\u00e7in de <code>v-model<\/code> ayn\u0131 \u015fekilde \u00e7al\u0131\u015f\u0131r ve <code>value<\/code> ile <code>input<\/code> olay\u0131n\u0131 kullan\u0131r.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <textarea v-model=\"yorum\" placeholder=\"Yorumunuzu buraya yaz\u0131n...\"><\/textarea>\n <p>Yorumunuz: {{ yorum }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n yorum: ''\n }\n }\n}).mount('#app');<\/code><\/pre>\n<h4>Checkbox (Tekli)<\/h4>\n<p>Tek bir onay kutusu i\u00e7in <code>v-model<\/code>, bir Boolean de\u011feriyle \u00e7al\u0131\u015f\u0131r. <code>checked<\/code> \u00f6zniteli\u011fini ve <code>change<\/code> olay\u0131n\u0131 kullan\u0131r.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <input type=\"checkbox\" id=\"kabul\" v-model=\"sozlesmeKabul\">\n <label for=\"kabul\">\u015eartlar\u0131 kabul ediyorum<\/label>\n <p>\u015eartlar kabul edildi mi? {{ sozlesmeKabul ? 'Evet' : 'Hay\u0131r' }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n sozlesmeKabul: false\n }\n }\n}).mount('#app');<\/code><\/pre>\n<h4>Checkboxes (\u00c7oklu)<\/h4>\n<p>Birden fazla onay kutusunu bir diziye ba\u011flamak i\u00e7in ayn\u0131 <code>v-model<\/code> \u00f6zelli\u011fini kullan\u0131r\u0131z. Her bir onay kutusunun <code>value<\/code> \u00f6zniteli\u011fine farkl\u0131 bir de\u011fer vermeniz ve <code>v-model<\/code>‘\u0131 bir diziye ba\u011flaman\u0131z gerekir.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <h3>Sevdi\u011finiz Meyveler:<\/h3>\n <input type=\"checkbox\" id=\"elma\" value=\"elma\" v-model=\"seciliMeyveler\">\n <label for=\"elma\">Elma<\/label><br>\n <input type=\"checkbox\" id=\"muz\" value=\"muz\" v-model=\"seciliMeyveler\">\n <label for=\"muz\">Muz<\/label><br>\n <input type=\"checkbox\" id=\"portakal\" value=\"portakal\" v-model=\"seciliMeyveler\">\n <label for=\"portakal\">Portakal<\/label><br>\n\n <p>Se\u00e7ilen Meyveler: {{ seciliMeyveler }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n seciliMeyveler: [] \/\/ Ba\u015flang\u0131\u00e7ta bo\u015f bir dizi\n }\n }\n}).mount('#app');<\/code><\/pre>\n<p>Kullan\u0131c\u0131 onay kutular\u0131n\u0131 i\u015faretledik\u00e7e, <code>seciliMeyveler<\/code> dizisi ilgili de\u011ferlerle g\u00fcncellenecektir.<\/p>\n<h4>Radio Button<\/h4>\n<p>Radyo d\u00fc\u011fmeleri i\u00e7in <code>v-model<\/code>, se\u00e7ilen radyo d\u00fc\u011fmesinin <code>value<\/code> \u00f6zniteli\u011fini veri \u00f6zelli\u011fine ba\u011flar. T\u00fcm radyo d\u00fc\u011fmelerinin <code>v-model<\/code>‘\u0131 ayn\u0131 veri \u00f6zelli\u011fine ba\u011flanmal\u0131d\u0131r.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <h3>Tercih Etti\u011finiz Cinsiyet:<\/h3>\n <input type=\"radio\" id=\"erkek\" value=\"erkek\" v-model=\"cinsiyet\">\n <label for=\"erkek\">Erkek<\/label><br>\n <input type=\"radio\" id=\"kadin\" value=\"kadin\" v-model=\"cinsiyet\">\n <label for=\"kadin\">Kad\u0131n<\/label><br>\n <input type=\"radio\" id=\"diger\" value=\"diger\" v-model=\"cinsiyet\">\n <label for=\"diger\">Di\u011fer<\/label><br>\n\n <p>Se\u00e7ilen Cinsiyet: {{ cinsiyet }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n cinsiyet: '' \/\/ Ba\u015flang\u0131\u00e7ta bo\u015f\n }\n }\n}).mount('#app');<\/code><\/pre>\n<h4>Select (Tek Se\u00e7im)<\/h4>\n<p>Tek se\u00e7imli <code><select><\/code> elemanlar\u0131 i\u00e7in <code>v-model<\/code>, se\u00e7ilen <code><option><\/code>‘\u0131n <code>value<\/code> \u00f6zniteli\u011fini veri \u00f6zelli\u011fine ba\u011flar.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <h3>Favori Renginiz:<\/h3>\n <select v-model=\"favoriRenk\">\n <option disabled value=\"\">L\u00fctfen birini se\u00e7in<\/option>\n <option value=\"kirmizi\">K\u0131rm\u0131z\u0131<\/option>\n <option value=\"mavi\">Mavi<\/option>\n <option value=\"yesil\">Ye\u015fil<\/option>\n <\/select>\n <p>Favori Renginiz: {{ favoriRenk }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n favoriRenk: ''\n }\n }\n}).mount('#app');<\/code><\/pre>\n<h4>Select (\u00c7oklu Se\u00e7im)<\/h4>\n<p>\u00c7oklu se\u00e7imli <code><select><\/code> elemanlar\u0131 i\u00e7in <code>v-model<\/code>, se\u00e7ilen <code><option><\/code>‘lar\u0131n <code>value<\/code> \u00f6zniteliklerini i\u00e7eren bir diziye ba\u011flan\u0131r. <code><select><\/code> eleman\u0131na <code>multiple<\/code> \u00f6zniteli\u011fini eklemeyi unutmay\u0131n.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <h3>Se\u00e7ti\u011finiz \u015eehirler:<\/h3>\n <select v-model=\"seciliSehirler\" multiple>\n <option value=\"istanbul\">\u0130stanbul<\/option>\n <option value=\"ankara\">Ankara<\/option>\n <option value=\"izmir\">\u0130zmir<\/option>\n <option value=\"bursa\">Bursa<\/option>\n <\/select>\n <p>Se\u00e7ilen \u015eehirler: {{ seciliSehirler }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n seciliSehirler: []\n }\n }\n}).mount('#app');<\/code><\/pre>\n<h3>v-model De\u011fi\u015ftiricileri (Modifiers)<\/h3>\n<p><code>v-model<\/code>, baz\u0131 \u00f6zel durumlar i\u00e7in kullan\u0131\u015fl\u0131 de\u011fi\u015ftiriciler (modifiers) sunar: <code>.lazy<\/code>, <code>.number<\/code> ve <code>.trim<\/code>. Bu de\u011fi\u015ftiriciler, veri ba\u011flama davran\u0131\u015f\u0131n\u0131 daha hassas bir \u015fekilde kontrol etmenizi sa\u011flar.<\/p>\n<h4>.lazy<\/h4>\n<p>Varsay\u0131lan olarak, <code>v-model<\/code> metin giri\u015flerinde her <code>input<\/code> olay\u0131nda veriyi g\u00fcnceller. Bu, kullan\u0131c\u0131n\u0131n her tu\u015f vuru\u015funda modelin g\u00fcncellendi\u011fi anlam\u0131na gelir. <code>.lazy<\/code> de\u011fi\u015ftiricisi, bu davran\u0131\u015f\u0131 <code>change<\/code> olay\u0131na ta\u015f\u0131r. Yani, veri yaln\u0131zca input alan\u0131 oda\u011f\u0131n\u0131 kaybetti\u011finde (blur oldu\u011funda) veya <code>Enter<\/code> tu\u015funa bas\u0131ld\u0131\u011f\u0131nda g\u00fcncellenir.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <input type=\"text\" v-model.lazy=\"mesajLazy\">\n <p>Lazy Mesaj: {{ mesajLazy }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n mesajLazy: ''\n }\n }\n}).mount('#app');<\/code><\/pre>\n<p>Bu, \u00f6zellikle performans a\u00e7\u0131s\u0131ndan yo\u011fun veya anl\u0131k g\u00fcncellemelerin istenmedi\u011fi durumlarda faydal\u0131 olabilir.<\/p>\n<h4>.number<\/h4>\n<p>HTML input elemanlar\u0131ndan gelen kullan\u0131c\u0131 giri\u015fi her zaman bir dizedir (string), hatta <code>type=\"number\"<\/code> olsa bile. <code>.number<\/code> de\u011fi\u015ftiricisi, kullan\u0131c\u0131 giri\u015fini otomatik olarak bir say\u0131ya d\u00f6n\u00fc\u015ft\u00fcrmeye \u00e7al\u0131\u015f\u0131r. E\u011fer d\u00f6n\u00fc\u015f\u00fcm ba\u015far\u0131s\u0131z olursa, orijinal dize de\u011feri kullan\u0131l\u0131r.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <input type=\"number\" v-model.number=\"yas\">\n <p>Ya\u015f\u0131n\u0131z: {{ yas }} (Tipi: {{ typeof yas }})<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n yas: 0\n }\n }\n}).mount('#app');<\/code><\/pre>\n<p>Bu de\u011fi\u015ftirici, say\u0131sal de\u011ferlerle i\u015flem yaparken (<code>yas + 1<\/code> gibi) tip d\u00f6n\u00fc\u015f\u00fcm\u00fc hatalar\u0131n\u0131 \u00f6nlemek i\u00e7in \u00e7ok kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n<h4>.trim<\/h4>\n<p><code>.trim<\/code> de\u011fi\u015ftiricisi, kullan\u0131c\u0131n\u0131n girdi\u011fi metnin ba\u015f\u0131ndaki ve sonundaki bo\u015fluklar\u0131 otomatik olarak kald\u0131r\u0131r.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <input type=\"text\" v-model.trim=\"kullaniciGiris\">\n <p>Giri\u015finiz: \"{{ kullaniciGiris }}\"<\/p>\n <p>Giri\u015finizin uzunlu\u011fu: {{ kullaniciGiris.length }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n kullaniciGiris: ''\n }\n }\n}).mount('#app');<\/code><\/pre>\n<p>Bu, \u00f6zellikle kullan\u0131c\u0131 ad\u0131, e-posta gibi alanlarda istenmeyen bo\u015fluklar\u0131 temizlemek i\u00e7in pratik bir y\u00f6ntemdir.<\/p>\n<h3>v-model ile Bile\u015fenlerde \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama (Custom Components)<\/h3>\n<p><code>v-model<\/code>, sadece yerel HTML elemanlar\u0131 i\u00e7in de\u011fil, ayn\u0131 zamanda \u00f6zel Vue bile\u015fenlerinde de iki y\u00f6nl\u00fc veri ba\u011flama sa\u011flamak i\u00e7in kullan\u0131labilir. Bu, bile\u015fenler aras\u0131nda veri ak\u0131\u015f\u0131n\u0131 y\u00f6netirken \u00e7ok g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r.<\/p>\n<h4>Temel Bile\u015fen Kullan\u0131m\u0131<\/h4>\n<p>Vue 3’te bir bile\u015fende <code>v-model<\/code> kullan\u0131ld\u0131\u011f\u0131nda, varsay\u0131lan olarak \u015fu kurallar i\u015fler:<br \/>\n* Bile\u015fen, <code>modelValue<\/code> ad\u0131nda bir prop kabul eder. Bu prop, <code>v-model<\/code>‘in ba\u011fland\u0131\u011f\u0131 veri \u00f6zelli\u011fini temsil eder.<br \/>\n* Bile\u015fen, <code>update:modelValue<\/code> ad\u0131nda bir olay (event) yayar. Bu olay, <code>v-model<\/code>‘in ba\u011fl\u0131 oldu\u011fu veri \u00f6zelli\u011fini g\u00fcncellemek i\u00e7in kullan\u0131l\u0131r. Olay yay\u0131l\u0131rken yeni de\u011fer arg\u00fcman olarak ge\u00e7irilir.<\/p>\n<p>\u00d6rnek bir <code>TextInput<\/code> bile\u015feni olu\u015ftural\u0131m:<\/p>\n<pre><code class=\"language-vue\">\n<template>\n <input\n type=\"text\"\n :value=\"modelValue\"\n @input=\"$emit('update:modelValue', $event.target.value)\"\n \/>\n<\/template>\n\n<script>\nexport default {\n props: ['modelValue'], \/\/ v-model taraf\u0131ndan sa\u011flanan de\u011fer\n emits: ['update:modelValue'] \/\/ v-model'i g\u00fcncellemek i\u00e7in olay\n};\n<\/script><\/code><\/pre>\n<p>\u015eimdi bu bile\u015feni ana uygulamam\u0131zda <code>v-model<\/code> ile kullanal\u0131m:<\/p>\n<pre><code class=\"language-html\">\n<div id=\"app\">\n <h3>\u00d6zel Metin Giri\u015fi:<\/h3>\n <text-input v-model=\"kullaniciMesaji\"><\/text-input>\n <p>Kullan\u0131c\u0131 Mesaj\u0131: {{ kullaniciMesaji }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ main.js veya app.js\nimport { createApp } from 'vue';\nimport TextInput from '.\/TextInput.vue'; \/\/ Bile\u015feni import edin\n\nconst app = createApp({\n data() {\n return {\n kullaniciMesaji: 'Merhaba \u00f6zel bile\u015fen!'\n }\n },\n components: {\n TextInput\n }\n});\napp.mount('#app');<\/code><\/pre>\n<p>Bu \u00f6rnekte, <code>text-input<\/code> bile\u015feni <code>kullaniciMesaji<\/code> veri \u00f6zelli\u011fi ile iki y\u00f6nl\u00fc olarak ba\u011flanm\u0131\u015ft\u0131r. <code>TextInput<\/code> bile\u015feni <code>modelValue<\/code> prop’unu al\u0131r ve bir <code>input<\/code> olay\u0131 tetiklendi\u011finde <code>update:modelValue<\/code> olay\u0131n\u0131 yayar.<\/p>\n<h4>modelValue ve update:modelValue \u0130simlerini De\u011fi\u015ftirme (Birden Fazla v-model)<\/h4>\n<p>Bazen bir bile\u015fende birden fazla iki y\u00f6nl\u00fc ba\u011flamaya ihtiyac\u0131n\u0131z olabilir veya <code>modelValue<\/code> ve <code>update:modelValue<\/code> varsay\u0131lan isimlerini de\u011fi\u015ftirmek isteyebilirsiniz. Vue 3’te bunu, bile\u015fenin <code>model<\/code> se\u00e7ene\u011fini kullanarak veya do\u011frudan <code>v-model:argument<\/code> s\u00f6zdizimini kullanarak yapabilirsiniz.<\/p>\n<p><strong>1. <code>model<\/code> Se\u00e7ene\u011fi ile (Vue 2 tarz\u0131, Vue 3’te de desteklenir):<\/strong><br \/>\nBile\u015fenin <code>model<\/code> se\u00e7ene\u011fi ile <code>prop<\/code> ve <code>event<\/code> isimlerini \u00f6zelle\u015ftirebilirsiniz.<\/p>\n<pre><code class=\"language-vue\">\n<template>\n <input\n type=\"text\"\n :value=\"customValue\"\n @input=\"$emit('update:customValue', $event.target.value)\"\n \/>\n<\/template>\n\n<script>\nexport default {\n props: {\n customValue: String \/\/ \u00d6zelle\u015ftirilmi\u015f prop ad\u0131\n },\n emits: ['update:customValue'] \/\/ \u00d6zelle\u015ftirilmi\u015f olay ad\u0131\n};\n<\/script><\/code><\/pre>\n<p>Kullan\u0131m:<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <custom-input v-model:customValue=\"verim\"><\/custom-input>\n <p>Verim: {{ verim }}<\/p>\n<\/div><\/code><\/pre>\n<p><strong>2. Do\u011frudan <code>v-model:argument<\/code> S\u00f6zdizimi ile (Vue 3 Tercih Edilen Y\u00f6ntem):<\/strong><br \/>\nBu y\u00f6ntem, bir bile\u015fende birden fazla <code>v-model<\/code> ba\u011flamas\u0131na izin verir.<\/p>\n<pre><code class=\"language-vue\">\n<template>\n <div>\n <input\n type=\"text\"\n :value=\"firstName\"\n @input=\"$emit('update:firstName', $event.target.value)\"\n placeholder=\"Ad\"\n \/>\n <input\n type=\"text\"\n :value=\"lastName\"\n @input=\"$emit('update:lastName', $event.target.value)\"\n placeholder=\"Soyad\"\n \/>\n <\/div>\n<\/template>\n\n<script>\nexport default {\n props: {\n firstName: String,\n lastName: String\n },\n emits: ['update:firstName', 'update:lastName']\n};\n<\/script><\/code><\/pre>\n<p>Kullan\u0131m:<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <multi-input\n v-model:firstName=\"kullaniciAdi\"\n v-model:lastName=\"kullaniciSoyadi\"\n ><\/multi-input>\n <p>Tam Ad: {{ kullaniciAdi }} {{ kullaniciSoyadi }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ main.js\nimport { createApp } from 'vue';\nimport MultiInput from '.\/MultiInput.vue';\n\nconst app = createApp({\n data() {\n return {\n kullaniciAdi: 'Ahmet',\n kullaniciSoyadi: 'Y\u0131lmaz'\n }\n },\n components: {\n MultiInput\n }\n});\napp.mount('#app');<\/code><\/pre>\n<p>Bu, bile\u015fenlerinizde daha karma\u015f\u0131k form kontrolleri olu\u015ftururken esneklik sa\u011flar.<\/p>\n<h3>v-model’in Arkas\u0131ndaki Mekanizma (Derinlemesine)<\/h3>\n<p>Daha \u00f6nce de belirtildi\u011fi gibi, <code>v-model<\/code> asl\u0131nda <code>v-bind<\/code> ve <code>v-on<\/code> direktiflerinin bir kombinasyonudur. Bu, <code>v-model<\/code> olmadan da iki y\u00f6nl\u00fc veri ba\u011flamay\u0131 manuel olarak uygulayabilece\u011finiz anlam\u0131na gelir. Bu manuel uygulama, <code>v-model<\/code>‘in nas\u0131l \u00e7al\u0131\u015ft\u0131\u011f\u0131n\u0131 daha iyi anlaman\u0131za yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<p>Bir metin giri\u015f alan\u0131 \u00f6rne\u011fini ele alal\u0131m:<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n \n <input type=\"text\" v-model=\"mesajVModel\">\n <p>v-model ile: {{ mesajVModel }}<\/p>\n\n \n <input\n type=\"text\"\n :value=\"mesajManuel\"\n @input=\"event => mesajManuel = event.target.value\"\n >\n <p>Manuel olarak: {{ mesajManuel }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">const app = Vue.createApp({\n data() {\n return {\n mesajVModel: 'Merhaba v-model!',\n mesajManuel: 'Merhaba manuel!'\n }\n }\n}).mount('#app');<\/code><\/pre>\n<p>Her iki input alan\u0131 da ayn\u0131 \u015fekilde \u00e7al\u0131\u015facakt\u0131r. <code>v-model<\/code>‘in sa\u011flad\u0131\u011f\u0131 kolayl\u0131k, \u00f6zellikle \u00e7ok say\u0131da form eleman\u0131 oldu\u011funda veya bile\u015fenler aras\u0131 ileti\u015fimde kendini g\u00f6sterir. Manuel yakla\u015f\u0131m, daha az kod yaz\u0131m\u0131na olanak tan\u0131yan <code>v-model<\/code>‘in neden “s\u00f6zdizimsel kolayla\u015ft\u0131r\u0131c\u0131” olarak adland\u0131r\u0131ld\u0131\u011f\u0131n\u0131 a\u00e7\u0131k\u00e7a g\u00f6stermektedir.<\/p>\n<p>Bu mekanizma, <code>v-model<\/code> de\u011fi\u015ftiricileri i\u00e7in de ge\u00e7erlidir. \u00d6rne\u011fin, <code>v-model.lazy<\/code> asl\u0131nda <code>@input<\/code> yerine <code>@change<\/code> olay\u0131n\u0131 kullan\u0131r:<\/p>\n<pre><code class=\"language-html\"><input\n type=\"text\"\n :value=\"mesajLazy\"\n @change=\"event => mesajLazy = event.target.value\"\n><\/code><\/pre>\n<p>Ve <code>v-model.number<\/code> ise <code>event.target.value<\/code> de\u011ferini <code>Number()<\/code> fonksiyonu ile i\u015fler:<\/p>\n<pre><code class=\"language-html\"><input\n type=\"text\"\n :value=\"yas\"\n @input=\"event => yas = Number(event.target.value)\"\n><\/code><\/pre>\n<p>Bu derinlemesine anlay\u0131\u015f, <code>v-model<\/code>‘in s\u0131n\u0131rlar\u0131n\u0131 zorlad\u0131\u011f\u0131n\u0131zda veya \u00f6zel durumlarla kar\u015f\u0131la\u015ft\u0131\u011f\u0131n\u0131zda size yol g\u00f6sterecektir.<\/p>\n<h3>v-model Kullan\u0131m\u0131n\u0131n Avantajlar\u0131 ve Dezavantajlar\u0131<\/h3>\n<p>Her ara\u00e7 gibi <code>v-model<\/code>‘in de kendine \u00f6zg\u00fc avantajlar\u0131 ve potansiyel dezavantajlar\u0131 vard\u0131r.<\/p>\n<h4>Avantajlar\u0131<\/h4>\n<p>1. <strong>Kolayl\u0131k ve H\u0131z:<\/strong> Form elemanlar\u0131 ile veri \u00f6zelliklerini ba\u011flamak i\u00e7in son derece h\u0131zl\u0131 ve basittir. \u00d6zellikle prototipleme ve h\u0131zl\u0131 geli\u015ftirme s\u00fcre\u00e7lerinde b\u00fcy\u00fck zaman kazand\u0131r\u0131r.<br \/>\n2. <strong>Okunabilirlik:<\/strong> Tek bir direktif ile hem <code>value<\/code> ba\u011flamay\u0131 hem de olay dinlemeyi ifade eder, bu da kodun daha temiz ve okunabilir olmas\u0131n\u0131 sa\u011flar.<br \/>\n3. <strong>Tutarl\u0131l\u0131k:<\/strong> Farkl\u0131 form elemanlar\u0131 (input, textarea, select, checkbox, radio) i\u00e7in tek bir tutarl\u0131 aray\u00fcz sunar.<br \/>\n4. <strong>Otomatik Tip D\u00f6n\u00fc\u015f\u00fcm\u00fc ve Temizleme:<\/strong> <code>.number<\/code> ve <code>.trim<\/code> gibi de\u011fi\u015ftiriciler sayesinde s\u0131k\u00e7a kar\u015f\u0131la\u015f\u0131lan veri i\u015fleme g\u00f6revlerini otomatikle\u015ftirir.<br \/>\n5. <strong>Bile\u015fenler Aras\u0131 \u0130leti\u015fim:<\/strong> \u00d6zel bile\u015fenlerde iki y\u00f6nl\u00fc veri ak\u0131\u015f\u0131n\u0131 standartla\u015ft\u0131r\u0131lm\u0131\u015f bir \u015fekilde y\u00f6netmek i\u00e7in g\u00fc\u00e7l\u00fc bir mekanizma sunar.<\/p>\n<h4>Dezavantajlar\u0131<\/h4>\n<p>1. <strong>“Magic” Hissi ve Abstraksiyon:<\/strong> Yeni ba\u015flayanlar i\u00e7in, arka planda ne oldu\u011fu tam olarak anla\u015f\u0131lmad\u0131\u011f\u0131nda bir “sihir” gibi g\u00f6r\u00fcnebilir. Bu, bazen hata ay\u0131klamay\u0131 zorla\u015ft\u0131rabilir, ancak mekanizmay\u0131 anlad\u0131ktan sonra bu bir sorun olmaktan \u00e7\u0131kar.<br \/>\n2. <strong>A\u00e7\u0131k Veri Ak\u0131\u015f\u0131 Prensibi:<\/strong> Baz\u0131 geli\u015ftiriciler, \u00f6zellikle b\u00fcy\u00fck ve karma\u015f\u0131k uygulamalarda, tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131n\u0131n (Flux\/Redux mimarileri gibi) daha \u00f6ng\u00f6r\u00fclebilir ve izlenebilir oldu\u011funu savunur. <code>v-model<\/code> bu prensibi bir miktar ihlal eder, ancak \u00e7o\u011fu durumda pratik faydalar\u0131 a\u011f\u0131r basar.<br \/>\n3. <strong>Karma\u015f\u0131k State Y\u00f6netimi ile Entegrasyon:<\/strong> Vuex veya Pinia gibi merkezi state y\u00f6netim k\u00fct\u00fcphaneleriyle do\u011frudan <code>v-model<\/code> kullanmak, do\u011frudan bir store \u00f6zelli\u011fini de\u011fi\u015ftirmeye \u00e7al\u0131\u015fmak (mutation) yerine genellikle bir <code>computed<\/code> property (getter\/setter) veya bir action\/mutation \u00e7a\u011fr\u0131s\u0131 gerektirir.<\/p>\n<h3>v-model ve State Y\u00f6netimi (Vuex\/Pinia)<\/h3>\n<p>B\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalarda, uygulaman\u0131n durumunu merkezi bir yerde y\u00f6netmek i\u00e7in Vuex veya Pinia gibi state y\u00f6netim k\u00fct\u00fcphaneleri kullan\u0131l\u0131r. <code>v-model<\/code> ile do\u011frudan bir store \u00f6zelli\u011fini ba\u011flamak genellikle \u00f6nerilmez, \u00e7\u00fcnk\u00fc bu, store’daki state’in do\u011frudan de\u011fi\u015ftirilmesine yol a\u00e7ar ve state’in mutasyonlar\u0131 (de\u011fi\u015fimleri) izlenemez hale gelir.<\/p>\n<p>Bunun yerine, <code>v-model<\/code>‘i bir <code>computed<\/code> property ile kullanmak yayg\u0131n bir desendir. <code>computed<\/code> property’nin <code>get<\/code> (okuma) metodu store’dan de\u011feri al\u0131r, <code>set<\/code> (yazma) metodu ise bir mutasyonu (Vuex) veya action’\u0131 (Pinia) \u00e7a\u011f\u0131rarak store’daki de\u011feri g\u00fcnceller.<\/p>\n<pre><code class=\"language-html\"><div id=\"app\">\n <input type=\"text\" v-model=\"kullaniciAdiComputed\">\n <p>Store'daki Kullan\u0131c\u0131 Ad\u0131: {{ store.state.kullanici.ad }}<\/p>\n<\/div><\/code><\/pre>\n<pre><code class=\"language-javascript\">\/\/ Vuex Store \u00f6rne\u011fi (k\u0131salt\u0131lm\u0131\u015f)\nconst store = Vuex.createStore({\n state: {\n kullanici: {\n ad: 'Varsay\u0131lan Ad'\n }\n },\n mutations: {\n setKullaniciAd(state, ad) {\n state.kullanici.ad = ad;\n }\n }\n});\n\nconst app = Vue.createApp({\n computed: {\n kullaniciAdiComputed: {\n get() {\n return store.state.kullanici.ad;\n },\n set(value) {\n store.commit('setKullaniciAd', value);\n }\n }\n }\n});\n\napp.use(store);\napp.mount('#app');<\/code><\/pre>\n<p>Bu yakla\u015f\u0131m, <code>v-model<\/code>‘in kullan\u0131m kolayl\u0131\u011f\u0131n\u0131 korurken, state y\u00f6netim k\u00fct\u00fcphanesinin \u00f6ng\u00f6r\u00fclebilirli\u011fini ve izlenebilirli\u011fini de sa\u011flar.<\/p>\n<h3>Alternatif Yakla\u015f\u0131mlar (Ne Zaman v-model Kullanmamal\u0131?)<\/h3>\n<p><code>v-model<\/code> \u00e7o\u011fu form eleman\u0131 i\u00e7in m\u00fckemmel bir se\u00e7im olsa da, her zaman en iyi \u00e7\u00f6z\u00fcm olmayabilir. Baz\u0131 durumlarda manuel <code>v-bind<\/code> ve <code>v-on<\/code> kombinasyonu daha uygun olabilir:<\/p>\n<p>1. <strong>Karma\u015f\u0131k Veri D\u00f6n\u00fc\u015f\u00fcmleri:<\/strong> Kullan\u0131c\u0131 giri\u015fi ile veri modeli aras\u0131nda karma\u015f\u0131k bir d\u00f6n\u00fc\u015f\u00fcm yapman\u0131z gerekiyorsa. \u00d6rne\u011fin, kullan\u0131c\u0131n\u0131n girdi\u011fi metni bir say\u0131ya d\u00f6n\u00fc\u015ft\u00fcrmeden \u00f6nce farkl\u0131 bir formatlama veya do\u011frulama i\u015flemine tabi tutmak. Bu durumda, <code>@input<\/code> olay\u0131nda bir metot \u00e7a\u011f\u0131r\u0131p bu metot i\u00e7inde d\u00f6n\u00fc\u015f\u00fcm\u00fc yapmak daha esneklik sa\u011flar.<br \/>\n2. <strong>Tek Y\u00f6nl\u00fc Veri Ak\u0131\u015f\u0131 Tercihi:<\/strong> Uygulaman\u0131n genel mimarisi veya belirli bir bile\u015fenin felsefesi tek y\u00f6nl\u00fc veri ak\u0131\u015f\u0131n\u0131 kesinlikle zorunlu k\u0131l\u0131yorsa. Bu, \u00f6zellikle bir bile\u015fenin sadece veri g\u00f6r\u00fcnt\u00fclemesi gerekti\u011fi ve kendisinin do\u011frudan veriyi de\u011fi\u015ftirmemesi gerekti\u011fi durumlarda ge\u00e7erlidir.<br \/>\n3. <strong>Performans Optimizasyonu:<\/strong> \u00c7ok s\u0131k g\u00fcncellenen ve b\u00fcy\u00fck veri setleriyle \u00e7al\u0131\u015fan bir input alan\u0131 varsa, her tu\u015f vuru\u015funda <code>v-model<\/code>‘in yapt\u0131\u011f\u0131 g\u00fcncellemeler performans\u0131 etkileyebilir. Bu durumda, <code>v-model.lazy<\/code> kullanmak veya <code>debounce<\/code>\/<code>throttle<\/code> gibi tekniklerle manuel olarak olay dinleyicisini optimize etmek gerekebilir.<br \/>\n4. <strong>\u00d6zel Durumlar:<\/strong> Bazen HTML input elemanlar\u0131n\u0131n varsay\u0131lan davran\u0131\u015f\u0131ndan tamamen farkl\u0131 bir etkile\u015fim modeli olu\u015fturman\u0131z gerekebilir. Bu gibi durumlarda, <code>v-model<\/code>‘in soyutlamas\u0131 k\u0131s\u0131tlay\u0131c\u0131 olabilir ve manuel kontrol daha iyidir.<\/p>\n<h3>Sonu\u00e7<\/h3>\n<p><code>v-model<\/code>, Vue.js’te form elemanlar\u0131 ve \u00f6zel bile\u015fenlerle iki y\u00f6nl\u00fc veri ba\u011flama i\u00e7in vazge\u00e7ilmez bir ara\u00e7t\u0131r. S\u00f6zdizimsel kolayl\u0131\u011f\u0131, farkl\u0131 form elemanlar\u0131na uyarlanabilirli\u011fi ve de\u011fi\u015ftiricileri sayesinde, geli\u015ftiricilere form verilerini y\u00f6netmede b\u00fcy\u00fck bir esneklik ve verimlilik sunar. <code>v-model<\/code>‘in arka plan\u0131ndaki <code>v-bind:value<\/code> ve <code>v-on:input<\/code> (veya <code>change<\/code>) mekanizmas\u0131n\u0131 anlamak, hem temel kullan\u0131mlarda hem de \u00f6zel bile\u015fenlerde veya state y\u00f6netimi entegrasyonlar\u0131nda kar\u015f\u0131la\u015fabilece\u011finiz karma\u015f\u0131k senaryolar\u0131 \u00e7\u00f6zmenize yard\u0131mc\u0131 olacakt\u0131r.<\/p>\n<p>Do\u011fru kullan\u0131ld\u0131\u011f\u0131nda, <code>v-model<\/code> uygulaman\u0131z\u0131n kullan\u0131c\u0131 etkile\u015fimlerini daha ak\u0131c\u0131, kodunuzu daha temiz ve geli\u015ftirme s\u00fcrecinizi daha h\u0131zl\u0131 hale getirecektir. Vue.js \u00f6\u011frenme yolculu\u011funuzda <code>v-model<\/code>‘e hakim olmak, dinamik ve kullan\u0131c\u0131 dostu aray\u00fczler olu\u015fturman\u0131n temel ta\u015flar\u0131ndan biridir.<\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js’te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131\nVue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in a\u015famal\u0131 olarak benimsenebilen bir","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[1402],"tags":[],"class_list":{"0":"post-37644","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-vue","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\n<title>Vue.js'te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Vue.js'te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131\" \/>\n<meta property=\"og:description\" content=\"Vue.js'te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131 Vue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in a\u015famal\u0131 olarak benimsenebilen bir\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-11T10:40:45+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"Vue.js’te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131\",\"datePublished\":\"2026-01-11T10:40:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/\"},\"wordCount\":2272,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Vue\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/#respond\"]}],\"copyrightYear\":\"2026\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/\",\"name\":\"Vue.js'te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2026-01-11T10:40:45+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vue.js’te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n","yoast_head_json":{"title":"Vue.js'te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/","og_locale":"tr_TR","og_type":"article","og_title":"Vue.js'te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131","og_description":"Vue.js'te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131 Vue.js, kullan\u0131c\u0131 aray\u00fczleri olu\u015fturmak i\u00e7in a\u015famal\u0131 olarak benimsenebilen bir","og_url":"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2026-01-11T10:40:45+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"Vue.js’te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131","datePublished":"2026-01-11T10:40:45+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/"},"wordCount":2272,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Vue"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/#respond"]}],"copyrightYear":"2026","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/","url":"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/","name":"Vue.js'te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131 - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2026-01-11T10:40:45+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/vue-jste-iki-yonlu-veri-baglama-icin-v-model-kullanimi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Vue.js’te \u0130ki Y\u00f6nl\u00fc Veri Ba\u011flama i\u00e7in v-model Kullan\u0131m\u0131"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=37644"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37644\/revisions"}],"predecessor-version":[{"id":37645,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/37644\/revisions\/37645"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=37644"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=37644"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=37644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}