Vue.js kütüphanesi reaktif bileşenler için çok popüler bir seçenektir. Hafif, kavraması kolay ve oynaması eğlenceli ve React veya Angular gibi diğer kütüphanelere mükemmel bir alternatif olabilir.
En basit örneklerle giriş yapmanızı sağlayalım. Her programlamada olduğu gibi merhaba dünya kodu ile örneğimizi hazırlayalım:
|
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 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="tr"> <meta> <meta charset="UTF-8"> <title>Merhaba Dünya (www.tasarimkodlama.com)</title> </meta> <body> <div id="merhaba-dunya-app"> <h1>{{ mesaj }}</h1> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"> </script> <script> new Vue({ el: "#merhaba-dunya-app", data() { return { mesaj: "Merhaba dünya! Vue.JS" } } }); </script> </body> </html> |
Çıktı:
Adım adım açıklayalım:
- Öncelikle temel bir HTML kaynak dosyası var.
- #merhaba-dunya-app kimliğine sahip bir div bizim app içerecektir.
- Div’de bir h1 ve bir mesaj veri parçasına referansımız var.
- Cdnjs’de barındırılan küçültülmüş Vue.js kütüphanesini çağırıyoruz.
- Daha sonra yeni bir Vue nesnesi başlatıyoruz ve elimizle uygulamamızın #merhaba-dunya-app div olduğunu söylüyoruz.
- Son olarak, veri nesnesiyle gerekli verileri sağlıyoruz. Bu durumda mesaj için veri sağlıyoruz.
- Ve bu kısa tanıtım için hepsi bu kadar!
2 Yorum