Vue.js Temel Eğitimi

Vue.js'in diğer özelliklerine geçmeden önce Directives (Direktifler) ve Reactivity'den (Tepkisellik) bahsedeceğiz. Böylelikle diğer konulara başlamadan önce Vue.js için sağlam bir altyapı oluşturacağız.

Directives (Direktifler) Vue.js'in temel yapı taşlarından biri. Bu özellik sayesinde dinamik ve esnek web arayüzleri oluşturmamız kolaylaşıyor.

v-for sayesinde Vue uygulamalarımızda for döngüsü yazmayı öğreniyoruz.

v-if ve v-show ile HTML elemanlarımızın görünürlüğünü nasıl değiştirebileceğimizi göreceğiz.

v-model ile iki yönlü data alışverişini Vue.js'te nasıl sağladığımızı öğreneceğiz.

v-bind uygulamalarımıza dinamik olarak CSS class'ları ya da başka attribute'lar eklemek için kullanılır.

v-on direktifi sayesinde HTML elemanlarımıza nasıl event listener ekleyebileceğimizi işleyeceğiz.

Bu derste çok sık kullanılmayan v-html, v-text ve v-once direktiflerini inceleyeceğiz.

Vue.js'in temel öğelerinden Reactivity'i (Tepkisellik) inceleyeceğiz ve Vue.js'in bu yapıyı nasıl oluşturduğunu detaylarıyla öğreneceğiz.

Şimdi bu derse kadar öğrendiklerimizi kullanarak basit bir hesap makinesi uygulaması geliştireceğiz.

Öğrendiklerimizi pekiştirmek için bahşiş hesaplayan bir Vue.js uygulaması geliştiriyoruz.

Vue.js uygulamalarında sıklıkla kullandığımız parçaları detaylı bir biçimde öğreneceğiz.

Vue.js uygulamalarımızda fonksiyonları nasıl yazdığımızı göreceğiz.

Computed Properties ile Data'mızı HTML Template'lerimizde farklı formatlarda görüntülemeyi öğreneceğiz.

Watchers (Gözlemciler) sayesinde değişkenlerimizin güncellenmesi anında farklı işlemler gerçekleştirebiliyoruz.

Vue.js'teki yaşam evrelerini ve bu evrelerde neler yapabileceğimizi göreceğiz.

Component'ler Vue.js uygulamalarımızın modular yapısını oluşturarak kodumuzu daha esnek ve sürdürebilir hale getirirler.

Bu derste  Component'lerin hangi öğelerden oluştuğunu inceleyeceğiz.

Parent objesinden Child objesine Props'lar vasıtasıyla nasıl data aktarımı yapıldığını göreceğiz.

Child objesinden parent objesine Events'ler sayesinde nasıl data yollayabileceğimizi öğreneceğiz.

Slots'lar Parent objemizden Child objesine data aktarmanın başka bir yolu.

Keep-Alive sayesinde Component'lerimizin State'lerini nasıl koruyabileceğimizi öğreneceğiz.

Filters'lar vasıtasıyla datamızın render edilirkenki formatını nasıl değiştirebileceğimizi inceleyeceğiz.

Mixins'ler sayesinde tekrardan kullanılabilir kodumuzu Component'ler arasında nasıl dağıtabileceğimizi göreceğiz.

Vue.js'in bize vermiş olduğu direktiflere ek olarak kendi direktiflerimizi nasıl oluşturabileceğimizi öğreniyoruz.

Vue.js'in Transitions ve Animations'ları başlangıç seviyesinde ele alacağız.

Bu derste Vue.js'te Transitions'ları meydana getiren v-enter, v-enter-active, v-enter-to, v-leave, v-leave-active ve v-leave-to State'lerini inceleyeceğiz.

Vue.js uygulamalarımızda CSS Animation'larını nasıl kullanabileceğimizi öğreniyoruz.

Vue.js'te Javascript Transition'larını nasıl ekleyebileceğimizi göreceğiz.

Component'ler arasında geçişlerimize Transition ekliyoruz.

Vue.js uygulamalarımızı nasıl Debug ve Test edebileceğimizi örneklerle inceleyeceğiz.

Debugging ve Test için kullanabileceğimiz bir proje oluşturuyoruz. Bu projenin son halini kaynaklar kısmından indirebilirsiniz.

Tarayıcılarımızla birlikte gelen Developer Tools'ları kullanarak uygulamalarımızı nasıl debug ettiğimizi göreceğiz. Ben bu örnekte Chrome tarayıcısını kullanacağım.

Vue Devtools bize Vue.js uygulamalarını debug etmek için ideal bir ortam oluşturuyor.

Unit Test'ler sayesinde uygulamalarımızdaki küçük kod parçacıklarının doğru çalışıp çalışmadığını kontrol edeceğiz.

Bu derste bir örnek Unit Test oluşturacağız.

Routing sayesinde Vue.js uygulamalarında Component'ler arasındaki geçişleri nasıl sağladığımızı ve parametrelerimizi URL'lerimizden nasıl aktardığımızı öğreneceğiz.

Bu dersten itibaren örneklerimiz için kullanacağımız Blog Uygulamasını geliştirmeye başlıyoruz.

Bu derste uygulamamıza navigasyonumuzu ekleyeceğiz.

Bu derste Dinamik URL yapılarını nasıl oluşturabileceğimizi öğreneceğiz.

Router konfigürasyon objesinde tanımladığımız isimlere göre yönlendirmelerimizi güncelliyoruz.

Nested Routes sayesinde URL'lerimizdeki hiyerarşiyi Router konfigürasyon objemize yansıtabiliyoruz.

Watchers'ları kullanarak parametre değişikliklerini nasıl takip edebileceğimizi öğreneceğiz.

RouterView Component'ine nasıl Transition ilave edebileceğimizi öğreneceğiz.

Query parametrelerine nasıl ulaşabileceğimizi inceleyeceğiz.

Vue Router'ı kullanarak Redirect'leri nasıl gerçekleştirdiğimizi öğreniyoruz.

Parametreleri this.$route objesinden almak yerine props olarak Component'lerimize nasıl aktarabileceğimizi inceleyeceğiz.

Vuex öğelerinden ve bu öğelerin kullanılma şeklinden kısaca bahsedeceğiz.

Blog uygulamamıza Vuex'i ekliyoruz.

Vuex State'i Blog uygulamamızda bir örnek ile inceleyeceğiz.

Getters'ları kullanarak State'imizdeki data'ları nasıl farklı biçimlerde HTML Template'lerimizde kullanabileceğimizi göreceğiz.

Mutations'ları kullanarak State'imizi synchronous olarak değiştirebiliyoruz.

Actions'lar sayesinde asynchronous işlemleri Vuex'te gerçekleştirmeyi öğreneceğiz.

Firebase'de Blog uygulamamız için gerekli altyapıyı oluşturuyoruz.

Firebase'i Vue.js uygulamamıza ekliyoruz.

Blog Component'imizi Firebase Database referansını kullanarak güncelliyoruz.

Search Component'ini yeni oluşturduğumuz Firebase yapısına göre güncelliyoruz.

Blog Detail Component'ini Firebase'in Database referansını kullanarak yenileyeceğiz.

Blog uygulamamıza Edit özelliğini ekliyoruz. Öncelikle bu özellik için gereken Markup'ımızı oluşturacağız.

Bu derste Edit özelliği için Firebase bağlantısını gerçekleştireceğiz.

Blog uygulamamıza makale silme işlemini ekleyeceğiz.

Bu derste Blog uygulamamızda nasıl yeni makale ekleyebileceğimizi göreceğiz.

Kodumuzu yazarken oluşturduğumuz Bug'ları temizliyoruz.

Blog uygulamamızı bu sefer unique ID yapısına göre güncelliyeceğiz.