Vue.js Sitenizde yeniden kullanılabilir ve reaktif bileşenler oluşturmak için bir mikro JavaScript çerçevesidir.
Ön uç çerçeveleri, hem boyut hem de kapsam bakımından büyük ölçüde farklılık gösterir; Vue.js'nin öne çıktığı nokta, minimal tasarımında ve uyarlanabilirliğe odaklanır. Sitenizin tamamını Vue.js kullanarak oluşturma seçeneğiniz vardır, sitenizin tek bir parçasını reaktif hale getirirsiniz, ya da herhangi bir şey. Bu nedenle, sığ bir öğrenme eğrisi ile çok ulaşılabilir.
Bu makalede, Vue.js'nin temel bileşenlerine ve kurulumun nasıl yapılacağına ve nasıl başlayacağına bakacağız, ancak önce Vue.js gibi bir ön uç çerçevesi kullanmak isteyip istemediğinize bir göz atalım. .
Ön çerçeve çerçeveleri, çoğu çerçeve gibi, ortak görevlere, projeler arasında bulduğunuz ortak paydaya gelir. Vue.js, özellikle JavaScript aracılığıyla dinamik olarak güncellenen HTML bileşenleri oluşturma sürecini özetliyor.
Vue.js'nin sizin için çözdüğü acı noktalarından birkaçı, dinamik HTML oluşturuyor, HTML öğeleri eylemlerini, verilerinizi kapsam ve bağlamla uyumlu hale getiriyor ve HTML'nin otomatik olarak yeniden oluşturulması gerektiğinde izini tutuyor.
Örneğin, dinamik bir adlar listesine sahip olduğunuz bir sayfanız olduğunu varsayalım. Böyle bir şeye benzeyen yazılı bir kodunuz olabilir:
HTML'yi el ile oluşturduğunuzda, kodun daha büyük örneklerde hızlıca yönetilmesi zor olduğu gibi, veriler ile oluşturulan HTML arasında gerçek bir bağlantı yoktur. Eğer isim dizisi değişirse, bunun farkında olmalı ve listeyi yeniden oluşturmalısınız. Tüm bunlar aynı zamanda sadece dinamik verileri görüntülemek içindir, eğer bir tıklatma işleyicisi gibi olay işleyicileri eklemek istiyorsanız, kapsamı kaydetmek için, kodunuzu daha fazla iç içe tutmaya devam edersiniz:
Vue.js ile HTML'yi verilen verilere dayanarak neyin üretileceğini gösteren bir şablon olarak ayırırsınız ve Vue.js bunu otomatik olarak oluşturur.
Vue.js'deki bu örnek aşağıdaki gibi görünür:
JavaScript kodunun HTML yönleri ile JavaScript kodunun mantığı arasında, her şeyi kendi içinde barındıran ve çok daha kolay yönetilebilir hale getiren tam bir ayrımımız var. Yine de kendimizi biraz daha ileriye taşıyoruz, bir adım geri gidelim ve Vue.js'nin çekirdeğinin bunu nasıl başardığına bakalım…
Vue.js'nin çekirdeğinde, HTML'nizle bazı veriler arasında bir ilişki tanımlarsınız ve HTML'nin veri değiştiği her zaman güncellenir. Çalışmanın yolu, bir Vue.js bileşenini başlatırken, bazı verileri bir JavaScript nesnesi biçiminde iletirseniz, bu nesne, özelliklerini izlenebilir alıcı ve ayarlayıcı yöntemleri ile değiştirerek değiştirilir.
Vue.js, HTML'yi oluştururken veri nesnesini analiz eder ve farklı HTML öğelerini oluşturmak için hangi verileri kullandığınızı görür. Bunu kullanarak, veri nesnesinde yapılan değişiklikleri izler ve tam olarak neyin güncelleneceğini ve ne zaman olduğunu bilir.
Veriler ve görünüm arasında sıkı bir bağlanma olması, ön uç uygulamalarının gelişimini büyük ölçüde basitleştirmekte ve yanlış sunumlardan kaynaklanan hataları en aza indirmektedir. Bu endişe ayrılığı, görünümü tümüyle güncellemeye gerek kalmadan uygulamanızın mantığına odaklanmanıza olanak tanır.
Vue.js kurulumu, kitaplığı dahil etmek kadar basittir:
Şimdi bir Vue.js uygulamasının bir veri nesnesinden ve verileri katıştırmak için bir HTML şablonundan oluştuğundan bahsetmiştim. Bu yüzden, ilk uygulamamız Vue.js'yi etkin durumda görmek için body :
Önce bir tanımla div Vue.js uygulamamız için HTML şablonumuz olacak. İçinde HTML'ye veri enterpolasyonu için çift parantez kullanıyoruz.
Gerçek Vue.js uygulamasının içinde sadece verileri tanımlarız ve div şablonun hem şablon olarak hem de şablon olarak kullanılmasını sağlar. Ardından, eklenen işaret için, uygulamada sayı değişkenini saniyede bir kez artırıyoruz.
Bu, bir Vue.js uygulaması oluşturmanın, tarayıcınızda bunu açmanızın, bu yüzden, veri özelliğini güncellediğimiz her seferinde sayfanın otomatik olarak güncellendiğini göreceksiniz.
Artık DOM'un değiştirilen verilere tepki vermesi çoğu durumda hikayenin sadece yarısıdır, ayrıca verileri güncellemenin bir yoluna ihtiyacınız vardır, Vue.js bunu olay ve yöntemlerle halleder. Yöntemler, Vue.js uygulamanızın bağlamında çalıştırılan işlevler saklanır.
Sayaç örneğimizi, basitçe koşmak yerine, zamanlayıcıyı başlatma ve durdurma özelliğini eklemek için güncelleyelim:
HTML şablonunda, sayacı başlatmak ve durdurmak için bir düğme ekledik, bunu başarmak için düğmedeki metnin dinamik olması ve düğmenin tıklatılması için bir olay işleyicisine ihtiyacımız var.
Vue.js'de bir öğeyi bir öğe üzerinde bildirmek için, standart HTML DOM olaylarının adını v-on: , Böylece mouseover olay olur v-on:mouseover ya da keyup olay olur v-on:keyup . Bizim örneğimizde v-on:click işlemek için özellik click Etkinlik.
Fark etmiş olabileceğiniz bir şey, butonun metni için, saklı bir mülkün sadece referans alınmasının aksine bir yöntemi çağırmamızdır. Çoğu durumda, sakladığınız veriler mutlaka sayfada görüntülemek istediğiniz biçimde değildir. Yöntemler, verileri işlemek için burada kullanılabilir ve altta yatan veriler değişirse şablon uygun şekilde güncellenirse, yöntemler kullanılırken elde ettiğiniz tüm reaktivite yöntemler uygulanırken uygulanır.
Vue.js uygulamasında, artık zamanlayıcı değişkenini ve bazı yöntemleri barındıran yeni bir mülkümüz var. toggle method which is bound to the button's click event checks whether or not the Düğmenin tıklama olayına bağlı olan yöntem, timer Sırasıyla, zamanlayıcı başlatılır, durdurulur veya durdurulur. counterAction yöntem, zamanlayıcı değişkenine bağlı olarak, düğmedeki doğru eylemi görüntülemek için kullanılır.
Geçiş yöntemi, zamanlayıcı özelliğini değiştirdiğinden ve Vue.js şablonunda bulunan counterAction yöntemi, zamanlayıcı özelliğini kullanır, zaman geçişi çağrılırsa şablon düğmenin metnini yeniden oluşturur.
Zamanlayıcı özelliği için başlangıç değerine sahip olmamamıza rağmen, Vue.js uygulamasını oluştururken yine de bildirilmesi gerekir. Mülkün başlangıcından itibaren bildirilmemesi durumunda, özellik reaktif olmaz ve değiştiğinde HTML'nin yeniden oluşturulmasına neden olmaz.
Örneğimizde, zamanlayıcı çalışırken saniyede bir kez görünüm güncellenir ve bir kez daha, counterAction yöntemi, düğme yeniden çizildiğinde de çağrılır. Vue.js, bir yöntemin sonucunu önbelleğe alarak ve yalnızca yöntemde özel olarak kullanılan veriler değiştiyse yalnızca yöntemi hatırlayarak bunu optimize etmemizi sağlar. Bu, aynı bilgi işlem özelliğini, sayfada birden çok yerde kullanırsanız, değeri birden çok kez işlemek yerine, değeri önbelleğe alarak çok fazla yükü azaltabilirsiniz.
Önbelleğe alınmış özellikleri içerecek şekilde örneği güncelleyelim:
Önbelleğe almanın yanı sıra ana fark, aşağıdaki yöntemlerdir: computed yöntemlerin aksine özellikler olarak başvurulur, bu nedenle HTML şablonunda, parantezleri karşı işlemden kaldırmamız gerekti .