JavaScript Vue.js

Vuejs 2 Giriş (İlk Örnek)

Bu derste, vuejs ve reaktivite sistemine temel bir giriş yapmayı öğreneceğiz.

Vuejs Nedir?

Vuejs, kullanıcı arayüzleri oluşturmak için kullanılan popüler bir JavaScript frameworküdür. Çekirdek kütüphane temel olarak görüntü katmanına odaklanır.

Vuejs kullanarak modern JavaScript web uygulamaları oluşturabiliriz.

Başlangıç

Bu derste, uygulamamızı oluşturmak için Vue cli kullanmıyoruz.

HTML kodlarını yazmak için bir metin editörü açın ve aşağıdaki kodları yazın. Dosyayı index.html olarak kaydedin (isim önemli değil).

Vue kütüphanesini script kullanarak index.html dosyasına ekleyin.

Vue örneği

Komut dosyasını başarıyla HTML dosyamıza ekledikten sonra global bir vue işlevine erişebiliriz.

Vue işlevi yeni bir örnek oluşturmak için kullanılır.

Her vuejs uygulaması bir vue örneği oluşturarak başlar. Bir nesneyi Vue işlevine ileterek bir vue örneği oluşturalım.

Vue library script etiketinden sonra aşağıdaki kodu ekleyin.

el:: #app ekledik, vue örneğinin id değeri app ismine sahip olan HTMLdiv etiketimizle bir ilişki kurduğu anlamına geliyor.

Veri ve Etkileşim

Vue örneği, Vue reaktivite sistemine eklenen data özelliği içine eklediğimiz her şeyi data adı verilen başka bir özelliği de kabul eder.

data özelliğini Vue örneğimize ekleyelim.

Yukarıdaki kodda, baslik: "Vuejs Örnekleri" olan bir data özelliği ekledik.

Bağlama

Verileri Vuejs’de bağlama yapmak için {{  }} çift süslü parantez kullanmamız gerekir. div içindeki h1 etiketinizi aşağıdaki kodla güncelleyin.

Şimdi HTML dosyanızı tarayıcınızda açın.

Daha önce de söylediğim gibi Vue örneği, veri nesnesi içindeki tüm özellikleri reaktivite sistemine ekler, böylece bir özellik değeri değiştiğinde vue, uygulamamızı güncellenmiş verilerle yeniden oluşturur.

Vue reaktivitesini test etmek için tarayıcı konsolunuzu açın ve aşağıdaki kodu girin.

vuejs örnekleri 1
vuejs örnekleri 1

Eğer yukarıdaki özellikte başlık özellik değerini değiştirirsek, vue reaktivite sistemi kullandığımız her yerde başlık özelliğini günceller ancak bizim durumumuzda sadece h1 etiketinde kullandık mı?

Tüm Kodlar:

 

 

 

 

 

 

 

Yorum Yap

Yorum yapmak için tıklayın