Vue.js - Vue.js
Bu makale çok güveniyor Referanslar -e birincil kaynaklar.Temmuz 2019) (Bu şablon mesajını nasıl ve ne zaman kaldıracağınızı öğrenin) ( |
Orijinal yazar (lar) | Evan Sen |
---|---|
İlk sürüm | Şubat 2014[1] |
Kararlı sürüm | 3.0.4 / 2 Aralık 2020[2] |
Depo | Vue.js Deposu |
Yazılmış | JavaScript, TypeScript (Vue 3.0) |
Boyut | 33,30KB dk + gzip |
Tür | JavaScript çerçevesi |
Lisans | MIT Lisansı[3] |
İnternet sitesi | Vuejs |
Vue.js (genellikle şöyle anılır Vue; telaffuz edildi /vjuː/, "görünüm" gibi[4]) bir açık kaynak model-görünüm-görünüm modeli başlangıç aşaması JavaScript çerçevesi İnşaat için Kullanıcı arayüzleri ve tek sayfalı uygulamalar.[11] Evan You tarafından oluşturuldu ve kendisi ve diğer aktif çekirdek ekip üyeleri tarafından sürdürülüyor.[12]
Genel Bakış
Vue.js, bildirim temelli oluşturma ve bileşen kompozisyonuna odaklanan, artımlı olarak uyarlanabilir bir mimariye sahiptir. Çekirdek kitaplık yalnızca görünüm katmanına odaklanır.[13] Yönlendirme gibi karmaşık uygulamalar için gerekli gelişmiş özellikler, durum Yönetimi ve alet yapımı resmi olarak bakımı yapılan destekleyici kitaplıklar ve paketler aracılığıyla sunulur[14], ile Nuxt.js en popüler çözümlerden biri olarak[kaynak belirtilmeli ]
Vue.js, HTML yönergeler adı verilen HTML nitelikleriyle.[15] Direktifler HTML için işlevsellik sunar uygulamaları ya da gel yerleşik veya kullanıcı tanımlı direktifler.
Tarih
Vue, tarafından oluşturuldu Evan Sen için çalıştıktan sonra Google kullanma AngularJS bir dizi projede. Daha sonra düşünce sürecini özetledi: "Anladım, ya Angular'da gerçekten sevdiğim kısmı çıkarabilir ve gerçekten hafif bir şey yapabilirsem."[16] Projeye yönelik ilk kaynak kodu taahhüdü Temmuz 2013 tarihliydi ve Vue ilk olarak takip eden Şubat ayında 2014'te piyasaya sürüldü.
Versiyonlar
Sürüm | Yayın tarihi | Başlık |
---|---|---|
3.0 | 18 Eylül 2020 | Bir parça [17] |
2.6 | 4 Şubat 2019 | Macross [18] |
2.5 | Ekim 13, 2017 | Seviye E [19] |
2.4 | 13 Temmuz 2017 | Öldür la öldür [20] |
2.3 | 27 Nisan 2017 | JoJo'nun Tuhaf Macerası [21] |
2.2 | 26 Şubat 2017 | İlk D [22] |
2.1 | Kasım 22, 2016 | Avcı x Avcı [23] |
2.0 | 30 Eylül 2016 | Denizkabuğundaki hayalet [24] |
1.0 | 27 Ekim 2015 | Evangelion [25] |
0.12 | 12 Haziran 2015 | Ejder topu [26] |
0.11 | 7 Kasım 2014 | Kovboy Bebop [27] |
0.10 | 23 Mart 2014 | Bıçak Sırtı [28] |
0.9 | 25 Şubat 2014 | Animatrix [29] |
0.8 | 27 Ocak 2014 | Yok [30] |
0.7 | 24 Aralık 2013 | Yok [31] |
0.6 | Aralık 8, 2013 | VueJS [32] |
Özellikleri
Bileşenler
Vue bileşenleri temel HTML öğeleri yeniden kullanılabilir kodu kapsüllemek için. Yüksek düzeyde bileşenler, Vue'nun derleyicisinin davranışa iliştirdiği özel öğelerdir. Vue'da bir bileşen, aslında önceden tanımlanmış seçeneklere sahip bir Vue örneğidir.[33]Aşağıdaki kod parçacığı, bir Vue bileşeni örneği içerir. Bileşen bir düğme sunar ve düğmeye kaç kez tıklandığını yazdırır:
<şablon> <div İD="tuto"> <düğme tıklanmış v-bind: ilk sayım="0"></düğme tıklanmış> </div></şablon><senaryo>Vue.bileşen("düğme tıklandı", { sahne: ['initialCount'], veri: () => ({ Miktar: 0, }), şablon: ' tıklandı', hesaplanmış: { countTimesTwo() { dönüş bu.Miktar * 2; } }, izlemek: { Miktar(yeni değer, oldValue) { konsol.günlük(`Count değeri, ${oldValue} -e ${yeni değer}.`); } }, yöntemler: { tıklamada() { bu.Miktar += 1; } }, monte() { bu.Miktar = bu.initialCount; }});yeni Vue({ el: "#tuto",});</senaryo>
Şablonlar
Vue bir HTML işlenmiş olanı bağlamaya izin veren şablon sözdizimi DOM temeldeki Vue örneğinin verilerine. Tüm Vue şablonları, spesifikasyonla uyumlu tarayıcılar ve HTML tarafından ayrıştırılabilen geçerli HTML'dir ayrıştırıcılar. Vue, şablonları sanal DOM oluşturma işlevlerinde derler. Sanal bir Belge Nesne Modeli (veya "DOM"), tarayıcıyı güncellemeden önce Vue'nun belleğindeki bileşenleri işlemesine izin verir. 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 kullanıcıları şablon sözdizimini kullanabilir veya aşağıdakileri kullanarak oluşturma işlevlerini doğrudan yazmayı seçebilir: JSX.[34] Oluşturma işlevleri uygulamanın oluşturulmasına izin verir yazılım bileşenleri.[35]
Reaktivite
Vue, sade kullanan bir reaktivite sistemine sahiptir. JavaScript nesneler ve optimize edilmiş yeniden işleme. Her bileşen, oluşturma sırasında reaktif bağımlılıklarını izler, böylece sistem tam olarak ne zaman yeniden oluşturulacağını ve hangi bileşenlerin yeniden oluşturulacağını bilir.[36]
Geçişler
Vue, öğeler eklendiğinde, güncellendiğinde veya listeden çıkarıldığında geçiş efektleri uygulamak için çeşitli yollar sunar. DOM. Bu, şu araçları içerir:
- İçin sınıfları otomatik olarak uygula CSS geçişler ve animasyonlar
- Animate.css gibi üçüncü taraf CSS animasyon kitaplıklarını entegre edin
- Geçiş kancaları sırasında DOM'u doğrudan değiştirmek için JavaScript kullanın
- Üçüncü taraf JavaScript animasyon kitaplıklarını entegre edin, örneğin Velocity.js
Bir geçiş bileşenine sarılmış bir öğe eklendiğinde veya çıkarıldığında şu olur:
- Vue, hedef öğeye CSS geçişlerinin veya animasyonların uygulanıp uygulanmadığını otomatik olarak algılar. Varsa, CSS geçiş sınıfları uygun zamanlamalarda eklenecek / kaldırılacaktır.
- Geçiş bileşeni JavaScript kancaları sağladıysa, bu kancalar uygun zamanlamalarda çağrılacaktır.
- CSS geçişleri / animasyonları algılanmazsa ve JavaScript kancası sağlanmadıysa, ekleme ve / veya kaldırma için DOM işlemleri bir sonraki karede hemen yürütülecektir.[37][38]
Yönlendirme
Geleneksel bir dezavantajı tek sayfalı uygulamalar (SPA'lar), belirli bir web sayfasındaki tam "alt" sayfaya giden bağlantıların paylaşılamamasıdır. SPA'lar, kullanıcılarına sunucudan yalnızca bir URL tabanlı yanıt sunduğundan (genellikle index.html veya index.vue sunar), belirli ekranlara yer işareti koymak veya belirli bölümlere bağlantı paylaşmak normalde imkansız değilse de zordur. Bu sorunu çözmek için, birçok istemci tarafı yönlendirici dinamik URL'lerini bir "hashbang" (#!) İle sınırlandırır, ör. page.com/#!/. Ancak, HTML5 ile çoğu modern tarayıcı, hashbang'ler olmadan yönlendirmeyi destekler.
Vue, nasıl değiştirildiğine bakılmaksızın (e-postayla gönderilen bağlantı, yenileme veya sayfa içi bağlantılarla) geçerli URL yoluna göre sayfada görüntülenenleri değiştirmek için bir arayüz sağlar. Ek olarak, bir ön uç yönlendirici kullanmak, düğmelerde veya bağlantılarda belirli tarayıcı olayları (ör. Tıklamalar) gerçekleştiğinde tarayıcı yolunun kasıtlı olarak geçişine izin verir. Vue'nun kendisi, ön uç karma yönlendirme ile gelmez. Ancak açık kaynaklı "vue-yönlendirici" paketi, uygulamanın URL'sini güncellemek için bir API sağlar, geri düğmesini (gezinme geçmişi) ve e-posta şifresi sıfırlamalarını veya kimlik doğrulama URL parametreleriyle e-posta doğrulama bağlantılarını destekler. İç içe yerleştirilmiş rotaların iç içe bileşenlere eşlenmesini destekler ve ayrıntılı geçiş denetimi sunar. Vue ile geliştiriciler, daha büyük bileşenler oluşturan küçük yapı taşlarına sahip uygulamalar oluşturuyorlar. Karışıma vue-yönlendirici eklendiğinde, bileşenler yalnızca ait oldukları yollarla eşlenmeli ve üst / kök yollar, alt öğelerin nerede oluşturulacağını belirtmelidir.[39]
<div İD="uygulama"> <yönlendirici görünümü></yönlendirici görünümü></div>...<senaryo>...sabit Kullanıcı = { şablon: ' Kullanıcı {{$ route.params.id}} '};sabit yönlendirici = yeni VueRouter({ rotalar: [ { yol: '/Kullanıcı kimliği', bileşen: Kullanıcı } ]});...</senaryo>
Yukarıdaki kod:
- Şurada bir ön uç rotası ayarlar
websitename.com/user/
. - (Const Kullanıcı ...) içinde tanımlanan Kullanıcı bileşeninde oluşturulacak
- Kullanıcı bileşeninin, $ route nesnesinin params anahtarı kullanılarak URL'ye yazılan kullanıcının belirli kimliğini geçirmesine izin verir:
$ route.params.id
. - Bu şablon (yönlendiriciye geçirilen parametrelere göre değişir),
<router-view></router-view>
DOM'un div # uygulaması içinde. - Yazan biri için son olarak oluşturulan HTML:
websitename.com/user/1
olacak:
<div İD="uygulama"> <div> <div>Kullanıcı 1</div> </div></div>
Ekosistem
Çekirdek kitaplık, hem çekirdek ekip hem de katkıda bulunanlar tarafından geliştirilen araçlar ve kitaplıklarla birlikte gelir.
Resmi takım
- Devtools - Vue.js uygulamalarında hata ayıklamak için tarayıcı geliştirici uzantısı
- Vue CLI - Hızlı Vue.js geliştirme için Standart Araçlar
- Vue Yükleyici - Vue bileşenlerinin Tek Dosyalı Bileşenler (SFC'ler) adı verilen bir formatta yazılmasına izin veren bir web paketi yükleyici
Resmi kütüphaneler
- Vue Yönlendirici - Vue.js için resmi yönlendirici
- Vuex - Vue.js için Flux'tan ilham alan Merkezi Durum Yönetimi
- Vue Sunucusu Oluşturucu - Vue.js için Sunucu Tarafı Oluşturma
Ayrıca bakınız
- JavaScript çerçevelerinin karşılaştırılması
- Tepki
- AngularJS
- Açısal
- Quasar Çerçevesi
- JavaScript çerçevesi
- JavaScript kitaplığı
- Model-görünüm-ViewModel
- Nuxt.js
Kaynaklar
Bu makale, bir ücretsiz içerik iş. Altında lisanslı MIT Lisansı Wikimedia Commons'ta lisans beyanı / izni. Alınan metin Vue.js Kılavuzu, Vue.js,
Referanslar
- ^ "Vue.js'yi Başlatmanın İlk Haftası". Evan Sen.
- ^ "vue-next / CHANGELOG.md". GitHub. Alındı 3 Aralık 2020.
- ^ "vue / LİSANS". GitHub. Alındı 17 Nisan 2017.
- ^ "Kılavuz: Vue.js nedir?". Vue.js. Alındı 3 Ocak 2020.
- ^ Macrae, Callum (2018). Vue.js: Hazır ve Çalışıyor: Erişilebilir ve Performanslı Web Uygulamaları Oluşturma. O'Reilly Media. ISBN 9781491997215.
- ^ Nelson, Brett (2018). Vue.js'yi Tanıyın: Vue'da Sıfırdan Tek Sayfa Uygulamaları Oluşturmayı Öğrenin. Apress. ISBN 9781484237816.
- ^ Yerburgh, Edd (2019). Vue.js Uygulamalarını Test Etme. Manning Yayınları. ISBN 9781617295249.
- ^ Freeman, Adam (2018). Pro Vue.js 2. Apress. ISBN 9781484238059.
- ^ Franklin, Jack; Wanyoike, Michael; Bouchefra, Ahmed; Silas, Kingsley; Campbell, Chad A .; Jacques, Nilson; Omole, Olayinka; Mulders, Michiel (2019). Vue.js ile çalışma. SitePoint. ISBN 9781492071440.
- ^ "Giriş - Vue.js". Alındı 11 Mart, 2017.
- ^ [5][6][7][8][9][10]
- ^ "Ekiple Tanışın - Vue.js". vuejs.org. Alındı 23 Eylül 2019.
- ^ "Giriş - Vue.js". vuejs.org. Alındı 27 Mayıs 2020.
- ^ "Evan, Vue.js oluşturuyor | Patreon". Patreon. Alındı 11 Mart, 2017.
- ^ "Vue.js nedir". www.w3schools.com. Alındı 21 Ocak 2020.
- ^ "Kabloların Arasında | Evan You". Teller Arasında. 3 Kasım 2016. Arşivlendi orijinal 3 Haziran 2017. Alındı 26 Ağustos 2017.
- ^ "v3.0.0 Tek Parça". GitHub. 18 Eylül 2020. Alındı 23 Eylül 2020.
- ^ "v2.6.0 Macross". GitHub. 4 Şubat 2019. Alındı 23 Eylül 2020.
- ^ "v2.5.0 Düzey E". GitHub. Ekim 13, 2017. Alındı 23 Eylül 2020.
- ^ "v2.4.0 Kill la Kill". GitHub. 13 Temmuz 2017. Alındı 23 Eylül 2020.
- ^ "v2.3.0 JoJo'nun Tuhaf Macerası". GitHub. 27 Nisan 2017. Alındı 23 Eylül 2020.
- ^ "v2.2.0 İlk D". GitHub. 26 Şubat 2017. Alındı 23 Eylül 2020.
- ^ "v2.1.0 Hunter X Hunter". GitHub. Kasım 22, 2016. Alındı 23 Eylül 2020.
- ^ "v2.0.0 Kabuktaki Hayalet". GitHub. 30 Eylül 2016. Alındı 23 Eylül 2020.
- ^ "1.0.0 Evangelion". GitHub. 27 Ekim 2015. Alındı 23 Eylül 2020.
- ^ "0.12.0: Dragon Ball". GitHub. 12 Haziran 2015. Alındı 23 Eylül 2020.
- ^ "v0.11.0: Cowboy Bebop". GitHub. 7 Kasım 2014. Alındı 23 Eylül 2020.
- ^ "v0.10.0: Blade Runner". GitHub. 23 Mart 2014. Alındı 23 Eylül 2020.
- ^ "v0.9.0: Animatrix". GitHub. 25 Şubat 2014. Alındı 23 Eylül 2020.
- ^ "v0.8.0". GitHub. 27 Ocak 2014. Alındı 23 Eylül 2020.
- ^ "v0.7.0". GitHub. 24 Aralık 2013. Alındı 23 Eylül 2020.
- ^ "0.6.0: VueJS". GitHub. Aralık 8, 2013. Alındı 23 Eylül 2020.
- ^ "Bileşenler - Vue.js". Alındı 11 Mart, 2017.
- ^ "Şablon Sözdizimi - Vue.js". Alındı 11 Mart, 2017.
- ^ "Vue 2.0 Burada!". Vue Noktası. 30 Eylül 2016. Alındı 11 Mart, 2017.
- ^ "Derinlikte Reaktivite - Vue.js". Alındı 11 Mart, 2017.
- ^ "Geçiş Efektleri - Vue.js". Alındı 11 Mart, 2017.
- ^ "Geçiş Durumu - Vue.js". Alındı 11 Mart, 2017.
- ^ "Yönlendirme - Vue.js". Alındı 11 Mart, 2017.
- ^ Sen, Evan. "Vue İç İçe Yönlendirme (2)". Vue Ana Sayfası (alt sayfa). Alındı 10 Mayıs, 2017.