Vue.js

Vue.js, bildirimsel oluşturma (declarative rendering) ve bileşen kompozisyonuna odaklanan, aşamalı olarak benimsenebilen bir mimariye sahiptir. Yönlendirme, durum yönetimi ve yapım aracı gibi karmaşık uygulamalar için gereken gelişmiş özellikler, resmi olarak destekleyici kütüphaneler ve paketler aracılığıyla sunulmaktadır.^[5]

Vue, önceden Angular çekirdek ekibinde yer alan ve Google'da çalışan Evan You tarafından oluşturuldu. Evan You, Vue'yu geliştirme sürecini şöyle özetledi: "Angular'ın sadece sevdiğim yanlarını alarak çok hafif ve sade bir şey yapabileceğimi düşündüm"^[6] Projenin ilk kaynak kodu Temmuz 2013 tarihliydi ve Vue, Şubat 2014' te piyasaya sürüldü.

Component'ler, bir defa oluşturulup istenildiği kadar kullanılabilen yapılarıdır. Standart bir Vue component'inin içerisinde birinci blokta HTML kodlayabileceğimiz template yapısı, ikinci blokta JavaScript kodları ve üçüncü blokta ise CSS komutları bulunur. Aşağıdaki örnek bir Vue component'i örneğidir. Component'e bir buton konulmuştur ve butona her tıklandığında tıklanma sayısını göstermektedir.

<template>
  <div id="tuto">
    <button-clicked v-bind:initial-count="0"></button-clicked>
  </div>
</template>

<script>
Vue.component('button-clicked', {
  props: ['initialCount'],
  data: () => ({
    count: 0,
  }),
  template: '<button v-on:click="onClick">{{ count }} kez tıklandı</button>',
  computed: {
    countTimesTwo() {
      return this.count * 2;
    }
  },
  watch: {
    count(newValue, oldValue) {
      console.log(`Sayının değeri ${oldValue}'ten  ${newValue}' ya değiştirildi.`);
    }
  },
  methods: {
    onClick() {
      this.count += 1;
    }
  },
  mounted() {
    this.count = this.initialCount;
  }
});

new Vue({
  el: '#tuto',
});
</script>

Vue, oluşturulan DOM'un temel alınan Vue örneğinin verilerine bağlanmasına izin veren HTML tabanlı bir şablon sözdizimi kullanır. Tüm Vue şablonları, spesifikasyonla uyumlu tarayıcılar ve HTML ayrıştırıc��ları tarafından ayrıştırılabilen geçerli HTML'dir. Vue, şablonları sanal DOM oluşturma işlevlerine derler. Sanal Belge Nesne Modeli (veya 'DOM'), Vue'nun tarayıcıyı güncellemeden önce bileşenleri belleğinde oluşturmasına olanak tanır. Reaktivite sistemiyle birlikte Vue, uygulama durumu değiştiğinde minimum miktarda DOM manipülasyonunu yeniden oluşturmak ve uygulamak için minimum bileşen sayısını hesaplayabilir.

Vue, düz JavaScript nesneleri ve optimize edilmiş yeniden oluşturmayı kullanan bir reaktivite sistemine sahiptir. Her component, oluşturma sırasında reaktif bağımlılıklarını takip eder, böylece sistem tam olarak ne zaman yeniden oluşturulacağını ve hangi bileşenlerin yeniden oluşturulacağını bilir.^[7]

Routing yapısı, Vue ile SPA (Single Page Application - Tek Sayfalık Uygulama) geliştirilebilmek amacıyla Vue'da kullanılan bir eklentidir. Single Page Application, routing(yönlendirme) işleminin backend(arka uç) tarafından değilde JavaScript tarafından client-side(istemci) tarafında yapıldığı bir web uygulamasıdır.

<div id="app">
  <router-view></router-view>
</div>
...

<script>
...
const Home = {
  template: '<div>Anasayfa</div>'
};

const router = new VueRouter({
  routes: [
    { path: '/home', component: Home }
  ]
});
...
</script>

Yukarıdaki örnekte VueRouter nesnesine bir path (yol) belirtilmiştir. URL'den bu adrese istek yapıldığında "Home" adlı component'in render edilecektir. Bu component'ler router-view adlı özel Vue elementine render edilir.

• VueJs Resmi Websitesi 6 Mart 2019 tarihinde Wayback Machine sitesinde arşivlendi.