VueJS kullanıcı arayuzleri geliştirmek icin kullanılan interaktif bir front-end kutuphanesi yada cercevesidir. Son zamanların en populer front-end teknolojilerinden biridir. Hatta 2018 temmuz sonu itibariyle Github’da 108 bin yıldız ile en buyuk rakiplerinden React ve Angular’ı geride bırakmayı başardı.
VueJS oğrenmesi ve kullanımı diğer framework(cerceve)lere gore daha kolay ve anlaşılırdır. Sade ve anlaşılır bir dokumantasyon yapısına sahiptir. VueJS dokumantasyonuna https://vuejs.org/v2/guide/index.html adresinden ulaşabilirsiniz.
VueJS’in varolan bir projeye dahil edilmesi cok kolay olduğu icin kullanımı hızla artmaya devam ediyor. Geliştirmekte olduğunuz bir projeye sadece VueJS javascript dosyasını dahil ederek kullanmaya başlayabilirsiniz.
Kurulum
CDN ile :
NPM ile,
$ npm install vue
VueJS view odaklı bir framework olduğu icin ajax, router, state management gibi işlemleri kapsamaz. Fakat vue.js github sayfasında bulunan bircok eklenti ile bu işlemleri yapabilirsiniz. Eklentilere https://github.com/vuejs/awesome-vue adresinden ulaşabilirsiniz.
Basit bir VueJS uygulaması
► HTML :
}
► JS :
var app = new Vue(
})
Sayfa cıktısı : Hello World!
VueJS Avantajları :
1 - Duşuk boyut ve hız
Bir kutuphane ne kadar duşuk boyutta ise o kadar iyidir. VueJS’in en buyuk 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 cok daha iyidir.
2 - Oğrenim kolaylığı
Anlaşılması kolay dokumantasyon ve basit syntax (sozdizimi) ile oğrenim kolaylığı sağlar.
3- Esnek yapı
Projenizin durumuna bağlı farklı eklentiler veya farklı cozumler uretebilmenize olanak sağlar. Kullanmayacağınız bir uygulamayı projenize dahil etmek zorunda bırakmaz.
4 - Basit Entegrasyon
Yukarıdaki ornekte olduğu gibi sadece js dosyasını dahil ederek projenizde kullanabilirsiniz.
5 - Topluluk
Hızla buyuyen bir topluluğa sahip olan VueJS geliştirme aşamasında yaşayacağınız sorunlara cevap bulmakta cok onemli bir avantaj olacaktır. Ayrıca neredeyse en problem icin hazırlanmış pluginlerde size cok kolaylık sağlayacaktır.
6- Virtual Dom Yapısı
Virtual dom, react tarafından kullanılmış bir ozelliktir. Avantajı ise projede değişiklik yapıldıkca, doğrudan dom'un değil, memory'deki dom'un clone'nin guncellenmesi ve aradaki farkların uygun zamanda gercek dom'a yansıtılmasıdır.
Ayrıca VueJS component (bileşen) yapısını destekler. Yani dom uzerinde 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 Orneği :
► JS:
Vue.component('button-counter',
},
template: 'You clicked me } times.'
})
► HTML:
Ve son olarak VueJS‘i bazı bolumlerinde yada tamamen kullanan buyuk caplı sitelere goz atalım:
Netflix
Gitlab
Adobe
Alibaba
Behance