Javascript frameworklar’in sürekli gelişimi, frontend tarafını çok fazla hareketlendiriyor. Çalıştığım yerde Full stack developer olarak çalıştığım için mecburen bu teknolojilerin içine girmek durumunda kaldım. Angular.js ve react mantık olarak güzel gelmesine rağmen öğrenmesi çok kolay gelmedi. Geçen gün Vue.js ile tanıştım. Hakkında araştırma yaptıkça, özelliklerini okudukça sevmeye başladım. Beni en çok kendisine çeken yönü ise öğrenmesi çok kolay. Kendi sitesinde çok güzel anlatımlı başlangıç rehberi mevcut https://vuejs.org/v2/guide/
React ile Angular’ın özelliklerini nispeten karıştırıp kullanımı kolay bir yapı ortaya çıkarmışlar. Açıkcası diğer frameworklarde zaman kaybetmek hiç mantıklı gelmedi. Vue.js ile çok kısa sürede projeme entegrasyon sağlayabildim. Esnek kod yapısı sayesinde kod hakimiyetini bize bırakıyor. neyse fazla uzatmadan birkaç kod örneğine bakalım.
Öncelikle Visual Studio’dan nuget package manager’e Vue.js olarak aratarak yükleme yapabilirsiniz. Yüklemeden sonra vue.js ve vue.min.js adında 2 adet dosya yüklenmiş olması lazım.
Eğer node.js ile kurulum yapacaksanız sitesinde kurulum adımları mevcut.
Html:
<div id="app-6">
{{ message }}
<input v-model="message">
</div>
Javascript:
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Çift Yönlü Bağlama'
}
})
Burada form input ile modelimiz arasında çift yönlü bağlama (two-way binding) yapmış olduk. Yani input içerisine yazdığımız yazı anlık olarak message adındaki modeli değiştirecek. Aynı şekilde message modelinin içeriğini biz kodsal olarak değiştirirsek input içindeki yazıda otomatik değişecektir.
Şimdide for yapısına göz atalım.
Html:
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
Javascript:
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: 'Galatasaray' },
{ text: 'Fenerbahçe' },
{ text: 'Beşiktaş' }
]
}
})
v-for yapısı sayesinde bir modelimizdeki listeyi otomatik olarak bağlayarak liste halinde yazdırabiliyoruz. Bunlarla birlikte v-bind ile özellik bağlama, v-if ile şartsal ifadeler, v-on:click gibi event bağlama, component oluşturma gibi güzel özellikleri bulunmakta.
Eğer sizde benim gibi frontend ile çok zaman kaybetmeden yeni nesil teknoloji kullanayım diyorsanız Vue.js ‘ye göz atmanızı tavsiye ederim 🙂
Türkçe Kaynaklar