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 . 2013 yılında geliştirilmeye başlanan framework'ün güncel versiyonu 3.2'dir.
Orijinal yazar(lar) | |
---|---|
İlk yayınlanma | Şubat 2014 | )
Güncel sürüm | 3.3.4 / 18 Mayıs 2023 | )
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 | |
Resmî sitesi | vuejs.org |
Kod deposu |
|
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 ( ve bileşen kompozisyonuna odaklanan, aşamalı olarak benimsenebilen bir mimariye sahiptir. Yönlendirme, 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.
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" 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
- ^ . 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 . Erişim tarihi: 17 Nisan 2017.
- ^ Introduction — Vue.js 9 Mart 2019 tarihinde Wayback Machine sitesinde .. Alıntı Tarihi: 11 Mart 2017
- ^ . 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 .. Patreon. Alıntı Tarihi: 11 Mart 2017
- ^ . Between The Wires. 11 Mart 2017. 03 Haziran 2017 tarihinde arşivlendi
- ^ . 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 .
wikipedia, wiki, viki, vikipedia, oku, kitap, kütüphane, kütübhane, ara, ara bul, bul, herşey, ne arasanız burada,hikayeler, makale, kitaplar, öğren, wiki, bilgi, tarih, yukle, izle, telefon için, turk, türk, türkçe, turkce, nasıl yapılır, ne demek, nasıl, yapmak, yapılır, indir, ücretsiz, ücretsiz indir, bedava, bedava indir, mp3, video, mp4, 3gp, jpg, jpeg, gif, png, resim, müzik, şarkı, film, film, oyun, oyunlar, mobil, cep telefonu, telefon, android, ios, apple, samsung, iphone, xiomi, xiaomi, redmi, honor, oppo, nokia, sonya, mi, pc, web, computer, bilgisayar
Vue js genellikle Vue olarak kullanilir kullanici arayuzleri ve tek sayfa uygulamalar single page applications insa etmek icin kullanilan acik kaynak 2013 yilinda gelistirilmeye baslanan framework un guncel versiyonu 3 2 dir Vue jsOrijinal yazar lar Ilk yayinlanmaSubat 2014 10 yil once 2014 02 Guncel surum3 3 4 18 Mayis 2023 13 ay once 2023 05 18 Programlama diliJavaScriptPlatformWebBoyut33 30 KB sikistirilmis gzip 332 36 KB gelistirmeTurJavaScript frameworkLisansResmi sitesivuejs orgKod deposugithub com vuejs core 18 Eylul 2020 de yayimlanan 3 versiyonuyla kaynak kodu TypeScript ile yeniden yazilmistir Genel bakisVue js bildirimsel olusturma ve bilesen kompozisyonuna odaklanan asamali olarak benimsenebilen bir mimariye sahiptir Yonlendirme ve yapim araci gibi karmasik uygulamalar icin gereken gelismis ozellikler resmi olarak destekleyici kutuphaneler ve paketler araciligiyla sunulmaktadir TarihiVue onceden Angular cekirdek ekibinde yer alan ve Google da calisan Evan You tarafindan olusturuldu Evan You Vue yu gelistirme surecini soyle ozetledi Angular in sadece sevdigim yanlarini alarak cok hafif ve sade bir sey yapabilecegimi dusundum Projenin ilk kaynak kodu Temmuz 2013 tarihliydi ve Vue Subat 2014 te piyasaya suruldu Temel ozellikleriComponents Component ler bir defa olusturulup istenildigi kadar kullanilabilen yapilaridir Standart bir Vue component inin icerisinde birinci blokta HTML kodlayabilecegimiz template yapisi ikinci blokta JavaScript kodlari ve ucuncu blokta ise CSS komutlari bulunur Asagidaki ornek bir Vue component i ornegidir Component e bir buton konulmustur ve butona her tiklandiginda tiklanma sayisini gostermektedir lt template gt lt div id tuto gt lt button clicked v bind initial count 0 gt lt button clicked gt lt div gt lt template gt lt script gt Vue component button clicked props initialCount data gt count 0 template lt button v on click onClick gt count kez tiklandi lt button gt computed countTimesTwo return this count 2 watch count newValue oldValue console log Sayinin degeri oldValue ten newValue ya degistirildi methods onClick this count 1 mounted this count this initialCount new Vue el tuto lt script gt Templates Vue olusturulan DOM un temel alinan Vue orneginin verilerine baglanmasina izin veren HTML tabanli bir sablon sozdizimi kullanir Tum Vue sablonlari spesifikasyonla uyumlu tarayicilar ve HTML ayristiricilari tarafindan ayristirilabilen gecerli HTML dir Vue sablonlari sanal DOM olusturma islevlerine derler Sanal Belge Nesne Modeli veya DOM Vue nun tarayiciyi guncellemeden once bilesenleri belleginde olusturmasina olanak tanir Reaktivite sistemiyle birlikte Vue uygulama durumu degistiginde minimum miktarda DOM manipulasyonunu yeniden olusturmak ve uygulamak icin minimum bilesen sayisini hesaplayabilir Reactivity Vue duz JavaScript nesneleri ve optimize edilmis yeniden olusturmayi kullanan bir reaktivite sistemine sahiptir Her component olusturma sirasinda reaktif bagimliliklarini takip eder boylece sistem tam olarak ne zaman yeniden olusturulacagini ve hangi bilesenlerin yeniden olusturulacagini bilir Routing Routing yapisi Vue ile SPA Single Page Application Tek Sayfalik Uygulama gelistirilebilmek amaciyla Vue da kullanilan bir eklentidir Single Page Application routing yonlendirme isleminin backend arka uc tarafindan degilde JavaScript tarafindan client side istemci tarafinda yapildigi bir web uygulamasidir lt div id app gt lt router view gt lt router view gt lt div gt lt script gt const Home template lt div gt Anasayfa lt div gt const router new VueRouter routes path home component Home lt script gt Yukaridaki ornekte VueRouter nesnesine bir path yol belirtilmistir URL den bu adrese istek yapildiginda Home adli component in render edilecektir Bu component ler router view adli ozel Vue elementine render edilir Kaynakca Evan You 5 Subat 2019 tarihinde kaynagindan arsivlendi Erisim tarihi 6 Mart 2019 vue LICENSE GitHub 22 Mart 2019 tarihinde kaynagindan Erisim tarihi 17 Nisan 2017 Introduction Vue js 9 Mart 2019 tarihinde Wayback Machine sitesinde Alinti Tarihi 11 Mart 2017 npm Ingilizce 10 Eylul 2015 tarihinde kaynagindan arsivlendi Erisim tarihi 7 Mayis 2022 Evan is creating Vue js Patreon 3 Mart 2019 tarihinde Wayback Machine sitesinde Patreon Alinti Tarihi 11 Mart 2017 Between The Wires 11 Mart 2017 03 Haziran 2017 tarihinde arsivlendi vuejs org 10 Subat 2022 tarihinde kaynagindan arsivlendi Erisim tarihi 30 Ekim 2022 Dis baglantilarVueJs Resmi Websitesi 6 Mart 2019 tarihinde Wayback Machine sitesinde