Vue.js
![]() | |
Orijinal yazar(lar) | Evan You |
---|---|
İlk yayınlanma | Şubat 2014 (10 yıl önce) (2014-02)[1] |
Güncel sürüm | 3.3.4 / 18 Mayıs 2023 (15 ay önce) (2023-05-18) |
Programlama dili | JavaScript |
Platform | Web |
Boyut | 33.30 KB sıkıştırılmış + gzip 332.36 KB geliştirme |
Tür | JavaScript framework |
Lisans | MIT License[2] |
Resmî sitesi | vuejs.org |
Kod deposu |
![]() |
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.[3] 2013 yılında geliştirilmeye başlanan framework'ün güncel versiyonu 3.2'dir.[4]
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.[5]
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"[6] 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.[7]
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
- ^ "First Week of Launching Vue.js". Evan You. 5 Şubat 2019 tarihinde kaynağından arşivlendi. Erişim tarihi: 6 Mart 2019.
- ^ "vue/LICENSE". GitHub. 22 Mart 2019 tarihinde kaynağından arşivlendi. Erişim tarihi: 17 Nisan 2017.
- ^ Introduction — Vue.js 9 Mart 2019 tarihinde Wayback Machine sitesinde arşivlendi.. Alıntı Tarihi: 11 Mart 2017
- ^ "vue". npm (İngilizce). 10 Eylül 2015 tarihinde kaynağından arşivlendi. Erişim tarihi: 7 Mayıs 2022.
- ^ "Evan is creating Vue.js | Patreon" 3 Mart 2019 tarihinde Wayback Machine sitesinde arşivlendi.. Patreon. Alıntı Tarihi: 11 Mart 2017
- ^ "Between the Wires | Evan You". Between The Wires. 11 Mart 2017. 03 Haziran 2017 tarihinde arşivlendi
- ^ "Reactivity in Depth | Vue.js". vuejs.org. 10 Şubat 2022 tarihinde kaynağından arşivlendi. Erişim tarihi: 30 Ekim 2022.
Dış bağlantılar
- VueJs Resmi Websitesi 6 Mart 2019 tarihinde Wayback Machine sitesinde arşivlendi.