Vue.js
Bu yazı dizisinde Vue.js adlı framework üzerinde çalışacağız. Vue.js, View katmanında çalışan bir mimaridir. View katmanı, kullanıcının kullandığı ve yazılıma eriştiği arayüzleri içerir. Vue.js de kullanıcı arayüzlerinin tasarlanmasında kullanılan etkili bir kütüphanedir. Virtual DOM yapısının kullanılması en önemli avantajlarındandır. Bu da DOM (Document Object Model) üzerinde yapılan değişikliklerin daha az maliyetle gerçekleştirilmesini, sayfanın sadece değişiklik yapılan bölümünün tekrar oluşturulmasını (render) sağlar.
Rendering
Şimdi bir HTML elemanının oluşturulması ile ilgili bir örnek inceleyeceğiz. Bunun için ilk olarak html uzantılı bir dosya oluşturmalıyız. Araç olarak Notepad kullanabiliriz.
Yukarıdaki örnekte oluşturulmuş boş HTML dosyasını görmekteyiz. Öncelikle Vue kütüphanesini eklemeliyiz.
Daha sonra HTML dosyasına id = "bilesen1" olan bir tane div bileşen ekliyoruz.
Daha sonra Vue.js kütüphanesindeki Vue sınıfını kullanarak aşağıdaki script kodunu ekliyoruz. Bu kod, herhangi bir bileşene erişilip, o bileşen içerisinde kullanılabilecek değişkenlere değer ataması yapılabilmesini sağlamaktadır. Örnekte, id = "bilesen1" olan bileşene erişip degisken1 ve degisken2 değişkenlerine değer ataması yapıyoruz. Sonraki aşamada bu değişkenler, id = "bilesen1" olan bileşenin içerisinde kullanılabilecektir.
<html>
<head>
<title>Bileşen oluşturma örneği</title>
<script src = " [https://unpkg.com/vue](https://unpkg.com/vue) " > </script >
</head>
<body>
<div id="bilesen1"></div>
<script>
var app = new Vue({
el: '#bilesen1',
data: {
degisken1: '1. Değişken İçerik',
degisken2: '2. Değişken İçerik'
}
})
</script>
</body>
</html>
Değişkenlere değer atamasını yaptık. Artık bu değişkenleri bileşenimizin içerisinde kolaylıkla kullanabiliriz. Değişkenler, html içerisinde iki süslü parantez {{ }} içerisine yazılarak çağrılabilmektedir.
<html>
<head>
<title>Bileşen oluşturma örneği</title>
<script src = " [https://unpkg.com/vue](https://unpkg.com/vue) " > </script >
</head>
<body>
<div id="bilesen1">
Değişken 1: {{degisken1}} Değişken 2: {{degisken2}}
</div>
<script>
var app = new Vue({
el: '#bilesen1',
data: {
degisken1: '1. Değişken İçerik',
degisken2: '2. Değişken İçerik'
}
})
</script>
</body>
</html>
Vue.js, Virtual DOM üzerinden işlem yapan bir kütüphanedir. Herhangi bir bileşen üzerinde değişiklik olduğunda tüm sayfa yenilenmez, sadece ilgili sayfa yenilenir.
Virtual DOM'un kullanım amacı her değişiklikte sayfanın tüm elemanlarının render edilmesinin önüne geçmektir. Real DOM'a karşılık gelen Virtual DOM oluşturulur. Yapılan her değişiklik öncelikle Virtual DOM'a yansıtılır. Real DOM ve Virtual DOM arasındaki farklılıklar bir algoritma ile tespit edilerek ilgili değişiklikler Real DOM'a uygulanır.