Vue.Js

Eğitim Tipi : Sanal Sınıf / Online
Süre : 5 Gün
  1. Anasayfa
  2. /
  3. Vue.Js

Açıklama

    Vue, kullanıcı arayüzleri oluşturmak için aşamalı bir çerçevedir. Diğer monolitik çerçevelerden farklı olarak Vue, sıfırdan aşamalı olarak benimsenebilecek şekilde tasarlanmıştır. Ç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. Ö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 bir sonraki seviyeye taşıyın! Vue.js, 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.

    Bu eğitim esas olarak modern ve basit bir JavaScript çerçevesi öğrenmek isteyen JavaScript meraklılarını hedeflemektedir.

     

    Bu eğitimde neler öğreneceksiniz?
    • Vue.js DOM Etkileşimleri
    • Class ve Style İşlemleri
    • Vue.js Koşul Kullanımı ve Listeler
    • Vue.js Instance
    • Vue CLI Kurulumu
    • Component ile çalışmak  ve Componentler arası iletişim
    • Directive, Filter ve Mixins Kullanımı
    • Vue.js ile HTTP İstekleri atmak (Axios)
    • Vue Router ile Routing Yapısı
    • Vuex ile State yönetimi
    • Deployment İşlemleri

Eğitim İçeriği

Vue.js Nedir? 

  • js Neden kullanılmalıdır?
  • Vue, React, Angular kıyaslaması
  • Basit Vue uygulaması oluşturmak

Vue.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

Vue.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

Vue.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
  • Ödev – Pratik

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ı

Vue.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

Ön Koşullar

Temel seviye JavaScript, HTML ve CSS bilgisi gerekmektedir.