Sıfırdan İleri Seviye Vue.JS Eğitimi ve Uygulama Geliştirme
4.8 (1,230 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,600 students enrolled

Sıfırdan İleri Seviye Vue.JS Eğitimi ve Uygulama Geliştirme

Vue Router & Vuex dahildir! Angular ve React 'ın en modern özelliklerine sahip JavaScript framework'ü VueJS 'i öğrenin!
4.8 (1,230 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
3,597 students enrolled
Created by Gökhan Kandemir
Last updated 8/2019
Turkish
Current price: $64.99 Original price: $99.99 Discount: 35% off
13 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 28 hours on-demand video
  • 30 articles
  • 45 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Mükemmel VueJS uygulamaları geliştirmenizi sağlayacak. Küçük ve basit uygulamalardan, Enterprise Seviyesinde Uygulama geliştirmeye kadar tüm seviyeleri geliştirebileceksiniz
  • VueJS' in arkasında çalışan yapıyı anlayacak ve bu bilgiyi gerçek uygulamalar içinde uygulayabileceksiniz
  • VueJS' in hem çoklu sayfalarda hem de Single Page Application (MPA, SPA) ile kullanımı göreceksiniz
Course content
Expand all 397 lectures 27:51:57
+ Vue.js ile DOM Etkileşimleri
26 lectures 01:35:10
Bölüm Tanıtımı
01:16
VueJS Template yapısını kavrayalım
03:21
VueJS Template Syntax ve Vue instance birlikte nasıl çalışır?
03:05
Vue instance içerisindeki data property bilgilerine ulaşmak
03:10
Attribute Bind İşlemi
03:14
Directive Kullanımı
02:14
v-once ile re-render işlemini engellemek
02:51
HTML kodlarını Vue.js üzerinden ekrana basmak
02:48
Ödevler ile ilgili Hatırlatma
00:26
Artık VueJS Template Syntax' ını ve bir data'yı template üzerinde nasıl yazdıcağını öğrendin. Şimdi ilk ödev ile beraber pratik zamanı!
Pratik Zamanı - Template' e Veri Yazdırmak
1 question
VueJS ile Event Dinlemek
04:06
Event Objesinden Event verisini almak
04:08
Event içerisinde argüman göndermek
03:55
Event Modifier
02:31
Klavye Event'leri
03:45
VueJS ' de usta olma yolunda çok önemli bir adımı attık. Şimdi Eventleri VueJS Uygulaması içerisinde kullanmanın tam sırası!!
Pratik Zamanı - Events
1 question
Template içerisinde JavaScript Kodu yazmak
05:35
Two-way Data Binding (İki Yönlü Veri İletişimi)
03:18
Computed Properties ile Değişikliklere Karşılık Vermek!
14:31
Computed Properties ‘ e alternatif Watch!
05:11
Kısaltmalarla zaman kazanalım
02:47
Son derslerle beraber VueJS' in Reactivity konusunu nasıl ele aldığını ayrıntılı bir şekilde öğrendik. Artık öğrendiklerimizi görme ve kendimizi test etme zamanı yani sınav zamanı :)
Pratik Zamanı - Reactive Properties
1 question
CSS Classlarıyla Dinamik Stil İşlemleri | Temelleri
07:47
CSS Classlarıyla Dinamik Stil İşlemleri | Object Kullanımı
03:02
CSS Classlarıyla Dinamik Stil İşlemleri | Name Kullanımı
03:35
CSS Classları olmadan dinamik olarak Stil işlemleri
04:15
Elementleri Array Syntax ile Stillendirme İşlemi
02:37
Bu bölümde birçok konuyu ele aldık. Son derslerde; Elementleri dinamik olarak nasıl CSS Class'ları ve Style attribute' ü kullanarak stillendirebileceğimizi gördük. Artık bunları güzel bir sınav ile test etme ve pratik etme zamanı :)
Pratik Zamanı - Style İşlemleri
1 question
Bölüm Sonu
01:33
Bölüm Kaynakları ve Yararlı Linkler
00:09
+ Koşul Kullanımı ve Listeleri Render Etmek
12 lectures 29:01
Bölüm Tanıtımı
01:15
v-if ile koşul eklemek (Template)
05:23
v-show kullanımı (v-if alternatifi)
01:46
v-if ile v-show arasındaki fark
02:07
v-for ile listeleri render etmek
04:02
Aktif index numarasını almak
01:03
v-for ile aynı seviyedeki elementleri Template ile döndürmek
02:51
v-for ile object verilerini döndürmek
03:59
v-for ile belirli sayıda döngü kurmak
01:20
v-for kullanırken elementlerin izini sürmek (v-bind:key)
04:28
Koşullar ve Listeler VueJS ve yapıların temel özellikleridir. Muhtemelen tüm VueJS uygulamalarımızda kullanacağız bu yapıları. O halde o kadar gördüğümüz bilgiyi bir test edelim :)
Pratik Zamanı - Koşullar ve Listeler
1 question
Bölüm Sonu
00:44
Bölüm Kaynakları ve Yararlı Linkler
00:03
+ İlk Proje | Canavar Avı Oyunu
13 lectures 54:51
Ortamın Hazırlanması ve instance tanımlamaları
08:09
Butonların kodlanması
07:34
Health bilgilerinin gösterilmesi
02:52
Progressbar dinamikleştirme | Style Binding
02:19
Watch ile Health İzleme
03:52
Oyunu tekrardan başlatalım
02:54
Log mantığının yapımı
06:32
Logların Stillendirilmesi | Class Binding
02:40
Yeni oyunla beraber eski logların silinmesi
02:35
Kod Optimizasyonu (Opsiyonel)
10:02
Bölüm Sonu
01:04
Bölüm Kaynakları ve Açıklamalar
00:24
+ VueJS Instance Nedir? Kavrayalım
16 lectures 01:08:08
Bölüm Tanıtımı
01:10
VueJS Instance ile ilgili bazı temel bilgiler
05:01
Birden fazla Vue Instance ile çalışmak
02:44
Vue Instance ‘ a dışarıdan ulaşmak
04:13
VueJS Data ve Method Verilerini Nasıl Yönetir?
07:36
$el ve $data objelerine daha yakından bakalım
05:48
Template içinde $refs kullanımı
06:24
Vue API Hakkında
00:51
Template Mount Etme İşlemi
10:02
Component Kullanımı
06:22
String Template’ın kullanımındaki Limitler
03:18
VueJS DOM’u nasıl Günceller? VueJS ile DOM Etkileşimi
03:39
VueJS Instance için Yaşam Döngüsü (LifeCycle)
04:31
Pratikte LifeCycle
05:07
Bölüm Sonu
01:19
Bölüm Kaynakları ve Yararlı Linkler
00:03
+ Webpack ve Vue CLI ile Gerçek Geliştirme Ortamına Geçiş
11 lectures 40:52
Neden Development Server’a ihtiyacımız var?
06:01
Development Workflow Ne demek?
04:38
Proje Oluştururken Vue CLI Kullanımı
02:28
Vue CLI kurulumu ve Yeni Proje Oluşturmak
08:04
Webpack Template Klasör Yapısı
02:58
.vue dosyalarının incelemesi
08:54
Vue Dosyalarının içindeki Object Nedir?
02:46
Production için Uygulamayı Derlemek
02:19
Bölüm Sonu
00:55
Bölüm Kaynakları ve Yararlı Linkler
00:16
+ Component Yapısına Giriş
12 lectures 54:29
Bölüm Tanıtımı
01:17
Component yapısına giriş
06:54
Component içinde Data Metodu ile Veri Depolama
05:41
Component’leri Local ve Global olarak Kayıt Etmek
02:39
App.vue dosyası içindeki Root Component
05:00
Component Oluşturmak
08:59
Component Kullanımı
08:09
Component'ler VueJS' in bize sunduğu oldukça kullanışlı ve çok yönlü özelliklerdir. Bu sınavda, Component'ler ile ilgili teorik ve teknik bilgilerimizi test edeceğiz :)
Pratik Zamanı - Component
1 question
Klasör yapısını daha iyi hale getirelim!
04:28
Component Etiketlerini isimlendirme işlemi (Seçiciler)
05:57
Component Style Scope İşlemi
04:34
Bölüm Sonu
00:37
Bölüm Kaynakları ve Yararlı Linkler
00:14
+ Component'ler Arası İletişim
13 lectures 40:26
Bölüm Tanıtımı
01:18
İletişim Problemleri
03:11
Parent => Child Arası iletişim (Props)
04:32
Props verilerini isimlendirme hakkında (Case Sensitive)
01:10
Child Component içinde props kullanımı (Method içinde)
01:33
Props Validation
04:20
Child => Parent Arası iletişim (Custom Events)
06:18
Component İletişimi
01:24
Sibling Child arası iletişim Child1 => Parent => Child2
06:34
Event Bus Kullanımı
06:46
Event Bus ile İletişimi Birleştirmek
02:25
Component üretebiliyor olmak mükemmel, fakat bu component' lerin arasında iletişim kurabilmek de oldukça önemli bir durum. Bu sınav senin bu iletişimi nasıl kurabildiğini test eden bir sınav! Sınavın tadını çıkar :) Başarılar
Pratik Zamanı - Component’ler arası İletişim
1 question
Bölüm Sonu
00:50
Bölüm Kaynakları ve Yararlı Linkler
00:05
+ Gelişmiş Component Kullanımı
13 lectures 30:48
Bölüm Tanıtımı
00:41
Bölüm Projesi Ayarları
05:42
İçerik Göndermek | İdeal Olmayan
01:27
Slot ile İçerik Göndermek
01:46
Named Slots ile İçerikleri Ayrıştırmak
02:34
Default Slot ve Slot Defaults
03:00
Slot hakkında kısa bir özet
01:42
Birden fazla component arasında dinamik olarak switch işlemi
07:15
Dinamik component’lerin davranışını anlayalım!
02:39
Dinamik component’leri Canlı tutmak (keep-alive)
01:23
Dinamik Component'lerde LifeCycle Hook
01:57
Mükemmel!! Component'ler ile ilgili birçok bilgiye sahipsin artık. Şimdi bu ileri seviye Component bilgini bir test edelim :)
Pratik Zamanı - Slot ve Dinamik Component’ler
1 question
Bölüm Sonu
00:36
Bölüm Kaynakları ve Yararlı Linkler
00:06
+ Proje | Ürün Ekleme Uygulaması
12 lectures 42:16
Ortamın Hazırlanması ve Component Yapısının Oluşturulması
10:03
data ve methods verilerinin component'ler arasındaki dağılımı
03:54
Resim seç butonunun mantığı
04:20
Ürün ekle butonunun kodlanması
03:20
eventBus ile eklenen ürünü listeye aktarmak
05:31
Ürün listesinin dinamik olarak getirilmesi
02:10
Progressbar componenti'nin aktifleştirilmesi
07:04
BONUS : v-if ile eklenen ürünler listesinin gösterilip gösterilmemesi
01:46
BONUS : Style scoped hatırlatması
00:47
Bölüm Sonu
00:47
Bölüm Kaynakları ve Açıklamalar
00:29
Requirements
  • Temel JavaScript bilgisi gereklidir
  • ES6 bilgisi bir avantaj sağlar fakat gerekli değildir
  • Temel HTML ve CSS bilgisi istenir
Description

Nereye bakarsanız bakın (Google Trendleri, Github ‘da Star, Tweet sayısı…) VueJS JavaScript Framework dünyasında yükselen bir değer. VueJS inanılmaz bir Framework!!

Frontend Frameworkleri, bize Reactivity verdiği için inanılmaz popüler. Mobil Uygulamalardan bildiğimiz mükemmel kullanıcı deneyimi, artık bu frameworkler sayesinde bu mükemmel kullanıcı deneyimi tarayıcılarda da mümkün. Şüphesiz ki Frontend dünyasında en fazla ücret ödenen geliştiriciler, bu tarz JavaScript Framework’lerine ( VueJS gibi ) hakim olan geliştiriciler. Bundan dolayı JavaScript Framework'leri bu alanda çok değerli.

Angular2 ya da ReactJS biliyor olabilirsin, VueJS bu iki framework’ün en iyi özelliklerini kendi bünyesinde birleştirir. Ayrıca VueJS ile küçük Widget tasarımından büyüğüne, Enterprise Seviyesinde uygulama geliştirebilirsin ve bunu yaparken VueJS’ in oldukça kolay yapısıyla eğlenebilirsin. 

Eğer bu 2 framework hakkında bir bilgin yoksa da endişelenme sakın. Çünkü bu kurs diğer iki framework ile ilgili herhangi bir bilgi içermiyor. Kurs içerisinde VueJS’i sıfırdan öğrenmeye başlayıp, VueJS uzmanı olana kadar kodlamaya devam edeceğiz.

Kursun İçinde;

  • VueJS nedir? Nasıl Ortaya Çıktı? Neden Kullanılır?

  • DOM etkileşimleri

  • Koşullar ve Liste Render İşlemleri

  • Dinamik CSS ve Style İşlemleri

  • Derinlemesine Vue Instance

  • Development Server

  • Webpack

  • Component Yapısı

  • Component'ler Arası İletişim

  • Gelişmiş Component Kullanımı

  • Directive Kullanımı

  • Filter ve Mixin ile Çalışmak

  • Animation ve Transition

  • Vue Resource ile HTTP Request Yönetimi

  • Vue Router ile Single Page Application Yapımı (SPA)

  • Vuex ile State Management

  • AWS üzerinde uygulamayı Deploy etmek

  • Axios ile HTTP Request Yönetimi

  • Vuelidate ile Input Validation

  • VueJS Uygulamalarında Auth İşlemleri

  • VueJS ile Firebase Kullanımı

ve çok daha fazlasını detaylı bir şekilde öğreniyoruz. Ayrıca Kurs içinde seni hemen hemen her bölümde en az 1 tane ödev bekliyor. Ödevler seni, öğrendiklerini daha iyi pratik yapman ve VueJS konseptini daha iyi öğrenmen için oldukça önemlidir.

Tabiki sadece ödevlerle kursumuz bitmiyor. Kurs boyunca birbirinden güzel ve eğlenceli, öğretici 6 uygulama yapıyoruz. Bunlar;

  • Canvar Avı Oyunu

  • Anı Defteri Uygulaması

  • Stok Alış Verişi Uygulaması

  • Film Arşivim Uygulaması

  • TODO List Uygulaması

  • Ticket Sistemi Uygulaması

geliştiriyoruz. Bu kadar içerik varken neden hala kursun açıklamalarına bakıyoruz :) Hadi hemen kursa katıl ve VueJS'in sayısız avantajlarından yararlanıp, geliştiriciler arasında 1 adım öne çıkmaya hemen başlayalım!!


######### Bu Kurs senin için mi? #########

Bu kurs hakkında eğer bir bilgi varsa, bir bakalım bu kurs senin için mi? 

Bu kursa aşık olacak 4 tip öğrenci vardır:

1.Öğrenci:

Biraz JavaScript tecrübesine sahip olan ve JavaScript ile neler yapılabileceğine karşı ilgisi olan. JavaScript’in güzel Web Uygulamalarını yapabildiğini ve varolan Web Sayfalarının özelliklerini yükseltebildiğini duymuş ve okumuş olan. VueJS senin tercihin :)

2.Öğrenci:

Diğer Frontend Framework’leri (Angular2 veya ReactJS) hakkında tecrübesi olan ancak bu frameworkler’den kaynaklı olarak hayal kırıklığı yaşan ve alternatif arayan. VueJS senin aradığın olabilir.

3.Öğrenci:

Backend Framework ya da dilleriyle tecrübesi olan ama Frontend dünyasına girmek isteyen. VueJS mükemmel bir seçim. VueJS çok eğlenceli bir framework’dür. Native JS kullanır ve oldukça güçlüdür.

4.Öğrenci:

Angular 2 seni hayal kırıklığına mı uğrattı. Bir Framework’ün 2 saat kurulum aşaması iyi midir? Bence değildir. İşte VueJS bunu size kanıtlayacaktır :)

Hadi VueJS’ e derinlemesine girelim!

Who this course is for:
  • Bu kurs, Frontend Development ve Önemli Frontend Framework'lerine karşı ilgisi olan herkes için
  • Tarayıcı üzerinde Reaktif uygulamalar geliştirmek istiyorsan bu kurs senin için
  • Bu kurs, Angular2' den daha basit bir başlangıç ile Native JavaScript Framework'ü kullanmak isteyen herkes için
  • Bu kurs, Angular2 ve ReactJS' den memnun olmayan herkes için