Vue Nedir, Nasıl Çalışır ?

Kullanıcı arayüzleri geliştirmede kullanılan küçük ve oldukça başarılı bir javascript kütüphanesidir VueJS. Projeleri onun üzerine inşa etmenizi gerektirmemesi, sadece ihtiyaç duyulan sayfalarda entegre edilebilme özgürlüğü VueJS’i bir adım daha öne çıkarıyor.

VueJS size ne kazandırır?

VueJS kullanarak html içerisinde değişkenler kullanabilirsiniz. Bu sayede javascript değişkenlerinizin html sayfanızda çıktılarını görebilirsiniz.

VueJS çift yönlü veri akışı(Two-way binding) sağlar. Bu ne işere yarar? Bir form yaptığınızı hayal edin, sayfaya girdiğinizde veritabanınızdaki verilerin forma doldurulmasına, formda bir değişiklik olduğunda ise bu değişikliklerin veritabanında güncellenmesine ihtiyaç duyacaksınız.

Sayfamız profil sayfası olsun;

Ajax ile sunucudan kullanıcının bilgilerini talep ederiz, gelen veriyi VueJS altında user nesnesine atarız. Artık kullanıcı bilgilerini “chrome vue js devtools” sayesinde tarayıcımızın Geliştirici Araçları bölümünde görebiliriz.

Gelen veriyi forma doldurmak için yapmamız gereken şey verileri ilgili form öğeleri ile ilişkilendirmek. Bunu da v-model attribute’ü ile yaparız.

Örneğin: <input type=”email” name=”email” v-model=”user.email”>

Bu sayede veritabanındaki verinin forma doldurulmasını sağladık. Şimdi bu input içerisinde bir değişiklik yaptığımızda eş zamanlı olarak VueJS altındaki user.email bilgisi de güncellenecek. Verileri veritabanında güncellemek için formdan veri okumanıza gerek kalmayacak çünkü güncel veri zaten VueJs içerisinde var olacak. Yapmanız gereken sadece yine ajax ile user nesnesini sunuyuca göndermek.

Çift yönlü veri akışına bir örnekte şu şekilde yapabiliriz; Kullanıcının form öğesine girdiği veriyi eş zamanlı olarak bir div içerisinde gösterebiliriz. Bunun için yapmanız gereken.

<div>Hoş geldin {{user.firstname}} {{user.lastname}}</div>
<input type=”text” name=”firstname” v-model=”user.firstname”> 
<input type=”text” name=”lastname” v-model=”user.lastname”>

VueJs kurulumunu nasıl yapabiliriz? Aşağıdaki VueJS scriptini projenize ekleyin.

<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

Daha sonra HTML sayfanıza gelip aşağıdaki kodu ekleyin.

<div id="app"> Merhaba {{ fullname }}, VueJS dünyasına hoş geldin.</div>

Javascript dosyanıza aşağıdaki kodu ekleyin.

var app = new Vue({ el: '#app', data: { fullname: 'Birol Apaydın' } })

Tebrikler, ilk VueJS çalışmanızı yaptınız. Daha fazlası için https://vuejs.org/v2/guide/ adresini ziyaret edebilirsiniz.

Neden VueJS?

Düşük boyut : VueJs dosya boyutu 18-21kb arasındadır. Düşük dosya boyutu sayesinde tarayıcı tarafından kolayca indirilir ve site yüklenme hızını düşürmez.

Entegre esnekliği : Sadece VueJS kullanmak istediğiniz sayfalarda VueJS scriptini entegre edebilirsiniz.

Virtual Dom yapısı : Projede yapılan değişiklikler doğrudan dom’u güncellemez, hafızadaki dom’un kopyası üzerinde gerekli değişiklikler yapılır daha sonra aradaki fark gerçek dom’a uygulanır.

Two-way binding : Değişkenden form öğelerine, form öğesinden değişkene çift yönlü veri akışı sağlar.

VueJs için Vue.js DevTools eklentisi

Chrome Vue.js DevTools sayesinde bileşenleri ve verileri tarayıcımızın Geliştirici Araçları bölümünde görebiliriz.
VueJS dökümantasyonu için https://vuejs.org/v2/guide/ adresini ziyaret edin.