Vue.JS’ i Tanıyalım
Vue.js Nedir? Bu yazıda bir progressive javascript framework olan vue.js’ i inceleyeceğiz. Vue.js ile küçük, orta ve büyük boyutlarda bir web sitesini kolaylıkla tasarlayabilirsiniz. Angular ve React hakkında bilginiz varsa vue.js’de bunlara benzer özelliklerde bir framework diyebiliriz. Vue.js’ i mevcut bir projeye kolaylıkla entegre edebildiğimiz gibi, komple frontend projesi olarak da kullanabiliyoruz. Vue.js core kütüphanesi oldukça küçük boyutlara sahip. Bu kütüphane sadece view kısmına odaklanıyor. Eğer http request, state management, routing vs. işlemler yapmak istiyorsanız vue.js pluginlerini kullanmanız gerekiyor. Bu pluginler vue.js sitesinde yayınlanan ve onaylanmış pluginler olduğundan gönül rahatlığıyla kullanabilirsiniz. Listeye buradan ulaşabilirsiniz. Şimdi Vue.js özelliklerine değinerek tanımaya çalışalım.
Vue.js başlıca özellikleri
- Kolay ve hızlı öğrenme
- Mevcut projeye kolay entegre edebilme
- Küçük bir kütüphane. Lightweight.
- Reactive yapısı
- Ücretsiz & açık kaynak
- İhtiyaç duyulan özellikler pluginler ile eklenelebilir
- Virtual Dom sayesinde daha yüksek performanslı sağlıyor
- Kendi Component’lerinizi oluşturabilirsiniz.
- Chrome developer eklentisi
- Ekosistem çok geniş, takipçi ve destekleyenlerde her geçen gün artıyor.
Vue.js Projeye Ekleme
Projemize vue.js eklemek için aşağıdaki script’i ekliyoruz. Bunu bilgisayarınıza indirerek’te local olarak ekleyebilirsiniz.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>Daha sonra Html dosyanıza şunları ekleyin:
<div id="app">
{{ message }}
</div>Javascript dosyasına veya script tagları arasına şunları ekleyin:
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})Şuanda vue.js hazır hale geldi bile. Projenizi çalıştırırsanız message yazan kısımda Hello Vue! yazısını görebilirsiniz. Kodları kısaca açıklayacak olursak, html kısmında div’e verdiğimiz id (app) ile script kısmındaki el (element) ‘e verdiğimiz #app aynı olması gerekiyor. Çünkü vue buradan ilişkilendirme yapıyor. Data tag’i içine ise kullanacağımız, array, object, vs değişkenlerimizi koyuyoruz. Böylece html kısmından message eriştiğimiz gibi kolayca erişim sağlayabiliyoruz. Bir sonra ki yazacağım yazıda kodlama ile ilgili detaylara gireceğiz. Bu yazıda biraz daha Vue.js özeliklerini tanımaya devam edelim.
Vue.js Virtual Dom Nedir ?
Vue.js kendi yapısında virtual dom (document object model) barındırmaktadır. Virtual Dom’un çalışma mantığını özetleyecek olursak, sizin modelinizde bir değişiklik olduğundan gerçek DOM yapısında değişiklik olmaz. Bunun yerine, değişiklikler sanal bir DOM yapısında gerçekleşir. Daha sonra gerçek DOM ile sanal DOM arasındaki farka bakılarak sadece değişen kısımlar algılanır ve gerçek DOM üzerinde bu değişen kısımlar güncellenir. Değişmeyen kısımlar boş yere güncellenmez. Buda bizim performansımızı artırır. Aşağıdaki şemada bunu görsel olarakta inceleyebilirsiniz.
Vue.js Chrome Developer Eklentisi
Frontend tarafında çalışırken hataları bulabilmek için veya model içindeki verileri görebilmek için console.log, debug, alert vs. kullanarak verileri loglamaya çalışıyoruz. Bu ise genele baktığımızda bize büyük ölçüde zaman kaybettiriyor. Bunun yerine Vue.js’de chrome eklentisi sayesinde mevcut modellerimiz içindeki verileri anlık olarak izleyebiliyoruz, değiştirebiliyoruz. Eğer Vuex (State managament library) kullanıyorsak store içindeki verilerimizi de buradan izleyebiliyoruz. Vue.js ile çalışacaksanız bu eklentiyi mutlaka kurmalısınız.
Bu yazının sonuna gelmiş bulunuyoruz. Bir sonraki yazıda kodlama yapılarına giriş yapacağız.
