{"id":37034,"date":"2025-12-26T14:40:46","date_gmt":"2025-12-26T11:40:46","guid":{"rendered":"https:\/\/fatihsoysal.com\/blog\/?p=37034"},"modified":"2025-12-26T14:40:46","modified_gmt":"2025-12-26T11:40:46","slug":"vue-js-templating-dinamik-ve-reaktif-kullanici-arayuzleri-olusturma-sanati","status":"publish","type":"post","link":"https:\/\/fatihsoysal.com\/blog\/vue-js-templating-dinamik-ve-reaktif-kullanici-arayuzleri-olusturma-sanati\/","title":{"rendered":"Vue.js Templating: Dinamik ve Reaktif Kullan\u0131c\u0131 Aray\u00fczleri Olu\u015fturma Sanat\u0131"},"content":{"rendered":"

<\/p>\n

Vue.js Templating: Dinamik ve Reaktif Kullan\u0131c\u0131 Aray\u00fczleri Olu\u015fturma Sanat\u0131<\/h2>\n

Vue.js, modern web uygulamalar\u0131 geli\u015ftirmek i\u00e7in pop\u00fcler, a\u015famal\u0131 bir JavaScript \u00e7er\u00e7evesidir. G\u00fc\u00e7l\u00fc yanlar\u0131ndan biri de sezgisel ve esnek \u015fablonlama sistemidir. \u015eablonlar, uygulaman\u0131z\u0131n verilerini al\u0131p taray\u0131c\u0131da kullan\u0131c\u0131lar\u0131n g\u00f6rebilece\u011fi HTML’e d\u00f6n\u00fc\u015ft\u00fcren bir k\u00f6pr\u00fc g\u00f6revi g\u00f6r\u00fcr. Vue’nun \u015fablonlama sistemi, hem HTML tabanl\u0131 s\u00f6zdizimi ile kolayca \u00f6\u011frenilebilir hem de JavaScript’in g\u00fcc\u00fcn\u00fc reaktif bir \u015fekilde kullanman\u0131z\u0131 sa\u011flar. Bu makalede, Vue.js \u015fablonlaman\u0131n derinliklerine inecek, temel s\u00f6zdiziminden ileri d\u00fczey tekniklere kadar her y\u00f6n\u00fcn\u00fc detayl\u0131ca inceleyece\u011fiz.<\/p>\n

Giri\u015f: \u015eablonlaman\u0131n \u00d6nemi ve Vue.js Yakla\u015f\u0131m\u0131<\/h3>\n

Modern web geli\u015ftirme, statik HTML sayfalar\u0131ndan dinamik ve etkile\u015fimli kullan\u0131c\u0131 aray\u00fczlerine do\u011fru b\u00fcy\u00fck bir de\u011fi\u015fim ge\u00e7irdi. Bu de\u011fi\u015fimin merkezinde, uygulaman\u0131n durumuna (state) g\u00f6re de\u011fi\u015fen HTML yap\u0131lar\u0131n\u0131 otomatik olarak olu\u015fturma yetene\u011fi olan \u015fablonlama (templating) sistemleri yer al\u0131r. Vue.js, bu ihtiyac\u0131 kar\u015f\u0131lamak i\u00e7in HTML tabanl\u0131, deklaratif bir \u015fablon s\u00f6zdizimi sunar. Bu s\u00f6zdizimi, geli\u015ftiricilerin DOM manip\u00fclasyonuyla u\u011fra\u015fmak yerine, uygulaman\u0131n mant\u0131\u011f\u0131na ve verilerine odaklanmas\u0131n\u0131 sa\u011flar.<\/p>\n

Vue \u015fablonlar\u0131, sanal DOM (Virtual DOM) ad\u0131 verilen bir mekanizma arac\u0131l\u0131\u011f\u0131yla optimize edilir. \u015eablonlar derlenerek JavaScript render fonksiyonlar\u0131na d\u00f6n\u00fc\u015ft\u00fcr\u00fcl\u00fcr. Bu fonksiyonlar, uygulaman\u0131n durumu de\u011fi\u015fti\u011finde sanal DOM’u g\u00fcnceller ve ard\u0131ndan ger\u00e7ek DOM’daki yaln\u0131zca gerekli de\u011fi\u015fiklikleri minimum maliyetle uygular. Bu yakla\u015f\u0131m, hem performansl\u0131 hem de bak\u0131m\u0131 kolay uygulamalar olu\u015fturman\u0131n temelini olu\u015fturur.<\/p>\n

Temel Vue \u015eablon S\u00f6zdizimi<\/h3>\n

Vue.js \u015fablonlar\u0131, standart HTML’e ek olarak \u00f6zel s\u00f6zdizimleri ve direktifler i\u00e7erir. Bu, verileri ba\u011flaman\u0131za, ko\u015fullu olarak \u00f6\u011feler render etmenize, listeler olu\u015fturman\u0131za ve olaylar\u0131 dinlemenize olanak tan\u0131r.<\/p>\n

Metin \u0130\u00e7erik Ba\u011flama (Text Interpolation)<\/h4>\n

Vue’da en temel veri ba\u011flama \u015fekli, \u00e7ift s\u00fcsl\u00fc parantez (Mustache s\u00f6zdizimi) kullan\u0131larak metin i\u00e7eri\u011fini ba\u011flamakt\u0131r.<\/p>\n

{{ mesaj }}<\/p><\/code><\/pre>\n
Bu \u00f6rnekte, mesaj<\/code> ad\u0131nda bir veri \u00f6zelli\u011fi, paragraf\u0131n i\u00e7eri\u011fine dinamik olarak ba\u011flan\u0131r. mesaj<\/code> de\u011fi\u015fti\u011finde, paragraf\u0131n i\u00e7eri\u011fi otomatik olarak g\u00fcncellenir. S\u00fcsl\u00fc parantezler i\u00e7inde basit JavaScript ifadeleri de kullanabilirsiniz:<\/p>\n
{{ sayi + 1 }}<\/p>\n
{{ mesaj.split('').reverse().join('') }}<\/p><\/code><\/pre>\n
Ancak, s\u00fcsl\u00fc parantezler i\u00e7ine \u00e7ok karma\u015f\u0131k mant\u0131k yazmaktan ka\u00e7\u0131nmak en iyi uygulamad\u0131r. Mant\u0131\u011f\u0131 bile\u015feninizin script<\/code> k\u0131sm\u0131ndaki computed<\/code> \u00f6zelliklere veya methods<\/code>‘lara ta\u015f\u0131mak, \u015fablonlar\u0131n\u0131z\u0131 daha okunabilir hale getirir.<\/p>\n
Ham HTML Ba\u011flama (Raw HTML)<\/h4>\n
Varsay\u0131lan olarak, Mustache s\u00f6zdizimi HTML i\u00e7eri\u011fini d\u00fcz metin olarak yorumlar. E\u011fer bir string’i ger\u00e7ek HTML olarak render etmek istiyorsan\u0131z, v-html<\/code> direktifini kullanman\u0131z gerekir.<\/p>\n
<\/div><\/code><\/pre>\n
Uyar\u0131:<\/strong> Kullan\u0131c\u0131 taraf\u0131ndan sa\u011flanan i\u00e7eri\u011fi v-html<\/code> ile render etmek, XSS (Cross-Site Scripting) sald\u0131r\u0131lar\u0131na yol a\u00e7abilir. Bu direktifi yaln\u0131zca g\u00fcvenilir i\u00e7erikle kullanmal\u0131s\u0131n\u0131z.<\/p>\n
Nitelik Ba\u011flama (Attribute Binding)<\/h4>\n
HTML niteliklerine (attribute) dinamik de\u011ferler ba\u011flamak i\u00e7in v-bind<\/code> direktifini kullan\u0131r\u0131z. v-bind<\/code> k\u0131sa yaz\u0131m\u0131 : <\/code> \u015feklindedir.<\/p>\n
Ba\u011flant\u0131<\/a>\n\n<\/code><\/pre>\n
v-bind<\/code> sadece temel nitelikler i\u00e7in de\u011fil, class<\/code> ve style<\/code> gibi \u00f6zel nitelikler i\u00e7in de \u00e7ok g\u00fc\u00e7l\u00fcd\u00fcr.<\/p>\n
S\u0131n\u0131f ve Stil Ba\u011flama (Class and Style Binding)<\/h5>\n
v-bind:class<\/code> ve v-bind:style<\/code> ile CSS s\u0131n\u0131flar\u0131n\u0131 ve inline stilleri dinamik olarak y\u00f6netebilirsiniz.<\/p>\n
*   Nesne S\u00f6zdizimi ile S\u0131n\u0131f Ba\u011flama:<\/strong><\/p>\n
<\/div><\/code><\/pre>\n
    isActive<\/code> ve hasError<\/code> veri \u00f6zellikleri true<\/code> oldu\u011funda ilgili s\u0131n\u0131flar uygulan\u0131r.<\/p>\n
*   Dizi S\u00f6zdizimi ile S\u0131n\u0131f Ba\u011flama:<\/strong><\/p>\n
<\/div><\/code><\/pre>\n
    aktifSinif<\/code> ve hataSinifi<\/code> veri \u00f6zellikleri taraf\u0131ndan tutulan string de\u011ferler s\u0131n\u0131f olarak eklenir.<\/p>\n
*   Nesne S\u00f6zdizimi ile Stil Ba\u011flama:<\/strong><\/p>\n
<\/div><\/code><\/pre>\n
    CSS \u00f6zellik adlar\u0131 camelCase veya kebab-case (font-size<\/code>) olarak yaz\u0131labilir.<\/p>\n
*   Dizi S\u00f6zdizimi ile Stil Ba\u011flama:<\/strong><\/p>\n
<\/div><\/code><\/pre>\n
Direktifler (Directives)<\/h3>\n
Direktifler, v-<\/code> \u00f6nekiyle ba\u015flayan \u00f6zel niteliklerdir ve Vue’nun \u015fablonlama sisteminin kalbinde yer al\u0131r. Direktifler, DOM’a reaktif davran\u0131\u015flar ekler.<\/p>\n
Ko\u015fullu Render Etme (Conditional Rendering)<\/h4>\n
Belirli bir ko\u015fula ba\u011fl\u0131 olarak elemanlar\u0131 g\u00f6sterip gizlemek i\u00e7in v-if<\/code>, v-else-if<\/code>, v-else<\/code> ve v-show<\/code> direktiflerini kullan\u0131r\u0131z.<\/p>\n
*   v-if<\/code>, v-else-if<\/code>, v-else<\/code>:<\/strong> Bu direktifler, ko\u015ful false<\/code> oldu\u011funda eleman\u0131 DOM’dan tamamen kald\u0131r\u0131r. Ko\u015ful true<\/code> oldu\u011funda ise eleman\u0131 DOM’a ekler.<\/p>\n
Tip A<\/div>\n    
Tip B<\/div>\n    
Di\u011fer Tip<\/div><\/code><\/pre>\n
    Bu direktifler bir