Javascript’teki array fonksiyonlarına bu yazımızda .some() array fonksiyonu ile devam ediyoruz.
Javascript .some() array fonksiyonu nedir sorusuna en basit şekilde şöyle cevap verebiliriz: bir array içerisinde belirtilen koşullara uygun bir eleman varsa, sonucumuz true dönecektir. Eğer yoksa da false değeri dönecektir. İşte bu kadar basit.
Bir önceki yazımda .filter() fonksiyonunın kardeşi olan .find() fonksiyonundan bahsetmiştim. Bu yazıda ise aslında benzer şeylerden biraz daha farklı şekilde bahsediyor olacağım.
Özet olarak şöyle başlayabiliriz; .filter() fonksiyonu bize bir liste / dizi / array dönecek. Yani dizi içerisinden yeni bir diziyi bize dönmüş olacak. .find() ise sadece array / dizi içerisinden bir eleman dönüyordu. İşte bu kadar basit. Elbette ikisi de undefined dönebilir, buna daha önceden değinmiştim. Bunu da unutmamak gerekiyor.
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 öğ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.
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.
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.
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.
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.
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.
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.