Vue.js

Vue.js (genellikle Vue olarak kullanılır) kullanıcı arayüzleri ve tek sayfa uygulamalar (single-page applications) inşa etmek için kullanılan açık kaynak  Javascript iskeleti.Introduction — Vue.js . Alıntı Tarihi: 11 Mart 2017 2013 yılında geliştirilmeye başlanan framework'ün güncel versiyonu 3.2'dir.

18 Eylül 2020'de yayımlanan 3. versiyonuyla kaynak kodu TypeScript ile yeniden yazılmıştır.

 Genel bakış 
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."Evan is creating Vue.js | Patreon" . Patreon. Alıntı Tarihi: 11 Mart 2017

 Tarihi 
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""Between the Wires | Evan You". Between The Wires. 11 Mart 2017. 03 Haziran 2017 tarihinde arşivlendi Projenin ilk kaynak kodu Temmuz 2013 tarihliydi ve Vue, Şubat 2014'te piyasaya sürüldü.

 Temel özellikleri 

 Components 
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>

 Templates 
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.

 Reactivity 
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.

 Routing 
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.

 Kaynakça 

 Dış bağlantılar 
 VueJs Resmi Websitesi 

Kategori:2014 yazılımları
Kategori:JavaScript kütüphaneleri
Kategori:Web uygulama iskeletleri