vue js nedir?

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