Kategoriler
Vue.JS Dersleri

Vue.Js Components: Child – Parent Veri Aktarımı

Bu yazıda da pratik olması adına yeni bir proje oluşturacağım. Projemizde yeni componentlar hazırlayacağız ve component içerisinden parent’a (component’ın çağırıldı yer) veri akışını sağlayacağız.

Github’ta paylaşacağım başlangıç seviyesideki proje içerisinde şunlar olacak: Vuetify, Composition API, Props, Emits, Unit Test / Jest (daha sonra). Bu proje sayesinde daha önceden değindiğim parent’tan child’a veri aktarımını da pekiştirmiş olacağız. Ancak, daha önceden Options API ile yaptığımız başlangıcı bu defa Composition API ile yapacağız.

Vue.js v-bind Nedir?

Vue.js öğrenmeye başladığınızda ilk karşınıza çıkacaklardan bir tanesi de v-bind ifadesi olacaktır. Bu yazıda Vue.js’te v-bind directive nedir ve v-bind ne zaman / ne için kullanılır konularına değineceğim.

Öncelikle şunu da belirtmek isterim ki genel olarak v-model ve v-bind (v-for, v-html, v-text, v-on, v-once, v-if, v-show, v-slot… gibi birçok directive de var) çoğu zaman karıştırılabiliyor. İlk önce ikisinin de farklı birer Vue.js directive’i olduğunu, yani birbirinin aynısı olmadığını belirtmek gerekir.

Kategoriler
Javascript Dersleri

Javascript’te .find() Array Fonksiyonu

Javascript’te arrayler ile işimiz varsa en çok kullandığımız fonksiyonların başında .find() array fonksyionu gelmektedir. Özet olarak ne işe yaradığına değinmek gerekirse, bir dizi içerisinde belirttiğimiz özelliklerde bir elemanı döndürmeye yaramaktadır.

Örneğin, dizimiz içerisindeki elemanlar içerisinde yer alan objelerde isim isminde bir property var. Ve biz isim değeri Mustafa Çağrı Güven olan elemanı bulmak istiyoruz. İşte bu durumda aklımıza gelecek olan ilk fonksiyon gelmelidir.

Kategoriler
Javascript Dersleri

Javascript Array Fonksiyonları ve Örnekleri

Eğer pure / vanilla javascript kullanıyorsanız, yani herhangi bir 3. parti plugin ya da framework (örneğin jQuery, Vue.js, React vb.) kullanmıyorsanız, arrayleri manipüle edebilmek için aslında çok güzel özelliklere sahipsiniz. Bunun farkında olmayıp sadece jQuery ile arrayler içerisinde işlem yapılabildiğini düşünüyorsanız, bu yazıda neredeyse hepsinin Javascript’te de birer karşılığı olduğunu göreceksiniz.

Kategoriler
jQuery Vue.JS Dersleri

Vue.Js v-model Nedir? v-model Kullanımı

V-model, Vue.js ile gelen en özel güzelliklerin başında gelmektedir. <input v-model=”isim” /> yazdığınızda, inputtan gelen veriyi alır, data içerisinde isim property’sini gider günceller. Siz data içersindeki isim değerini değiştirdiğinizde de (fonkstionlar vb. yardımıyla) input içerisindeki veriyi günceller. Buna data-way binding diyoruz ve jQuery ya da pure Javascript bilen birisi için muazzam bir özellik olacaktır.

Kategoriler
Vue.JS Dersleri

Vue.Js Components: Parent’ten Child’e Veri Aktarımı

Daha önceden Vue.js’te component oluşturma ve bu componentlerı kullanma konularına değinmiştim. Ancak, component statik olduğu için component’i çağırdığımız yerden herhangi bir veriyi aktarmamıştık. Şimdi ise veri aktarımını tek taraflı olarak parent -> child arasında yapacağız.

Sonraki aşamalardaysa child -> parent ve 2 child arasında veri aktarımını da yapacağız.

Kategoriler
Vue.JS Dersleri

Vue.Js Script Yapısı, Data, Methods, Created, Watch

Bu yazıda Vue.Js’in asıl heyecanlı kısımlarına giriş yapacağız. Özellikle de Vue.Js neden jQuery’den daha iyi (kime göre neye göre) konusuna da değinmiş olacağız. Özellikle başlarken söylemem gerekiyor ki bu yazıya göz attıktan sonra daha önceden jQuery kullanan birisi için geri dönülemez bir yola giriş yapabilirsiniz :) Çünkü kod yazma hızınız, kodlarınızın okunurluğu ve takip edilebilmesi bir hayli artacak. Sadece v-for için bile Vue.js kullanmaya başlayabilirsiniz, çok ciddiyim :)

Not: Bu yazıda yaptığımız örnekleri paylaştım. Yazının en sonundaki linkten projeye ulaşabilirsiniz.

Kategoriler
Vue.JS Dersleri

Vue.Js Components

Merhaba arkadaşlar, bir önceki yazıda Vue Router ile birlikte Vue.JS projelerde routing işlemlerini nasıl yapabileceğimize değinmiştim. Şimdi ise Vue.Js içerisinde tekrar kullanmak üzere bileşenleri (Vue Components) nasıl oluşturacağımızı ve component ile oluşturulan yapılar tekrar tekrar nasıl kullanabileceğimizi göreceğiz.

Kategoriler
Vue.JS Dersleri

Vue Router – Başlangıç Seviyesi

Vue Router için en az iki yazı yazmayı planlıyorum. Bir tanesi basit manada başlangıç aşamasında kolayca Vue Router yapısını anlayabilmenizi hedefleyecek. Bir sonraki ise, daha kapsamlı olacak. Öyle ki bir önceki yazıda Router klasörünüzün bir hayli kalabalık olabileceğini söylemiştim. Yani sitenizde onlarca ve hatta yüzlerce sayfa olacaksa, daha kapsamlı ve ölçeklenebilir bir routing yapısını projeye başlamadan önce kurmanız gerekecek.

Kategoriler
Vue.JS Dersleri

Vue.Js Başlangıç: Proje Dosyaları

Bu yazıda, bir önceki yazıda oluşturduğum ilk Vue.js projesinin hangi dosyalardan oluştuğuna ve bu dosyaların ne işe yaradığına değineceğim. Öncelikle projemizin hangi klasörlerden oluştuğunu görelim: node_modules, public ve src. Ayrıca, ana dizinimiz içerisinde de genelikle ayarlardan oluşan dosyalarımız bulunuyor.

Bu arada kodları incelerken kullanacağım Text Editor Visual Studio Code olacak.