Açıklama
Vue.JS, kullanıcı arayüzleri (UI’ler) ve tek sayfalı uygulamalar (SPA’lar) oluşturmak için bir geliştirilmiş bir JavaScript frameworküdür.
Diğer rakipleri gibi, VJS de açık kaynaklıdır. Diğer monolitik çerçevelerden farklı olarak Vue, sıfırdan aşamalı olarak benimsenebilecek şekilde tasarlanmıştır. VJS, yazılım geliştirme süreciyle ilgili olarak aşamalı tasarımı felsefesini benimseyen ve merkeze alan bir yapıya sahiptir.
Vue.js, çoğu JavaScript frameworkünden beklediğinizden biraz daha azını sunar. Çekirdek kitaplık yalnızca görünüm katmanına odaklanmıştır ve diğer kitaplıklar veya mevcut projelerle alınması ve entegre edilmesi kolaydır. Diğerlerinde kullandığınız özelliklerin çoğuna VJS’te hazır olarak erişemezsiniz. Ancak yine de; tahmin edebileceğinizden daha karmaşık ve teknolojik gelişmelerle dolu bir dünyada, bazen basit olmak iyi bir şeydir. VJS sadece bu amaç için sunulan bir frameworktür.
VJS’in en büyük avantajlarından biri, başlamanın kolay olmasıdır. VJS, “kademeli olarak benimsenebilir” olarak da adlandırılır. Bu, Vue.js ve onu kullanan uygulamaların sıfırdan tasarlandığı anlamına gelir. Buradaki avantaj, başlamanın kolay olmasıdır ve ihtiyaç duyduğunuzda daha ileri seviye uygulamalara geçiş yapabilirsiniz.
VJS’in temel kütüphanesi aynı zamanda, herhangi bir web geliştirme projesinin en önemli bileşenleri olan CSS, HTML ve JavaScript’e dayanmaktadır.
Vue.JS, yalnızca standart HTML, CSS ve JavaScript ile kullanılabildiğinden, VJS’de bir UI projesi oluşturmak oldukça kolaydır.
VJS’in küçük öğrenme eğrisi ve hızlı oluşturma gibi diğer özellikleri de büyük bir avantaj sağlar. VJS’de ek işlevsellik için isteyeceğiniz özellikler, framework’ün resmi kütüphaneleri tarafından zamanla kapsanmaktadır. Temelleri ayarladıktan sonra, muhtemelen yönlendirme ve durum yönetimi en büyük endişeleriniz olacaktır. Yönlendirme, HTTP isteklerini onları işleyen koda yönlendiren mekanizmadır. Durum yönetimi, metin alanları ve işlevsel butonlar gibi UI kontrollerinin bir durumdan diğerine işlenmesidir.
Öte yandan Vue, modern araçlar ve destekleyici kitaplıklarla birlikte kullanıldığında sofistike tek sayfa uygulamalarına mükemmel bir şekilde güç sağlar.
HTML, CSS ve JavaScript becerilerinizi bugün mevcut olan en yeni JavaScript çerçevelerinden biri olan Vue.js’yi öğrenerek kendinizi geliştirmeye sağlam adımlarla devam edebilirsiniz.
VJS, kullanıcı arayüzleri oluşturmak için eğlenceli ve kullanımı kolay bir JavaScript çerçevesidir. Çerçevenin özü basit ve hızlıdır; her boyuttaki projede kullanılabilir.
Vue.JS eğitimi esas olarak modern ve basit bir JavaScript çerçevesi öğrenmek isteyen JavaScript meraklılarını hedeflemektedir.
Eğitim Hakkında
Eğitim Hedefleri:
- JS DOM Etkileşimleri
- Class ve Style İşlemleri
- JS Koşul Kullanımı ve Listeler
- JS Instance
- Vue CLI Kurulumu
- Component ile çalışmak ve Componentler arası iletişim
- Directive, Filter ve Mixins Kullanımı
- JS ile HTTP İstekleri atmak (Axios)
- Vue Router ile Routing Yapısı
- Vuex ile State yönetimi
- Deployment İşlemleri
Eğitim İçeriği
- JS Nedir?
JS Neden kullanılmalıdır?
Vue, React, Angular kıyaslaması
Basit Vue uygulaması oluşturmak
JS DOM Etkileşimleri
Vue Template Yapısı
Template Syntax ve Vue instance nasıl çalışır?
Instance içerisindeki data property bilgilerine ulaşmak
Attribute Bind
Directive Nedir? Nasıl kullanılır?
HTML kodlarını Template üzerinde göstermek
Event Dinlemek
$event objesinden veri almak
Event modifier
Template içerisinde JavaScript kodu yazmak
Two Way DataBinding
Computed Property Kullanımı
Watcher Kullanımı
- Class ve Style İşlemleri
Dinamik olarak CSS Class ekleme işlemi
Dinamik olarak Stil kodları ekleme işlemi
- JS Koşul Kullanımı ve Listeler
v-if, v-else-if, v-else kullanımı
v-show kullanımı
v-if ile v-show farkı
v-for ile listeleri render etmek
v-for ile object döndürmek
v-for ile index numarasını almak
Listelerde v-bind:key özelliği
- JS Instance Nedir?
Vue Instance ile ilgili temel bilgiler
Birden fazla Vue instance ile çalışmak
Vue Instance’a dışarıdan ulaşmak
Vue Data ve Method verilerini nasıl yönetir?
$el ve $data objelerine daha yakından bakalım
Template içinde $refs kullanımı
Vue LifeCycle
- Vue CLI Kurulumu
- Component Yapısına Giriş
Component Neden Kullanılır?
Kaç farklı component tanımlanabilir?
Component içerisinde data metodu ile veri depolama
Component’ leri Lokal ve Global olarak kayıt ettirmek
vue içerisindeki Root Component
- Component ile Çalışmak
Component yapısını daha iyi hale getirmek
Component’ leri İsimlendirmek
Component Style Scope İşlemleri
- Componentler arası iletişim
İletişim Problemleri
Parent => Child Arası iletişim
Child => Parent Arası iletişim
Child => Child Arası iletişim
Event Bus Kullanımı
Ödev – Pratik
- Gelişmiş Component Kullanımı
İçerik Göndermek
Slot ile içerik göndermek
Named Slots ile içerikleri ayrıştırmak
Default Slot ve Slot Defaults
Componentler arasında dinamik olarak Switch işlemi Dinamik Component’ lerin davranışını anlayalım!
Dinamik Component’ leri canlı tutmak (keep alive)
Dinamik Component’ lerde LifeCycle Hooks
- Directive Kullanım
Directive nasıl çalışır? Hook fonksiyonları
Basit directive oluşturmak
Directive’e veri göndermek
Directive’e argüman göndermek
Modifier ile directive değiştirmek
Directive’lerin local olarak tanımlanması
- Filter ve Mixins Kullanımı
Local Filter Oluşturmak
Global Filter ve birden fazla Filter’ı zincirleme olarak kullanmak
Filter’a alternatif (Computed Property)
Mixins Nedir? Mixins yapısını anlayalım
Mimin oluşturma ve kullanma
Mixin’ler nasıl birleştirilir?
Global Mixin oluşturma
Mixin ve Scope Kavramı
- JS ile HTTP İstekleri atmak (Axios)
Axios sınıfının yüklenmesi
GET isteği
POST isteği
PATCH isteği
DELETE isteği
GET ile beraber Parametre gönderimi (istisnaî durum)
Custom Axios Instance oluşturmak
- Vue Router ile Routing Yapısı
Router ve Route Nedir?
Route tanımlamak
Routing Metodları
Lazy Routing
Router Linkler ile Componentler arası gezinme
Neredeyim ben? Aktif Linkleri Stillendirme
JavaScript üzerinden routing işlemleri
Route ile parametre gönderme ve okuma
Redirect İşlemi
- Örnek Uygulama (CRUD işlemleri)
- Vuex ile State Management
Neden daha farklı bir State Yönetimine ihtiyacımız var?
Central Store ve State Kavramları
Vuex Yapılandırması ve Store Oluşturmak
State Verilerine Ulaşım yöntemleri
Getters Nedir? Nasıl Çalışır?
mapGetters kullanımı
Getters için spread operator kullanımı
Mutations Nedir? Nasıl Çalışır?
Mutations Kullanımı
mapMutations Kullanımı
Actions Nedir? Nasıl Çalışır?
mapActions kullanımı
Mutations ve Actions içerisinde parametre kullanımı
Modül Sistemi
- Örnek Uygulamalar
Auth İşlemleri
Component Hazırlayıp NPM üzerinden Yayınlamak
Translate API ile Translator Yapımı
- Deployment İşlemleri
Vue Projesini Canlı Sisteme Almak
Eğitimi Kimler Almalı?
- Öncelikle HTML, CSS ve JavaScript gibi temel web teknolojilerine hakim olan kişiler,
- Web geliştiricileri, Front-end geliştiricileri ve web tasarımcıları gibi web uygulamaları geliştirmekle ilgilenen kişiler,
- VJS, her türlü sektörde kullanılabilen bir framework’tür ve web uygulamalarının geliştirilmesinde kullanılabilir. Özellikle e-ticaret, sosyal medya, haber siteleri gibi dinamik içeriğe sahip web sitelerinin geliştirilmesinde de sıklıkla tercih edilmektedir.
- Bilgisayar ve yazılım mühendisliğine yeni başlayanlar,
- Front End Framework kavramına hakim olmak isteyenler,
- VueJS ile uygulama geliştirme sürecine hâkim olmak isteyen herkes.
Gereksinimler
Temel seviye JavaScript, HTML ve CSS bilgisi gerekmektedir.
Bu eğitimi kurumsal olarak planlayın!
Bu eğitim kurumunuza özel farklı sürelerde ve içerikte planlanabilir. Eğitim hedeflerini gerçekleştirmek için detaylı zengin içerik ve planlama için bizimle iletişime geçiniz.
