VueJS kullanıcı arayüzleri geliştirmek için kullanılan interaktif bir frontend kütüphanesi yada çerçevesidir Son zamanların en popüler frontend teknolojilerinden biridir Hatta 2019 temmuz sonu itibariyle Github’da 108 bin yıldız ile en büyük rakiplerinden React ve Angular’ı geride bırakmayı başardı
VueJS öğrenmesi ve kullanımı diğer framework(çerçeve)lere göre daha kolay ve anlaşılırdır Sade ve anlaşılır bir dökümantasyon yapısına sahiptir VueJS dökümantasyonuna :vueorgv2guideindexhtml adresinden ulaşabilirsiniz
VueJS’in varolan bir projeye dahil edilmesi çok kolay olduğu için kullanımı hızla artmaya devam ediyor Geliştirmekte olduğunuz bir projeye sadece VueJS javascript dosyasını dahil ederek kullanmaya başlayabilirsiniz
6Kurulum
CDN ile :
script src :cdndelivrnetnpmvuedistvue script
NPM ile,
$ npm install vue
VueJS view odaklı bir framework olduğu için ajax, router, state management gibi işlemleri kapsamaz Fakat vue github sayfasında bulunan birçok eklenti ile bu işlemleri yapabilirsiniz Eklentilere :githubcomvueawesomevue adresinden ulaşabilirsiniz
5Basit bir VueJS uygulaması
► HTML :
id app
{{ message }}
► JS :
var app new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
Sayfa çıktısı : Hello World!
6VueJS Avantajları :
61 Düşük boyut ve hız
Bir kütüphane ne kadar düşük boyutta ise o kadar iyidir VueJS’in en büyük avantajlarından birisi boyutudur Kurulan plugin(eklenti)’e bağlı VueJS boyutu 18–21KB arasındadır Boyuta bağlı hızı da rakiplerine oranla çok daha iyidir
62 Öğrenim kolaylığı
Anlaşılması kolay dökümantasyon ve basit syntax (sözdizimi) ile öğrenim kolaylığı sağlar
63 Esnek yapı
Projenizin durumuna bağlı farklı eklentiler veya farklı çözümler üretebilmenize olanak sağlar Kullanmayacağınız bir uygulamayı projenize dahil etmek zorunda bırakmaz
64 Basit Entegrasyon
Yukarıdaki örnekte olduğu gibi sadece dosyasını dahil ederek projenizde kullanabilirsiniz
65 Topluluk
Hızla büyüyen bir topluluğa sahip olan VueJS geliştirme aşamasında yaşayacağınız sorunlara cevap bulmakta çok önemli bir avantaj olacaktır Ayrıca neredeyse en problem için hazırlanmış pluginlerde size çok kolaylık sağlayacaktır
66 Virtual Dom Yapısı
Virtual dom, react tarafından kullanılmış bir özelliktir Avantajı ise projede değişiklik yapıldıkça, doğrudan dom'un değil, memory'deki dom'un clone'nin güncellenmesi ve aradaki farkların uygun zamanda gerçek dom'a yansıtılmasıdır
Ayrıca VueJS component (bileşen) yapısını destekler Yani dom üzerinde ihtiyacınıza bağlı tasarlayacağınız etiketlerle component template (bileşen teması) ve bileşenlere ait child componentler (alt bileşenler) oluşturabilirsiniz Aşağıdaki resim bu yapıyı temsil etmektedir
Basit Component Örneği :
► JS:
Vuecomponent('buttoncounter', {
data: function () {
return {
count: 0
}
},
template: 'button von:click count++You clicked me {{ count }} timesbutton'
})
► HTML:
id componentsdemo
buttoncounterbuttoncounter
Ve son olarak VueJS‘i bazı bölümlerinde yada tamamen kullanan büyük çaplı sitelere göz atalım:
1
*Facebook
*Netflix
*Gitlab
*Adobe
*Alibaba
*Behance
Bu makalede VueJS nedir,avantajları nelerdir sorularına cevap aramaya çalıştık ve VueJS kullanan büyük çaplı siteleri öğrendik
VueJS öğrenmesi ve kullanımı diğer framework(çerçeve)lere göre daha kolay ve anlaşılırdır Sade ve anlaşılır bir dökümantasyon yapısına sahiptir VueJS dökümantasyonuna :vueorgv2guideindexhtml adresinden ulaşabilirsiniz
VueJS’in varolan bir projeye dahil edilmesi çok kolay olduğu için kullanımı hızla artmaya devam ediyor Geliştirmekte olduğunuz bir projeye sadece VueJS javascript dosyasını dahil ederek kullanmaya başlayabilirsiniz
6Kurulum
CDN ile :
script src :cdndelivrnetnpmvuedistvue script
NPM ile,
$ npm install vue
VueJS view odaklı bir framework olduğu için ajax, router, state management gibi işlemleri kapsamaz Fakat vue github sayfasında bulunan birçok eklenti ile bu işlemleri yapabilirsiniz Eklentilere :githubcomvueawesomevue adresinden ulaşabilirsiniz
5Basit bir VueJS uygulaması
► HTML :
id app
{{ message }}
► JS :
var app new Vue({
el: '#app',
data: {
message: 'Hello World!'
}
})
Sayfa çıktısı : Hello World!
6VueJS Avantajları :
61 Düşük boyut ve hız
Bir kütüphane ne kadar düşük boyutta ise o kadar iyidir VueJS’in en büyük avantajlarından birisi boyutudur Kurulan plugin(eklenti)’e bağlı VueJS boyutu 18–21KB arasındadır Boyuta bağlı hızı da rakiplerine oranla çok daha iyidir
62 Öğrenim kolaylığı
Anlaşılması kolay dökümantasyon ve basit syntax (sözdizimi) ile öğrenim kolaylığı sağlar
63 Esnek yapı
Projenizin durumuna bağlı farklı eklentiler veya farklı çözümler üretebilmenize olanak sağlar Kullanmayacağınız bir uygulamayı projenize dahil etmek zorunda bırakmaz
64 Basit Entegrasyon
Yukarıdaki örnekte olduğu gibi sadece dosyasını dahil ederek projenizde kullanabilirsiniz
65 Topluluk
Hızla büyüyen bir topluluğa sahip olan VueJS geliştirme aşamasında yaşayacağınız sorunlara cevap bulmakta çok önemli bir avantaj olacaktır Ayrıca neredeyse en problem için hazırlanmış pluginlerde size çok kolaylık sağlayacaktır
66 Virtual Dom Yapısı
Virtual dom, react tarafından kullanılmış bir özelliktir Avantajı ise projede değişiklik yapıldıkça, doğrudan dom'un değil, memory'deki dom'un clone'nin güncellenmesi ve aradaki farkların uygun zamanda gerçek dom'a yansıtılmasıdır
Ayrıca VueJS component (bileşen) yapısını destekler Yani dom üzerinde ihtiyacınıza bağlı tasarlayacağınız etiketlerle component template (bileşen teması) ve bileşenlere ait child componentler (alt bileşenler) oluşturabilirsiniz Aşağıdaki resim bu yapıyı temsil etmektedir
Basit Component Örneği :
► JS:
Vuecomponent('buttoncounter', {
data: function () {
return {
count: 0
}
},
template: 'button von:click count++You clicked me {{ count }} timesbutton'
})
► HTML:
id componentsdemo
buttoncounterbuttoncounter
Ve son olarak VueJS‘i bazı bölümlerinde yada tamamen kullanan büyük çaplı sitelere göz atalım:
1
*Netflix
*Gitlab
*Adobe
*Alibaba
*Behance
Bu makalede VueJS nedir,avantajları nelerdir sorularına cevap aramaya çalıştık ve VueJS kullanan büyük çaplı siteleri öğrendik
