Vue.JS Nedir?

Vue.js kullanıcı arayüzleri ve tek sayfa uygulamalar inşa etmek için kullanılan açık kaynak Javascript
iskeleti. (Kaynak: Vikipedi)

Vue.JS Githubda en çok star almış repolardan biridir. Şuanda 175 bine yakın yıldız almış ve topluluğu oldukça gelişmiştir. Bu durum da Vue.js’i daha tercih edilebilir bir duruma getiriyor. Sorularınızı StackOverflow gibi platformlarda kolayca bulabiliyorsunuz, tabii çözümlerini de.

Vue.JS Evan You adlı eski bir Google çalışanın tasarladığı javascript kütüphanelerini kullanan bir ön yüz
geliştirme(front-end) aracıdır. Son zamanlarda oldukça popüler olan VueJS’in bu kadar tutulmasının
nedenleri ise:
• Düşük boyut ve hız
• Öğrenim kolaylığı
• Esnek yapı
• Basit Entegrasyon
• Topluluk
• Virtual Dom Yapısı
• Ayrıca VueJS component (bileşen) yapısını destekler.(Tıpkı MeteorJS’de olduğu gibi)

Virtual DOM Nedir? Faydası Nedir?

Vue.JS yapısı gereği direk tarayıcı DOM’u üzerinde değişiklik yapmak yerinde Virtual DOM üzerinde
değişiklik yapar. Değişikliğin ardından Virtual DOM ve tarayıcının DOM’u karşılaştırılarak sadece değişen
kısımlar kullanıcıya gösterilir. Böylece daha performanslı bir sonuç üretilir.

Vue.js çalışma mantığı açısından çeşitli farklılıklar içeriyor. Zaman zaman anlaması güç olsa da yeterli kaynağın bulunması daha anlaşılabilir bir halegetiriyor. Ayrıca Vue.js için herhangibir kurulumun yapılmasına gerek yok (zorunlu değil) istediğiniz bir html dosyasının içine ekleyebilir ve
kullanabilirsiniz

Vue.js ile ilk uygulama

Yeni bir HTML dosyası oluşturdum ve head kısmına Vue.js cdn ekledim:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

Böylelikle Vue.js eklenmiş oldu.
Şimdi bir liste bir de two way binding içeren bir yazı objesi oluşturup bunu DOM kısmına basacağız.

Bunun için önce script kısmının içine:

Burada new Vue objesiyle app id’sindeki elemente etki ediyoruz Data kısmında ise bir “message” bir de “todos” adı altında iki objeyi DOM’a geri döndürüyoruz.

Burada “app” “id”sine sahip HTML elementi Vue.js’in etki ettiği element içinde değişkenleri iki süslü parantez içinde çağırabiliyoruz.
Böylece ilk {{ message }} kısmı “message” objesini döndürmüş oluyor.
“Input”un bulunduğu ikinci kısımda v-model=”message” denmesi oradaki girdinin “message” objesine eşit olmasını sağlıyor
böylece yapılan değişiklik bir önceki kısımda da değişmiş oluyor. Two-way-binding dediğimiz kısımda bu oluyor.

Son kısımda ise “ v-for=”x in todos” “ kısmına sahip element “todos” değişkenindeki her eleman için tekrarlanıyor. Yani her eleman için “li” etiketine sahip elementler oluşturuluyor. X.text ise iteratörün “text” adlı kısmını kastediyor.
Böylece sonuç olarak böyle bir ufak web uygulaması elde ediyoruz.

Vue.JS Kurulumu

Vue.js’i CDN olarak yani HTML dosyasının içine direkt ekleyebiliyorduk ancak bu yöntem ile birden fazla olan sayfalar için mümkün olmuyordu. Bunun için Vue CLI dediğimiz .vue dosyalarıyla çalıştığımız ve en fazla kullanılan kısmı kuracağız.