Vue JS Nedir? Vue JS Kurulumu

Vue JS nedir?

VueJS kullanıcı arayüzleri geliştirmek için kullanılan interaktif bir front-end kütüphanesi yada çerçevesidir. Son zamanların en popüler front-end teknolojilerinden biridir. Hatta 2018 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 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.




Kurulum




CDN ile :


<script src = " " ></ 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.js github sayfasında bulunan birçok eklenti ile bu işlemleri yapabilirsiniz. Eklentilere adresinden ulaşabilirsiniz.




Basit bir VueJS uygulaması




► HTML :


<div id="app">


{{ message }}


</div>


► JS :


var app = new Vue({


el: '#app',


data: {


message: 'Hello World!'


}


})





Sayfa çıktısı : Hello World!




VueJS Avantajları :



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




2 - Öğrenim kolaylığı

Anlaşılması kolay dökümantasyon ve basit syntax (sözdizimi) ile öğrenim kolaylığı sağlar.




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




4 - Basit Entegrasyon

Yukarıdaki örnekte olduğu gibi sadece js dosyasını dahil ederek projenizde kullanabilirsiniz.




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




6- 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:


Vue.component('button-counter', {


data: function () {


return {


count: 0


}


},


template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'


})





► HTML:


<div id="components-demo">


<button-counter></button-counter>


</div>



Ve son olarak VueJS‘i bazı bölümlerinde yada tamamen kullanan büyük çaplı sitelere göz atalım:

1. Facebook
2. Netflix
3. Gitlab
4. Adobe
5. Alibaba
6. Behance