Kısaca tanım yapmak gerekirse Vue js client tarafında kullanıcı ara yüzü oluşturmayı sağlayan bir javascript kütüphanesidir.

UI tarafında kendine özgü bir syntaxı vardır. Açık kaynak olarak sunulan bu kütüphane hızla yayılmaktadır. Bu hızlı yükselişin tabi ki birden çok nedeni var. Bu nedenlerden bazıları kolay ve hızlı öğrenme, lightweight yapısı, projelere kolay entegre olması ve en önemlisi çok hızlı olması. Tarayıcının DOM’u ( Document Object Model) üzerinde değişiklik yapmak çok maliyetlidir. Bu nedenle Vue js virtual DOM kullanmaktadır.

Peki nedir bu virtual DOM?
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.

Örnek Uygulama:
Evet ilk olarak javascript kütüphanemizi sayfamıza import edelim.

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

Ardından sayfamıza bir tane div ekliyoruz. Örnekte de görüldüğü üzere div id değeri “app” olarak tanımlanmış. Yine div içinde 2 tane <p> tag kullanılarak süslü parantezler içinde username ve city değişkenleri ekrana yazdırılmış.

<div id="app">    <p>{{ username }}</p>    <p>{{ city }}</p></div>  

Şimdi gelelim bu değişkenleri veri ile doldurmaya. Aşağıdaki <script> tagleri arasında yazdığımız vue class’ı bir obje almaktadır. Bu objenin ilk prop’u “el” (element) dir. Bu prop’a tanımladığımız “app” ile div id’si örtüşmelidir. (Aksi durumda çalışmaz) İkinci prop’a baktığımızda data’yı görüyoruz. İşte div içine göndereceğimiz data’yı buraya yazıyoruz.

<script>  new Vue({     el: '#app',      data: {       username: 'Kerim',       city: 'Istanbul'      }  })</script>

Evet geldik makalemizin sonuna. Kodumuzun son halini .html olarak kaydettikten sonra bilgisayarınızda çalıştırdığınızda aşağıdaki çıktıyı alabilirsiniz.

Bir sonraki makalemizde görüşmek üzere..