Github'daki en popüler web çerçevesinin hızlı bir şekilde anlaşılması-Vue.js ile başlarken
Vue, web kullanıcı arayüzleri oluşturmaya odaklanan bir JavaScript kitaplığıdır. Bu makale önce kısa bir giriş yoluyla size Vue hakkında bir ön bilgi verir ve ardından bir web uygulaması oluşturur.
Neden bu ön uç çerçeveye ihtiyacınız var?
Nispeten konuşursak, Vue, JavaScript ön uç alanında geç kalan bir kişidir, ancak mevcut ana JavaScript kitaplık durumuna büyük bir tehdit oluşturmaktadır. Kullanımı kolay, esnek, hızlıdır ve ayrıca geliştiricilerin hızlı bir şekilde modern bir Web uygulaması oluşturmasına olanak tanıyan birçok işlev ve isteğe bağlı araç sağlar. Vue'nun yazarı You Yuxi, buna aşamalı bir çerçeve diyor.
Vue, artımlı artış tasarım ilkesini takip eder ve ana kitaplığı kullanıcı arayüzüne odaklanır, böylece mevcut projeler Vue ile kolayca entegre edilebilir ve kullanılabilir.
Vue, hem küçük prototipler hem de karmaşık büyük ölçekli web uygulamaları oluşturabilir.
Vue öğrenmesi çok kolaydır - yeni başlayanlar Vue'da kolaylıkla ustalaşabilir ve Vue'ya zaten aşina olan geliştiriciler gerçek projelerde hızla rolünü oynayabilir.
Bir bütün olarak Vue, MVVM (Model-View-ViewModel, model-view-view modeli) mimarisini takip eder, bu da View (kullanıcı arayüzü veya görünüm) ve Model (veriler) bağımsızdır ve ViewModel (Vue) View ve Model arasında etkileşim sağlar. köprü. Vue, Görünüm ve Model arasındaki güncelleme işlemini otomatikleştirir ve geliştiriciler için optimize edilmiştir. Bu nedenle, Görünümün belirli bir bölümünün güncellenmesi gerektiğinde, geliştiricinin bunu belirtmesi gerekmez ve Vue, bunu güncellemek için uygun yöntemi ve zamanlamayı seçecektir.
Vue ayrıca diğer benzer çerçevelerin (React, Angular ve Polymer gibi) özünden de yararlanır. Aşağıda, Vue'nun temel işlevlerine genel bir bakış yer almaktadır.
Hafif bir sanal DOM motoru ve minimum optimizasyon çalışmasıyla kullanıcı arayüzünü otomatik olarak güncelleyebilen duyarlı bir veri sistemi.
Zarif ve kolay anlaşılır HTML şablonları, JSX (JavaScript'te HTML yazma teknolojisi) ve hiperscript oluşturma işlevleri (tamamen JavaScript kullanarak) dahil olmak üzere esnek görünüm bildirimleri.
Bakım yapılabilir ve yeniden kullanılabilir bileşenlerden oluşan bileşenli bir kullanıcı arabirimi.
Resmi bileşen kitaplığı, yönlendirme, durum yönetimi, yapı iskelesi ve daha gelişmiş işlevler sağlayarak Vue'yu esnek ve tamamen işlevsel bir ön uç çerçevesi haline getirir.
Bu umut verici bir proje
2013 yılında You Yuxi, Vue'nun ilk prototipini yapmayı planlamaya başladı. O sırada You Yuxi, Google'da çalışıyordu ve işte Angular'ı kullanıyordu. You Yuxi'nin asıl amacı, Angular'daki veri bağlama ve veriye dayalı DOM gibi tüm mükemmel özellikleri özümsemek ve çerçeveyi sağlam ve öğrenmesi ve kullanması zor hale getirecek bazı özellikleri atmaktı.
Vue, Şubat 2014'te halka tanıtıldı ve ilk gününde büyük bir başarı elde etti: HackerNews ana sayfasında yer aldı, Reddit'in / r / javascript bölümünde birinci sırada yer aldı ve resmi web sitesi 10.000 benzersiz ziyaret aldı.
Vue'nun ilk ana sürümü 1.0, Ekim 2015'te piyasaya sürüldü. 2015 sonu itibariyle, Vue npm'de 382.000 indirmeye yükseldi, GitHub'da 11.000 yıldız toplandı ve resmi web sitesi 363.000 benzersiz ziyaret aldı. Ana akım PHP çerçevesi Laravel, resmi ön uç kitaplığı olarak React yerine Vue'yu seçti.
Vue 2.0'ın ikinci büyük sürümü, sanal DOM'a dayalı yeni bir oluşturucu ve sunucu tarafı oluşturma ve performans iyileştirmeleri gibi birçok yeni özellik ile Eylül 2016'da piyasaya sürüldü. Vue şu anda en hızlı ön uç çerçevelerden biridir. React ekibiyle yapılan karşılaştırma raporuna göre, Vue'nun performansı React'ten bile daha iyi (https://cn.vuejs.org/v2/guide/comparison). Yayın tarihi itibarıyla Vue, React ve Angular'ı geride bırakarak 125.000 yıldızla GitHub'daki popüler ön uç çerçeveler arasında ilk sırada yer alıyor. Bkz .: https://github.com/collections/front-end-javascript-frameworks.
Günümüzde Microsoft, Adobe, Alibaba, Baidu, Xiaomi, Expedia, Nintendo ve GitLab gibi birçok şirket Vue kullanıyor.
Uyumluluk gereksinimleri
Vue, herhangi bir üçüncü taraf bağımlılığına sahip değildir ve tüm ECMAScript 5 uyumlu tarayıcılarda kullanılabilir. Bu, Internet Explorer 8 ve altını desteklemediği anlamına gelir çünkü Vue, JavaScript'te Object.defineProperty gibi eski tarayıcılarda çoklu doldurulamayan nispeten yeni özellikler kullanır.
Bir dakikalık ayar
Daha fazla uzatmadan hızlı kurulumla ilk Vue uygulamasını oluşturalım. Vue'nun doğal esnekliği nedeniyle, yalnızca basit < senaryo > Etiketler herhangi bir Web sayfasına eklenebilir. Basit bir div öğesi ve bir Vue kitaplığı içeren basit bir Web sayfası oluşturalım. < senaryo > etiket:
< html > < baş > < meta charset = "utf-8" > < Başlık > Vue Proje Rehberi kurulumu < /Başlık > < / kafa > < vücut > < ! - buraya kitaplık ekleyin - > < script src = "https://unpkg.com/vue/dist/vue.js" > < /senaryo > < ! - Bazı HTML kodları - > < div id = "kök" > < p > Bu bir Merhaba dünya mı? < / p > < / div > < ! - Bazı JavaScript kodları - > < senaryo > console.log ('Evet! Vue sürümünü kullanıyoruz', Vue.version) < /senaryo > < /vücut > < / html >Tarayıcı konsolunda aşağıdakine benzer bir şey görebilirsiniz:
Evet! Vue 2.0.3 sürümünü kullanıyoruzYukarıdaki kodda gösterildiği gibi, kütüphane, Vue'yu kullanmak için gereken tüm fonksiyonları içeren harici olarak bir Vue nesnesi sağlar. Bu noktada her şey hazır.
Bir uygulama oluşturun
Şu anda, bu web sayfasında çalışan bir Vue uygulaması yok. Tüm kitaplık, Vue örneklerine dayanır ve örnekler, Görünüm ve Model (veri) etkileşimi arasındaki köprüdür. Bu nedenle, uygulamayı başlatmak için yeni bir Vue örneği oluşturmanız gerekir:
// Vue örneği oluştur var app = new Vue ({ // Kök DOM öğesi için CSS seçici el: '# kök', // birkaç veri data () { dönüş { } }, })Yukarıdaki kodda, yeni bir örnek oluşturmak için Vue yapıcısı new anahtar sözcüğü ile çağrılır. Vue yapıcısının bir parametresi vardır - seçenek nesnesi. Bu parametre birden çok öznitelik taşıyabilir (seçenekler olarak adlandırılır) ve burada bunlardan yalnızca ikisi kullanılır.
El seçeneği aracılığıyla, CSS seçiciyi kullanarak Vue'ya Web sayfasının hangi DOM öğesini örneği ekleyeceğini (bağlayacağını) söyleriz. Bu örnekte, Vue örneği kullanacaktır < div id = "kök" > DOM öğesi, kök öğesi olarak işlev görür. Ek olarak, el seçeneği yerine Vue örneğinin $ mount yöntemini de kullanabilirsiniz:
var app = new Vue ({ data () { dönüş { mesaj: 'Merhaba Vue.js!', } }, }) // Sayfaya Vue örneği ekleyin app. $ mount ('# root')İPUCU: Vue örneklerinin özel yöntemlerinin ve özelliklerinin çoğu bir dolar işaretiyle ($) başlar.
Ayrıca veri seçeneğindeki bazı verileri, bir dizge taşıyan ileti özniteliğini kullanarak başlatacağız. Şimdi Vue uygulaması çalışıyor ve çalışıyor, ancak burada hiçbir şey yapılmadı.
Tek bir web sayfasında, geliştiriciler herhangi bir sayıda Vue uygulaması ekleyebilir. Her uygulama için yeni bir Vue örneği oluşturun ve bunu farklı DOM öğelerine bağlayın. Vue'yu mevcut bir projeye entegre etmek istediğinizde bu çok kullanışlıdır.
Vue geliştirici araçları
Vue, Chrome'da Vue.js devtools adlı bir uzantı olarak sunulan resmi bir hata ayıklama aracına sahiptir. Bu araç aracılığıyla, kodda hata ayıklamaya yardımcı olan uygulamanın çalışma durumunu görebilirsiniz. Chrome Web Mağazasından (https://chrome.google.com/webstore/search/vue) indirilebilir; Firefox kullanıyorsanız, Firefox Eklentilerine (https://addons.mozilla.org/en-US/) gidebilirsiniz. firefox / addon / vue-js-devtools /? src = ss) indir.
Chrome sürümünü kullanıyorsanız, ek ayarlar gerekir. Genişletilmiş ayarlarda, hata ayıklama aracının yerel diskten açılan web sayfasındaki Vue'yu algılayabilmesi için dosyaURL'lerine erişime izin ver seçeneğini etkinleştirin.
Web sayfamızı açın, Chrome Geliştirici Araçlarını açmak için F12 kısayol tuşuna (OS X'te kısayol tuşu Shift + command + c'dir) basın ve ardından Vue sekmesini bulun (Diğer araçlar ... açılır menüsünde gizlenmiş olabilir). Bu sekmeyi açtıktan sonra, varsayılan olarak Root adında bir Vue örnek ağacı görebilirsiniz. Kök'e tıklarsanız, örneğin ilgili özellikleri kenar çubuğunda görüntülenir.
İPUCU: Devtools sekmesini istediğiniz yere sürükleyip bırakabilirsiniz. Ön konuma getirilmesi tavsiye edilir, çünkü Vue geliştirme modunda olmadığında veya çalışmadığında sekme sayfada gizlenir.
Vue örneğinin adı, ad seçeneğiyle değiştirilebilir:
var app = new Vue ({ ad: 'Uygulamam', // ... })Bir sayfada birden fazla Vue örneği olduğunda, geliştirici araçlarında belirli bir örneği görsel olarak bulmaya yardımcı olur.
Şablonlarla DOM dinamiklerini gerçekleştirin
Vue'da, geliştiriciler çeşitli şekillerde görünümler yazabilir. Şimdi şablonla başlayalım. Şablon, Görünümü tanımlamanın en kolay yoludur, çünkü HTML'ye çok benziyor ve yalnızca küçük bir miktar ek sözdizimi DOM'un dinamik güncellemelerini kolayca elde edebilir.
Metin görüntüleme
Şablonun ilk işlevine bir göz atalım: metin enterpolasyonu. Metin enterpolasyonu, Web sayfalarında dinamik metni görüntülemek için kullanılır. Metin enterpolasyonunun sözdizimi, çift kaşlı ayraçlar arasına herhangi bir türden tek bir JavaScript ifadesi eklemektir. Vue şablonu işlediğinde, JavaScript ifadesinin sonucu çift kaşlı ayraç etiketinin yerini alacaktır. Aşağıdaki kodla değiştirin < div id = "kök" > element:
< div id = "kök" > < p > {{ İleti }} < / p > < / div >Yukarıdaki şablonda bir < p > öğesi. Bu elemanın içeriği JavaScript ifade mesajının sonucudur. Bu ifade, Vue örneğindeki message özelliğinin değerini döndürür. Şimdi Web sayfasında yeni bir metin çıktı satırı görmelisiniz: Merhaba Vue.js !. Bu sadece bir dizge gibi görünüyor, ancak Vue geliştiriciler için çok şey yaptı - DOM ve veriler birbirine bağlı.
Bunu kanıtlamak için tarayıcı konsolunu açıp app.message'ın değerini değiştirip Enter tuşuna basıyoruz:
app.message = 'Harika!'Görüntülenen metnin değiştiğini görebilirsiniz. Bunun arkasındaki teknolojiye veri bağlama denir. Yani, veri her değiştiğinde Vue, geliştiricinin herhangi bir şey yapmasına gerek kalmadan DOM'u otomatik olarak güncelleyebilir. Vue çerçevesi, tüm verileri izleyebilen ve veriler değiştiğinde Görünümü otomatik olarak güncelleyebilen çok güçlü ve verimli bir yanıt sistemi içerir. Tüm bu işlemler çok hızlıdır.
Temel etkileşim eklemek için talimatları kullanın
Statik uygulamamıza etkileşim ekleyelim. Örneğin, kullanıcıların metin girerek sayfada görüntülenen içeriği değiştirmesine izin vermek. Böyle bir etkileşimli efekt elde etmek için, şablonda yönergeler adı verilen özel HTML niteliklerini kullanabilirsiniz.
Vue'daki tüm komut adlarının önünde v- bulunur ve kebab-case sözdizimini izler. Bu, kelimeleri kısa çizgilerle ayırmak anlamına gelir. HTML nitelikleri büyük / küçük harfe duyarlı değildir (büyük veya küçük harf ile ilgili bir sorun yoktur).
Burada kullanılması gereken talimat v modelidir ve < giriş > Öğenin değeri, mesaj veri özniteliğine bağlıdır. Şablona yeni bir tane ekleyin < giriş > Öğe, bu öğe v-model = "message" özelliğine sahiptir:
< div id = "kök" > < p > {{ İleti }} < / p > < ! - Bir metin giriş kutusu ekleyin - > < input v-model = "mesaj" / > < / div >Giriş değeri değiştiğinde, Vue otomatik olarak mesaj özelliğini güncelleyecektir. Metin içeriğinin giriş değişiklikleri ve geliştirici araçlarındaki değer değişiklikleri ile değişip değişmeyeceğini doğrulamak için girdiye bir miktar içerik girebilirsiniz:
Vue birçok talimat sağlar ve geliştiriciler de talimatları özelleştirebilir.
özet
Bu makale önce Vue kullanmaya başlamak için hızlı bir şekilde bir Web sayfası kurdu ve ardından örnek bir uygulama yazdı. Sayfada bir Vue örneği oluşturduk ve DOM'a bağladık ve ardından DOM dinamiklerini gerçekleştirmek için bir şablon yazdık. Bu şablonda, metin içeriğini metin enterpolasyonu yardımıyla görüntülemek için bir JavaScript ifadesi kullanıyoruz. Son olarak, girdi öğesi, Web sayfasına biraz etkileşim ekleyen v-model talimatı aracılığıyla veri özniteliğine bağlanır.
Bu makale "Vue.js Projesi Gerçek Mücadelesi" nden seçilmiştir
Gerçek web uygulamaları oluşturmak için Vue kullanmak istiyorsanız, lütfen aşağıdaki kitaba bakın.
Bu kitap 6 özel projeden oluşmaktadır. Yazar, her projeyi incelerken okuyucuyu kendi başına pratik bir uygulama oluşturmaya yönlendirir. Bu, bu kitabı bitirdiğimizde çalıştırılabilecek 6 Vue uygulamamız olacağı anlamına geliyor.
Bölüm 1 Vue Development'a Giriş
Bölüm 2 Proje 1: Markdown Defter
Bölüm 3 Proje 2: Kale Düello Oyunu
Bölüm 4 Gelişmiş Proje Ayarları
Bölüm 5: Proje 3: Destek Merkezi
Bölüm 6-Proje 4: Blog Haritası
Bölüm 7-Proje 5: Çevrimiçi Mağaza ve Uzantı
Bölüm 8 Proje 6: Gerçek zamanlı gösterge tabloları geliştirmek için Meteor'u kullanma
Kitap satın almak üzere Jingdong'a atlamak için [Daha fazla bilgi] 'yi tıklayın
