Vue JS Öğreniyorum #2

Sanki elimden Vue kaçıyormuşçasına ilk yazımın ardından devamını yazasım geldi.

İlk yazıyı okumak için buraya atlayın. İlk yazıyı okuduysanız veya ben buradan devam etmekte kararlıyım veyahut ise ne uzattın arkadaş başla artık diyorsanız buyrun efendim.

…

Merak etmeyin bu sefer daha kültürlü bir yazı olması için kolları sıvadım.(tişört giydim ya) 🤣

Bölüm 1

Önceki yazıda sample app kıvamında, boilerplate kodumsu, quick start guide yönetmeliğine uygun official (ingilizce desen var) kod ile CDN üzerinden örnek gördük. Şimdi ise biraz ciddileşelim ve binding anlatım.

Evet evet yanlış yazmadım ve sen değerli okuyucum doğru okudun. Ama önce sormamız gereken soru şu ne ki data binding?

Şimdi biraz teorik muhabbet edelim ve kafamıza otursun. Siz konuya hakim veya bilmiyor olabilirsiniz , (ben de sonradan öğrendim sonuçta) okudukça öğreniyoruz yani.

Diyelim ki pure javascript veya herhangi bir framework/library falan kullanıyorsunuz. (Tabii ki ben burda sadece frontend için konuşuyorum. Ama sadece bu masada değil data binding. Her masada var anlayacağınız.)

İster API isteği cevabı bir veri veya kendi kodunuzda duran birşeyler olsun. Bu yaptıklarınızdan bazı şeyleri ekranda göstermeniz gerekiyor. let x=5 dediniz ve x’i ekranda göstereceğiz yani.

Bunu(veriyi yani) ekranda gösterme sanatı ve bunu değiştiğinde tekrar render edilmesi işte data binding. Daha resmi bir tanım olarak ise backend den gelen veriyi, veya backend den mahrum bir app in birtakım değişkenlerini ekrana yazdırma ve gerekirse güncellendiğinde otomatik olarak ekranda güncellenmesi.

Bu kadar teorik bilgiyi önceden bilmesemde aslında kullanıyordum zaten.

Bölüm 2

Henüz Composition API kullanmayı öğrenmedim. Aksini belirtmedikçe Options API stilinde yazacağım her şeyi (Ne dediğimi bilmiyorsanız buraya bakabilirsiniz).

Data binding one-way(tek taraflı) diğer türlü ise two-way(çift taraflı) binding olarak kullanabiliyoruz. Farkı ne ? Çok basitce sadece ekranda birşeyi göstermek ama ekrandan ona hiç dokunmuyorsak one-way. Ama form vb, yani bir input girdi gerekli ise o zaman bu two-way oluyor.

Bölüm 3

Data binding yazalım!!! Vue yazarken v-bind yapıyoruz. Yani tüm binding attribute’larını [bu satıra devam etmeden önce 1 gün elektrik arası] “v-” yazarak devamında hangi amaca hizmet edecek direktif gerekiyorsa onu yazıyoruz.

Örneğin; uzun yoldan

<div v-bind:id="dynamicId"></div>

Veya kısa yoldan

<div :id="dynamicId"></div>

Kısa yoldan yazmak tabii ki daha hızlı oluyor. Ama bu biraz da alışkanlık meselesi gibi bir şey. Yukarıda bulunan iki örnek dinamik id için binding şekli.

Bölüm 4

Özellikle sıkça ihtiyacımız olacak ve kullanacağımız bazı direktifleri ve bunun normalde (yani diğer framework/library yada pure js üzerinde) neye karşılık olduğuna kısaca bakalım.

Detaylı API referansına ulaşmak için bu adrese bakabilirsiniz.

v-html -> yani elementin innerHTML değerini değiştirmenin yolu.

v-show -> yani bir elementi gizle/göster yapmak. Bunun etkisi display:none; olarak özetlenebilir. Element kodda durur ama aslında yokmuş gibidir.

v-if -> yani bir koşula göre artık sonucunda ne istiyorsanız. İşte burada render edilip edilmeyeceği (ipler elimizde artık) konusunda söz bizde.

v-else-if -> yani ilk koşulumuz olmadı bari bu olsun.

v-else -> v-if in devamında if şartında bulunan durumun olmazsa ne olacağıdır (Hepimizin bildiği o olumsuzluk, tam tersi desek daha doğru aslında 🤣).

v-for -> (ben buna bayılıyorum ya) Mesela bir array var elimizde bu array’in tüm elemanlarını ekrana yazağız. Nasıl yapılır ? Örnek kodda görelim;

<div v-for="(item, index) in items" :key="index">{{item}}</div>
//item bildiğiniz array'in o andaki elemanı
//index o an kaçıncı index'te olduğumuz
//items ise itemların bulunduğu array'imiz.
//key ise unique id değerimiz. siz index verdiğime bakmayın 🤣

v-on -> event listener bağlamak için gerekli direktif. Event Listeneler konusuna bir açıklık getirip gideyim hemen. Bence türkçesi etkinlik dinleyici. Yani siz bir element veya başka bir şeye .eventListener diyorsunuz daha sonra ise o event’ı söylüyorsunuz en bildiğimiz click event’ı sonra ise ne olacağını söylüyoruz hepsi bu (gerçekten).

Yani??

Yani v-on:click, v-on:[event] (tabii ki sürekli gözüm dökümanda). Kısaca yazmak için ise özellikle burada @ yapıyoruz. “@click” gibi. Yukarıda dediğim gibi prof. olmak için doküman doküman ve doküman!!!

Son olarak

v-model -> Böyle güzel şey hayatta bir kere gelir sanırım. Form yönetmek çoğu zaman uğraştırıcı ve riskli oluyor (E sonuçta bi güvenlik olacak yani). Bu yüzden harici library kullanabiliyoruz. Diyelim ki kullanmadık. Dahili bir Vue çözümü v-model.

İşte burada yukarda bahsettiğimiz two-way binding konusu bu. İnanılmaz basit bir örnek bize dokümanda verilmiş. Ona bir göz atalım.

<p>Message is: {{ message }}</p>
<input v-model="message" placeholder="edit me" />

Bu yazıda bahsedeceklerim bu kadardı. Yazdıklarımın hatalı/eksik yönleri olduğunu düşünüyor veya sadece görüş bildirmek istiyorsanız hemen şuradayım. Kültür seviyesi bir tık daha artmış yeni bir yazıda görüşmek üzere. 👋🏻👋🏻