DOM API USAGE SERIES
Vue ile DOM API Kullanımı
Vue kütüphanesi React kütüphanesinden 1 yıl sonra ortaya çıktı peki DOM API kullanımında ne gibi farklılıklar bulunuyor ?
Öncelikle DOM API Kullanımının, buna göre gelişim gösteren kütüphaneleri ve Framework leri öğrenmek istiyorsanız bu linkte bulunan yazı serisini okuyabilirsiniz.
2010 ve 2011 yıllarında JQuery den yavaş yavaş web uygulaması geliştirmeye için odaklanan Framework geliştirilmeye başlandı Backbone, Angular, Ember, Knockout
Daha sonrasında ise 2013 yılında React ve sonrasında 2014 yılında Vue kütüphanesi ortaya çıktı. Bu kütüphanelerin temel özellikleri
- Component Based (Bileşen Tabanlı) bir yapıda olmaları
- VDOM (Virtual DOM) kullanmaları
- UI Rendering üzerine odaklanmış olmaları
Yani App tümüne odaklanan bir kütüphane yerine UI bileşenlerinin geliştirimine odaklanmış daha küçük bir kütüphane , bunun yanında bir takım 3rd party kütüphaneleri ile birlikte uygulama geliştirme sağlanması planlandı.
React’ın en büyük özelliği JSX tabanlı Kod, Styling ve DOM yapısını bir bileşen içerisinde birleştirebilme yeteneğiydi.
Evan You, Vue ile jQuery, Angular’dan beri gelen Template yapıları ile olan alışkanlığı bozmadan, geliştiricilerin React’da karşılaştığı öğrenme zorluğunun üstesinden gelebilecek daha basit ama scale edebilen bileşen tabanlı bir UI kütüphanesi çıkarmaya odaklandı.
Vue dosyalarında bileşen tanımlamalarını bulabilirsiniz.
<template>
<div>
<button @click="increment">Increment</button>
<span>{{ count }}</span>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
};
},
methods: {
increment() {
this.count++;
}
}
};
</script>- template: DOM nesne yapılarınızı
- script : kısmında JS kodlarını bulabilirsiniz.
Peki bir form yapısınında bir input değerini modele yansıtmamız gereken durumda aynı ng-model olduğu gibi vue’da da v-model bulunur. v-model data ile 2 yönlü bağlantı kurmasını otomatik bir şekilde yapmasını sağlar.
<template>
<form @submit="submitForm">
<input type="text" v-model="name" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>
</template>
<script>
export default {
data() {
return {
name: ''
};
},
methods: {
submitForm(event) {
event.preventDefault(); // Prevent the default form submission behavior
// Perform actions with the submitted data
console.log('Submitted name:', this.name);
// Reset the form
this.name = '';
}
}
};
</script>
Bu tarz template içerisinde kendi v-* şeklinde tag(etiketleri) ile script arasında bir takım bağlantılar oluşturmayı sağlar. Aşağıda Vue Cheatsheet görebileceğiniz gibi v-if, v-else-if, v-show, v-model, v-for ve v-bind kavramlarının burada da yer aldığını görebilirsiniz
Özetle Vue bana React JSX ve ClassComponent, LifeCycle mantığına alışamamış kişilerin hem eski yetenekleri kullansın, hemde React benzer bileşen tabanlı, VDOM özellikli UI kütüphanesi olsun konusunu karşılayan bir kütüphane olmuş.
Vue’da Syntax olarak Angular benzemesinin yanında birde VueX state kütüphanesi, Routing kütüphanesi gibi App (Uygulama) geliştirme için elzem olan kütüphaneleri Vue official olarak kendisi sunuyor.
Bu açıdan da React, Kütüphane Ekosistemi ve Framework Ekosistemi kavramları ile Vue’dan ayrışıyor.
LearnReactUI.dev
React Ekosisteminde kendi kariyerinizi daha ileriye götürmek için LearnReactUI.dev sitesine üye olmayı unutmayın. Bu site piyasada çalışan(real-world) Web Uygulaması geliştirmek isteyen React geliştiricileri için oluşturulmuş bir web sitesidir.
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
