Neden Vue.js kullanalım ki?
HTML+CSS kullanarak web projeleri hazırlıyoruz. JS ekleyerek daha kullanıcı etkileşimli web sayfaları yapmaya başladık. Sonrasında backend tarafındaki server side kodları browser üzerinden çalıştırabilir miyim ? Bu sorunun cevabı backend tarafında yazmış olduğumuz kodları javascript tarafına taşıyarak çözdük fakat sonrasında her yer .js uzantılı dosyalar barındırmaya başladı. Durum böyle olunca projedeki hatalarda çözüm üretmek ve kodları debuglamak aşırı zaman almaya başladı ve böylece hayatımıza modern javascript frameworkleri girdi. Vue.js moden javascript frameworklerinden sadece bir tanesidir. Diğerler nelerdir diye aklınıza geliyorsa hemen onun da cevabını vereyim.
Vue.js için aşağıdakileri söylemek mümkündür.
- Kullanımı kolay
- Öğrenimi kolay
- Performanslı (React ve Angular'a göre)
- Core framework'ü kullanabilir ya da pluginlerle customize hale getirebiliriz.
- Test senaryoları yazıp testini yapma imkanı sağlar.
Yukarıdaki görsele bakacak olursak eğer web sitemizde kullandığımız bölümler bulunmaktadır. Biz bu yapıyı bir kez kodlarız ve ardından component yardımıyla istediğimiz başka sayfalarda da kolaylıkla daha önceden geliştirmiş olduğumuz component'i direkt çağırıp kullanabiliriz. Bu durum diğer modern .js frameworklerinde de bulunmaktadır. (Angular, React vb.) Component yapısı sayesinde tekrardan kodlama yapmayız.
Component oluştururken içerisinde HTML+CSS+JS yapılarını kullanırız. Component yapılarını minik uygulamalar olarak düşünebiliriz.
İşte modern frameworkler bizlerin bu componentleri birleştirip büyük resme bakmasını sağlamaktadır :)
Online editor kullanarak vue.js tarafında ilk uygulamamızı birlikte geliştirelim. Online editor olarak ben fiddle kullanıyorum Fiddle'a gitmek için tıklayınız . Browser üzerinde yazıp anlık olarak sonuçlarımızı görebileceğiz.
Fiddle tarafına geçtiğimizde aşağıdaki gibi bir arayüz karşımıza çıkacak olup dört farklı bölümden oluşmaktadır.
Vue.js sitesinde yer alan get started bölümüne tıkladığımızda iki farklı halini görebiliriz. Bunlar development ve product. Development modunu kullanırsak bize console tarafında bazı uyarı mesajlarını da gösterebiliyor olacak. Bu yüzden development modunu alıp html sayfamıza ekleyelim.
html bölümüne aşağıdaki kodumuzu ekleyip sayfamızda vue.js kullanacağımızı belirtiyoruz. (development olanı aldım)
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
HTML sayfamıza id'si container olan içerisinde bir p barındıran kodlarımız ekliyorum. P etiketi içerisinde birşey yazmasın.
HTML bölümünün son hali aşağıdaki gibi olsun.
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<div id="container">
<p></p>
</div>
Şimdi vue kodlarımızı yazarak container div'i içerisinde bulunan p etiketine istediğimiz bir bilginin yazdırılması kısmına geçelim.
Bu aşamada new Vue diyerek bir component oluşmasını sağlıyoruz. el tanımlaması element anlamına gelir ve id bilgisi container olan element içerisine geçip oradaki yapının içerisine title bilgisini tanımlamasını istiyoruz.
new Vue({
el:"#container", data:{ yenideger:"Merhaba dünya Vue.js'e hoşgeldim :) " } });
Ve kodumuzu çalıştırıp çıktımıza bakıyoruz. Bu şekilde bırakırsak çalıştığında herhangi bir göremeyeceğiz. Bunun için html tarafına dönüp kodumuzu aşağıdaki haline getirmemiz gerekecektir.
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <div id="container"> <p> {{yenideger}} </p> </div>
JS:
new Vue({
el:"#container",
data:{
yenideger:"Merhaba dünya Vue.js'e hoşgeldim :) "
}
});
Bir sonraki makalemde görüşürüz iyi çalışmalar :)
