Vue.js nedir?
Merhaba, bugün size bildiğim kadarıyla,
- Vue.js nedir?
- Neden hayatımızda?
- Projeye sonradan nasıl dahil edilir?
Sorularını cevaplarını kafamda oluşan soru işaretlerini giderirken öğrendiğim kadarıyla sizlerle paylaşmaya çalışacağım.
Vue.js nedir?
Vue.js diğer arkadaşları gibi bir Javascript framework’ü kendi kaynağında anlattığı gibi Approachable, Versatile, Performant, Maintainable, Testable bir framework. (Hiçbir şey anlamadıysanız korkmayın ilk okuduğumda ben de anlamadım.😐)
Gelin aşağıda bunlar ne anlama geliyor bir bakalım.
Peki Vue.js Neden Hayatımızda?
Web siteleri ile geçirdiğimiz son 10 yılda Javascript web sitelerinin dinamik ve çok güçlü yapılar haline gelmesinde büyük bir rol oynadı. Sayfalar büyüdükçe Javascript blokları da haliyle devasa hale gelmeye başladı ve Javascript dosyaları onlarca hatta büyük projelerde yüzlercenin üstüne çıkmaya başladı. Haliyle bunların hepsini aynı anda organize etmek çok zor olmaya başlamıştı.
Yukarıdaki sorunun çözümünü de insanlar Angular, React ve Vue gibi Javascript frameworklerinde buldular. Saydığım frameworklerin hepsinin işlevi aynı gibi gözükse de hepsinin birbirinden farklı iddiaları ve yenilikleri mevcut.
Asıl konumuz olan Vue.js bize 3 farklı anahtar kelime ile geliyor.
Bunlar:
- Approachable
- Versatile
- Performant
Bu 3 anahtar kelime aslında markanın neyi hedeflediğini bize gösteriyor. Vue.js bize HTML, CSS ve Javascript bilen her insanın Vue.js ile hiç zaman harcamadan saniyeler içinde uygulamalar geliştirebileceğini söylüyor.
Her ayrıntısı düşünülmüş, hiçbir detaydan kaçınılmamış ve kolayca sözdizimine alışılabilecek bir ortam sunduğunu iddia ediyor.
Ve son olarak diğer bütün framework arkadaşlarından küçük olduğu iddiasıyla 20KB minified gzip şekilde önümüze çıkıyor.
Çok iddialı değil mi?😎
Son kendini diğer framework arkadaşlarından ayırdığı nokta ise Progressive bir framework olduğunu iddia etmesi.
Peki nedir bu Progressive Framework kavramı?
Kendisi diğer arkadaşlarından ayrıcalıklı olarak kolayca bir projeye dahil edilebiliyor. CLI(Command Line Interface) kullanmadan projeye CDN veya statik şekilde dahil edip Vue.js geliştirmeye hemen başlayabiliyorsunuz.
Vue.js Projeye Nasıl Dahil Edilir?
Diyelim ki X adında bir projeniz var ve bunda sadece bir yeri Vue.js ile kontrol etmek istiyorsunuz.
Hadi bir örnekle bunu inceleyelim:
Yorum satırında anlattığım gibi interaktif olarak kullanmak istediğimiz bloğu herhangi bir HTML etiketiyle sarıyoruz(Semantik olması için tercihen main veya div etiketi). Bu etiketi id attribute ile işaretliyoruz.
Vue.js resmi sitesinden verdiğim URL ile kolayca bulabileceğiniz bu script’i HTML dosyamıza ekliyoruz. Bu script ile gelen Vue.js’den yararlanmak için bir instance çıkarıyoruz.
Bu instance içine bir obje alıyor. Şuan kullandıklarımız:
- el ( İşaretlediğimiz kapsayıcıyı Vue’ye tanıttık. )
- data ( Vue ile değişkenleri data içinde bir obje olarak tutuyoruz. )
Ve çıktımız bu şekilde oluyor:
Gördüğümüz gibi Vue.js içinde bulunan message değişkenini sayfamızda renderlamış olduk.
Sizlere en kısa haliyle Vue.js nedir ve Projeye nasıl dahil edilir konularını bildiğim kadarıyla anlatmaya çalıştım. Okuduğunuz için çok teşekkür ederim.
Kaynakça:
İletişim:
Twitter: https://twitter.com/kaanersoy01
LinkedIN: https://www.linkedin.com/in/kaan-ersoy/
