VueJS 05: Components

[@mustafacinar9153]

Hayatimi yazilim sektorunden kazanan biri olarak soyluyorum, Hikayeden degil gercek hayat seneryosu anlatim gidiyor harikasiniz. Belki takipci olarak henuz icerigin donusunu alamamissiniz ama sizi ciddi bir sektor ici insanin takip ettigini dusunuyorum.

[@FatihAcet]

Mustafa Cinar eyvallah kardesim 👍

[@keremcelik1197]

Vue js e yeni başladım, mükemmel bir anlatım tekniğiniz var, detaylara iyi değiniyorsunuz ve gerekli yerleri tekrar ediyorsunuz. Sadece biraz daha video gelse güzel olur. Buraya kadar 4 saatte geldim. :) Vuex, Vue Router, Vue advance videolarını merakla ve ilgiyle bekliyoruz. Arada bir canlı yayın yapsanız, canlı yayında bir uygulama ayağa kaldırsak dadından yenmez. Böyle devam :) Emekleriniz ve sabrınız için çok teşekkür ederim.

[@cemilerden3577]

bir video ile vue.js in birçok konusuna değinmişsiniz. ortaya da güzel bir örnek çıktı. sayenizde çoğu kişi vue.js e hızlı bir giriş yapmış oluyor. teşekkürler.

[@FatihAcet]

Tesekkurler 🙂

[@sistemofe]

Fatih abi ecnebi kaynaklarında bulamadığım birçok sorumun cevabını 32 dakikada bana verdin. adamın dibisin yav. eline sağlık

[@keremunal9666]

içerik çok başarılı olmus youtube turkiyede sanırım en iyi vuejs kaynaklarından biri

[@justgiovannii]

Tavsiyem, componentler halinda calisan bir app uretirken components diye bir dizin olusturup yazilan her bir component icin ayri ayri xyz.vue gibi single component dosyalari olusturmak. Tabi daha sonra main vue icinden her birini import etmek. Daha temiz, okunabilir, anlasilir olucaktir. Sanirim bazi arkadaslar senin izledigin yolun daha da uzun oldugunu dusunmus sebebi de iste tam bu yuzden. Yinede emegine saglik, sabrina kuvvet :) Vue.js harika!

[@aytekinerlale3022]

Gayet anlaşılır ve hızlı bir şekilde çok iyi anlatıyorsunuz.Sayenizde gün içerisinde ki 5.video'mu izliyorum tekrardan teşekkürler

[@kmltrk07]

Hocam 10 numara anlatıyorsunuz hiçbir sıkıntı yok.

[@faraway_m]

Video için teşekkürler, izleyerek uygulayanlar belki sepet ürün değişim butonunda bulunan v-if parametresi ile ilgili sorun yaşamış olabilir. v-if="isShoppingCart" olan kısmı v-if="isShoppingCart()" olarak güncellerseniz doğru yerde doğru butonu gösterebilirsiniz. Metoddan geldiğinden ötürü () eklemeye alışmak lazım. Ben test ettiğimde iki butonun da iki sepet tipinde göründüğünü gördüm ve bu şekilde çözdüm. Takipteyiz!

[@dengoes]

Dostum, tek kelime ile harikasın. Ağzından çıkan her cümle ve kodladığın her kod satırına ayrı ayrı teşekkürlerimi sunuyorum.

[@MahmutGundogdu]

çok güzel gidiyor. benim önerim 16 kez tekrar açılış yapmayın boşverin kötü diye bir şey yok ki. Yanlız refaktör edeceğiz derken daha çok kod yazdık sanki ama temiz oldu.

[@FatihAcet]

Hehe, evet daha cok kod yazdik gibi ama component oldugu icin tekrar kullanilabilir oldu. Videolarin en zor kismi gercekten acilisi. Istedigim gibi olana kadar deniyorum :) Guzel yorumun icin tesekkur ederim 😍

[@abdullaemciyev2275]

Beğenmediğim tek şey bir videoda bu kadar fazla bilginin olması, perfect)) 0 dislike gördüğüm ilk video. Bol şans.

[@FatihAcet]

😎

[@ozgurozer8579]

Güzel konulara değinilmiş

[@ahmetersxn]

Selam hocam gayet iyisiniz. Teşekkür ederiz.

Anlatımınız gayet temiz, teşekkürler.

[@semaozbas6729]

04.34'üncü dakikada hata yaptınız,JS dosyasında component'i window load edilmeden önce yapma gerekliliği yok. Bunun haricinde teşekkürler ,güzel bir seri hazırlamışsınız.

[@CanPerk]

Heyecanını takdir ettim güzel olmuş dizi izler gibi izledim buraya kadar

[@FatihAcet]

Tesekkurler :)

[@ferhatsunaycansev106]

ağzınıza sağlık hocam :)

[@aptiapti55]

Usta adamsın.

[@veli.adiguzel]

Ağzına sağlık güzel olmuş

[@khalidben9940]

great video with a nice example

[@trojan606]

iyi ki varsınız

[@ilhankazanci]

Fatih hocam; Güzel anlatım. Teşekkürler, devamını bekliyoruz. Selamlar.

[@sadisezer1970]

html vuejs kodunu yanyana açman çok hoş ve profesyonelce.

[@FatihAcet]

🖖

[@webloader93]

Teşekkürler Fatih ;)

[@erinckuzu]

Videolar için teşekkürler

[@yusuftekinx]

Sizi dnomaktan keşfettim ve videolarınızı çok anlaşılır şekilde anlattığınız için hemen abone oldum ve bildirim state : ON

[@YusufDemir-ps1tt]

Ellerine sağlık seri çok güzel bir şekilde ilerlemiş. Özellikle kullanılabilir örnekler üzerinden önemli yerlere değinmen çok güzel :)

[@FatihAcet]

Tesekkurler. Amacim olabildigince gercek hayatta kullanilabilinecek ornekler yapmak ki faydali olsun. Begendigine sevindim.

[@furkansanl8936]

Adamın dibisin

Selam Fatih, 18:48'te "computed property olarak gösterebiliriz" diyorsun, neden method olarak değil de computed property (CP) olarak tasarladın farkı nedir? Ayrıca CP, methods kısmından sonra çalışıyor, console.log ile incelediğimde bunu gördüm, düşüncelerin nelerdir?

[@FatihAcet]

Mehmet selam. Bir onceki Computed Properties videosunun altina da buna benzer bir yorum gelmisti. Dedigin gibi CP yerine method olarak da kullanabiliriz. Bu durumda method isminin sonuna `()` eklememiz gerekiyor. CP daha kisa ve daha temiz gozukuyor. Ote yandan bu bir property, method degil. O yuzden CP yapmak bana daha uygun geliyor. CP, methods kismindan sonra calisiyor ile ne demek istedigini anlamadim. Sonucta ikisi de bir object ve icindeki function'lar yeri geldigi zaman calistirilacaktir. Herhangi bir sorun falan yok yani.

Fatih Acet console.log yaptığımda, önce methods çalıştığını gördüm. Sanırım lifecycle'da CP sonra çalışıyor, saygılar.

[@erhanburhan]

dökümandaki "Computed-Caching-vs-Methods" başlığını okumanızı öneririm. vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods CP'lerde önbellekleme (caching) mekanizması vardır, "computed" altına yazdığınız fonksiyonlar tekrar tekrar hesaplama yapmazlar. İçerdikleri bağımlı-değişkenler güncellenmediği sürece CP'lerin geri döndüreceği sonuç hep aynıdır. 1 kere hesaplama yapıp sonucunu birden fazla yerde kullanmanız gerektiğinde CP'ler bu önbellekleme mevzusu nedeliyle çok faydalıdır. Çünkü "methods" kısmında tanımlayacağınız hesaplama fonksiyonları her durumda yeni baştan çalıştırılacaktır. Bu yüzden hesaplanması "maliyetli" olan işlemleri "computed" altında tanımlamanız tavsiye edilir. Umarım anlatabilmişimdir, hatam olduysa affola.

Teşekkür ederim Erhan

[@FatihAcet]

Erhan yorumun icin cok tesekkurler. Benim kacirdigim cok guzel bir noktaya degindin, sagolasin.

[@hidonet]

Hocam emeğine sağlık.

[@murattopuz2013]

Hocam efsanesiniz

[@oguzhanbulutz]

Videolara hay guys diye başla :) Çok güzel bir playlist oluyor. Bu arada kısa zamanda green screen bekliyoruz :)

Merhaba Fatih, öncelikle güzel video serisi için teşekkürler. Vue Dokümantasyonunda Child ile sadece emit edin tüm işlemleri Parent ta yapın gibi birşey diyordu. Biz videoda cart tipini değiştirirken silme işlemini Child da, ekleme işlemini Parent ta yaptık. Uygulamanın sağlığı açısından hem ekleme hem silme işlemini Parent ta yapmamız gerekmez miydi? Bildiğim kadarı ile Child da yapılan data değişiklikleri Parent a akmıyor. Yani Child da cartı sildik ama Parent bilmiyor. Dolayısıyla Parent ta daha sonra "Checkout" gibi birşey yaparsak, yanlış datayla yaparız gibime geliyor. Ne dersin? (sonraki videoları izlemedim, sonrasında bu işi çözdüysen bilemem :))

[@FatihAcet]

Giray selam. Vue ve diger bu tarz data akisi olan library ve konsept'lerde genel olarak tek yonlu data akisi ve asagidan yukari dogru event gonderme kavramini benimsemek cok daha dogru bir yaklasim. Soyledigin seyde haklisin. Soyle bir kac ekleme daha yapip konuyu biraz daha acayim. App'de data'yi en son bilen Parent component, data'yi yonetmesi gereken kisi de Parent component, data'yi Child component'lere gececek kisi yine Parent component. Aslinda butun data ile ilgili islemlerin hepsinin Parent'da yapilmasi gerekiyor. Video cektikten sonra cok uzun zaman gecti hatirlamiyorum ama sanirim Child component'de data degistirme islemi yaparken "bunun burada yapilmasi pek dogru degil" diye demis olmam gerekiyor diye hatirliyorum. Ayrica Child'da cart'i sildik ama Parent bilmiyor diye bisey dogru degil. Eger Parent o degisikligi bilmeseydi gercekten o item'in silindigini ekranda gormezdik. Cunku o listeyi cizmek Parent'in sorumlulugunda ve cart'dan bir item silinince Parent uygulamayi tekrar cizdi. Ek olarak Parent'da Checkout gibi bir islem yaparsak yine yanlis data gormeyecegiz cunku Child'da degisen data Parent'da da degisti. Ama burada ufak ama cok onemli bir nokta var, o da, Parent Child'a bir array pass etti ve Object, Array gibi data tipleri JS'de reference ile pass edilir. Yani bir yerde degisince baska yerde de degisir ve bu yuzden Child'da degisince Parent'da da degismis oldu. Aslina bakarsan senin dedigin gibi yapmak cok caiz olmayan bir hareket ama JS'deki Passed by Reference olayindan dolayi calismasinda bir sikinti olmuyor. Bunu daha duzgun yapmak icin ne yapabiliriz ondan da bahsedeyim ki havada kalmasin. Aklima gelen iki cozum var. Birincisi Child component event emit eder, Parent component onu dinler ve data guncelleme islemini yapar. Bu en kisa ve en kolay cozum. Belki de en mantiklisi. Ikincisi ise Vuex falan kullanmak ki ben cok gerek oldugunu dusunmuyorum. Umarim aciklayici bir cevap olmustur.

Selam tekrar. Ben de bir dokümana göz attım tekrar. Direkt olarak one-way-flow demişler: "All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around." Ama senin dediğin gibi array ve objelerde iş değişiyormuş referans olayından dolayı. Ben datayı componente aktarınca reactivity Child a geçiyor sandım o nedenle ekranda görüyoruz diye düşünmüştüm ama senin dediğin gibi tek obje varmış. Sadece singular datalarda Parent ile binding yokmuş: "Note that objects and arrays in JavaScript are passed by reference, so if the prop is an array or object, mutating the object or array itself inside the child will affect parent state." Bu konuyu detaylandırdığımız iyi oldu. Videoların devamını da bekliyoruz...Detaylı cevabın için teşekkürler.

[@FatihAcet]

Rica ederim.

[@YasinUYSAL749]

Çok iyi. Teşekkürler Fatih

[@avnionur]

Yani öyle kararsız kaldım ki bu konuda teşekkür ediyorum, Vue kullanmalımıyım kullanmamalı mıyım... :D video için teşekkürler.. Şöyle birşey söyleyebilirim, belli seviyede olanlar için çok iyi ancak yeni başlayanlar için biraz daha kavramları açıklamak gerek tabi böyle bir hedef var ise... Videolar çok başarılı olmuş tekrar teşekkürler.

[@FatihAcet]

Selamlar, begendigine sevindim. Her seyi aciklayarak anlatmaya calisiyorum. Umarim yeni baslayanlar icin de yeterli oluyordur. Olmadi taraflari belirterseniz oralara daha cok onem vermek isterim.

[@keremunal9666]

hocam buralardaysanız söyler misiniz vue ya gectiniz mi gectiyseniz ne kadar tecrübeniz oldu bir kac soru sormak istiyorum

[@profflashmx]

Ders anlatımların çok güzel. Çok teşekkür ederim. Benim ufak bir sorum olacaktı. Subtotal ( 1 items ) yazdırırken sadece bir item olduğu için 1 item yazdıracak sanırım v-if gibisinden bir kontrol yapmamız gerekiyor.

[@FatihAcet]

Videoda bunu o sekilde yapmak lazim ama simdilik yapmiyoruz demistim zaten. Bir computed property ile halledebilirsin bu isi.

[@sevketyavuz3115]

Eline emeğine sağlık Fatih abi. Vue ile uygulama yazarken bu şekilde sonradan mı refactoring yapacağız yoksa baştan component olarak mı düşüneceğiz

[@FatihAcet]

Sevket selam. Bastan component olarak dusunmek ve o sekilde uygulamani planlaman en dogrusudur. Bu ornekte bu sekilde yapmamizin nedeni daha kompleks bir component nasil yapiliri gostermekti. Uygulamandaki tekrar kullanmak isteyecegin parcalari belirleyip onlari component olarak tasarlaman ve olusturman cok daha guzel ve zahmetsiz olacaktir.

[@nuptial91]

Abi başarılarının devamını dilerim.

[@ExehakanTV]

vuejs eğitimlerinize bayildim vuejs eğitim kaç aya çıkar ?

[@gersendir]

merhaba ,emeğinize sağlık , bir soru takılda aklıma VueCart olan component i neden vue-cart şeklinde kullandık. Arada tire olmasını ve neye göre olduğunu anlayamadım. Çok teşekkürler

[@playerberry]

vue derslerini vite+vue3 ve typescript kullanımı ile güncelleme şansınız var mı?

[@satranckardesligi5325]

merhabalar kullandığınız terimlerle ilgili bir sözlük yapar mısınız?

[@selcuk2321]

Adamsın..

[@ibrahimhalilucan]

Hocam laravel ile vue js kullanmaya yeni başladım npm ile paketleri indirdiğim halde form'u post ettiğimde datepicker,tags,ckeditör gibi inputlar null geliyor bu hata neyden kaynaklanıyor

[@FatihAcet]

ibrahim halil uçan bu sekilde hic bisey diyemem ki. Kod gormek lazim. JSFiddle falan gondermen lazim.

[@aligoren]

Hocam selam. Tip belirtme işlemini yaptık 17:20 de. Onun yerine direkt olarak :cart'dan gelen değeri alabilir miyiz?

[@FatihAcet]

Ali selam, sorunu tam anlayamadim malesef.

[@aligoren]

Hocam teşekkür ederim öncelikle açıklayıcı yazmamışım kusura bakmayın bunun için de özür dilerim ayrıca. Belirttiğim zamanda componentin hangi türden olduğunu belirtmek için type yolladık type="shoppingCart" gibi. Onun yerine direkt yukarıda bulunan :cart=cart üzerinden bilgi çekebiliyor muyuz? Oradaki :cart=cart ve type="shoppingCart" mesela farklılar.

[@FatihAcet]

Estagfurullah, onemli degil. Dedigin seyi direk uzerinde calistigimiz ve anlattigim kod ile yapamayiz. Cunku data'mizin icinde saved ve cart diye iki tane array var ama bunlarin icindeki item'larin cart array'inde mi oldugunu yoksa saved array'inde mi oldugunu soyleyecek bir bilgi yok. Statik olarak cartType gondermek cok guzel bir cozum degil, video konsepti geregi en kolay cozumdu. Belki datanin icine bir alan daha ekleyip hangi cart'da oldugunu burada tutabilirsin ama bu sefer de item'i cart'lar arasinda yer degistirdigin zaman bu cart tipini de degistirmen gerekecek. Ayni seyi yapmak icin iki farkli is yapmak zorunda kalacaksin. Yani tercih meselesi.

[@whatawonderfulperson]

Merhaba, VueCart isimli component'in HTML dosyasında olarak yazılma sebebi Camel Case midir? Component'in adı vuecart olsaydı da elementi olarak mı yazmamız gerekiyor? Teşekkürler.

[@FatihAcet]

camelCase olanlari tire ile ayiriyoruz. Cok buyuk ihtimalle component adi full lowercase olsaydi tire gerekmeyebilirdi. Denemek lazim.

[@muzafferkadir]

diğer bölümlere göre daha karışık bir bölüm olmuş daha düzenli bir sıra ile gidilebilirdi

[@balikhasan]

dostum herkesi ayni levelde sanip cok hızlı anlatiyorsun . ben hic birsey anlamadim