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).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <!DOCTYPE html> <html lang="tr"> <head> <title>Vue intro</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <h1>VUEJS Giriş</h1> </div> </body> </html> |
Vue kütüphanesini script kullanarak index.html dosyasına ekleyin.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="tr"> <head> <title>Vue intro</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <h1>VUEJS Giriş</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </body> </html> |
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.
1 2 3 4 5 | var app = new Vue({ el:"#app" }) |
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.
1 2 3 4 5 6 7 8 | var app = new Vue({ el:"#app", data:{ baslik: "Vuejs Örnekleri" } }) |
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.
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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <!DOCTYPE html> <html lang="tr"> <head> <title>Vue intro</title> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <div id="app"> <h1>İşte: {{baslik}}</h1> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el:"#app", data:{ baslik: "Vuejs Örnekleri" } }) </script> </body> </html> |
Yorum Yap