Vue.js Instance Oluşturma
Hepinize merhaba dostlarım 😊. Her hafta olduğu gibi bu haftanın pazar gününü de tekrardan taçlandırmak adına sizlerle beraberim ve bunu artık sizler de her zaman fark ediyorsunuz 😊. Artık pazar günü deyince herkesin aklında "MFSoftware Blog Günü" olarak canlandığımı biliyorum bunda hiç şüphem yok 😅.
Lakin bu hafta blog yazımı biraz erkenden paylaşacağım bunu yazının tarihinden de görebilirsiniz. Hafta sonu ufak bir programım olduğu için hafta içinden hızlıca makalemi yazmak istedim.
Şimdiiiii sizin aklınızda olan soruya gelecek olursak dostlarım hepiniz merak ediyorsunuzdur ve şunu diyorsunuz içinizden biliyorum bunu
Bu hafta büyük ihtimal Vue.JS anlatacak hocamız içimize doğdu ve LinkedIn üzerinde de değinmişti bu konuya
Aynen öyle dostlarım. Bu hafta sizlere "Vue.JS Instance Oluşturma" konusundan bahsedeceğim 😊.
Aslında dostlarım İlk Vue.js Projemizi Oluşturalım başlıklı yazımda bunu hızlıca bir şekilde göstermiştim ve ileriki zamanlarda buna değineceğim demiştim. O gün bu gün dostlarım konuya hızlıca girişimizi yapalım 😊
Vue.JS Instance Oluşturalım
Eveeeet geldik makalemizin en civcivli kısımlarına dostlarım. Öncelikle hemen ufak bir index.html kodlarını oluşturalım dostlarım ve içerisine
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.Js Instance Oluşturma | MFSoftware Blog</title>
</head>
<body>
<div id="app">
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> <!-- SİZ BU DOSYAYI LOKALE INDIREBILIRSINIZ BEN BLOG HIZLI CIKSIN DIYE BURADAN CEKTIRDIM :) -->
</body>
</html>şeklinde kodlarımızı yazalım dostrlarım. Şimdiiiii olayı anlatmaya gelecek olursak dostlarım:
Öncelikle id="app" id sine sahip olan div elementmizi kesinlikle ama kesinlikle yazmalıyız dostlarım. Nedenini soracak olursanız Vue.JS uygulamamız çalışması için bir kök div elementi isteyecektir.
Bu div i oluşturduk ama id belirtmediğimizde tekrardan hata verecektir. Yani bize diyecektir ki
Dostum eyvAllah çalışırım çalışmasına da ayıp oluyor. Id belirtmeden çalışmamı istemen yakışmıyor :)
şeklinde ufak bir uyarıda bulunuyor ve çalışmıyor. Bunu da belirtiyoruz yani uzun sözün kısası 😅
Bu kısma kadar tamam ise dostlarım gelelim Intance oluşturma işlemimize. Kodlama ekranımızı açallım ve içerisine
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue.Js Instance Oluşturma | MFSoftware Blog</title>
</head>
<body>
<div id="app">
{{ selamla }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.8/dist/vue.js"></script> <!-- SİZ BU DOSYAYI LOKALE INDIREBILIRSINIZ BEN BLOG HIZLI CIKSIN DIYE BURADAN CEKTIRDIM :) -->
<script>
new Vue({
name : "Vue.JS Instance Oluşturma", // UYGULAMA ISMI
el : "#app", // KÖK DİV ELEMENTİMİZİN ID Sİ
data : { // UYGULAYMADA KULLANACAĞIMIZ DATALAR BURADA OLACAK
selamla : "MFSoftware Blog Vue.JS Instance Oluşturma İşlemi" // BU BİZİM UYGULAMAMIZDA KULLANACAĞIMIZ VERİMİZ
}
});
</script>
</body>
</html>şeklinde kodlarımızı yazalım. Şimdi ne yaptık ona da bir değinelim:
Öncelikle new Vue(); belirterek bir Vue sınıfını çağırdık ve kurucu methoduna bir obje verdik. Bunlar nedir diye bakacak olursak
- name: Bu bizim Vue.js uygulamamızın ismi olacaktır dostlarım. Bunu yazmasanız çalışmaz diye bir kural yok yazmadan da çalıştırabilirsiniz size kalmış. Bana kalırsa yazın derim 😊
- el: Makalenin başında da dediğim gibi dostlarım bu bizim kök div elementimizin id sidir. Yani hangi id li div altındaçalıştıracaksak bunu yazmamız kesinlikle önem arz ediyor dostlarım. Ha siz app yerine başka isim verip div elementine buraya da onu yazarsanız çalışır sıkıntı yok 😊
- data: Uygulamamızda kullanacağımız datalar bunun içerisinde belirtilecektir dostlarım. data objesi içerisinde bunları belirttiğimiz taktirde uygulama içerisinde rahatlıkla kullanabiliriz 😊
şeklindedir dostlarım. Uygulamamızı çalıştırdığımızda ise ekranımıza gelecek olan sonuç
şeklinde olacaktır dostlarım 😊. İşte bütün işlemlerimiz bu kadar basit 😊.
Eveeeet dostlarım bu yazımda sizlere elimden geldiğince dilim döndüğünce Vue.js Instance Oluşturma konusundan elimden geldiğince dilim döndüğünce bahsettim. Umarım faydalı olmuşumdur. Konu başlarda biraz karmaşık gelebilir. Hani her ne kadar da her yazımda basit dememin yanısıra karmaşık olan yanları illa ki vardır yeni öğrenen dostlarım için. Aynı yollardan geçtiğim için biliyorum anlıyorum 😊. Bu aşamada yapmanızı istediğim tek şey her yazımda da dediğim gibi "İstikrarlı ve Azimli Olmalısınız, Bolca Pratik Yapmalısınız 😊". Bu dediklerimi hayat felsefeniz yaptığınız sürece başarı sizler için kaçınılmaz olacaktır.
Aynı zamanda 25 Aralık 2022 de kurmuş olduğum seyyaryazilimci.com soru cevap sitesi de yayında dostlarım haberiniz olsun. Her zaman dediğim gibi sorular ve cevaplar belirli bir süre admin onayından geçerek sistem üzerinde yayınlanmaktadır dostlarım bilginiz olsun. Onu da taşıdım 😀. Hatta taşıma süreci en meşakkatli olan site buydu ama değdi de güzel deneyim kattı bana 😊.
Hayallerinizi gerçekleştirmeniz ve güzel yerlere gelmeniz dileklerimle... İyi çalışmalar dilerim 😊
Yazar Hakkında
Kendi Halinde Bir Backend Developer