Vue.js (1) : Giriş

Vue.js nedir? Vue.js web arayüz geliştirmek için kullanılan kademeli (progressive) bir yapıdır. Kademeli derken neyi kastediyoruz? Bu nokta önemli. Yani Angularjs de olduğu gibi yekpare, hepsi içinde bir yapı kullanılmıyor.  Angular kullanmak istediğinizde, içinde her şeyi bulabiliyoruz. Router, dependency injection, http client ve view tarafı tüm yapının içerisinde hali hazırda gelmiş oluyor.

Vue.js’de ise durum farklı. Çekirdek kısmı, sadece view katmanını içeriyor. Router’a ihtiyacımız olduğunda, vue-router kütüphanesini ekliyoruz. Rest servis çağırmak istediğimizde, bu işi yapacak bir kütüphane ekliyoruz: vue-resource veya superagent gibi. Flux veya redux gibi state durumunu yönetme ihtiyacı duyduğumuzda, vuex kütüphanesini ekliyoruz. Yani ihtiyacımız olanı ekliyoruz. Kullanmadığımız işlevleri ekleyerek, gereksiz yere uygulamamızı şişirmiyoruz.

En basitinden, en karmaşığına tüm projelerde, vue.js’i rahatlıkla kullanabiliriz. Single Page Application dediğimiz tek bir sayfadan oluşan web uygulamalarında da bu yapı bizim ihtiyacımızı rahatlıkla karşılayacaktır.

Bildiğiniz gibi kompleks bir web uygulaması geliştirmek istediğimizde, bileşen bazlı bir yapı kullanmak, uygulamanın tasarımını, bakımını kolaylaştıracaktır. Vue.js bize bileşen bazlı bir yapı sunmaktadır.

Peki angular, react, aurelia gibi farklı frontend frameworkler varken, vue.js’i neden tercih etmeliyiz. Bir numaralı sebebi, kolay öğrenilebilmesi ve kısa sürede adapte olunabilmesi. AngularJs’de ancak 2-3 hafta da ortama alışılırken, vue.js’de bu süre bir kaç güne inmektedir. Yani bu yazıyı bitirdiğinizde, basit uygulamalar yapmaya başlayabilirsiniz.

İkinci bir sebebi de performansının çok iyi olması. Benzer şekilde ReactJs’in kullandığı virtual dom özelliğini kullandığı için, çok hızlı bir şekilde dom’u güncellemektedir.

Yeni çıkan sürümü (2) ile birlikte, server side rendering ve başka pek çok özelliği sunmaktadır. Aşağıdaki giriş seviyesinde örneklerde de 2 nolu versiyon kullanılmıştır.

Kurulum

Birkaç şekilde vue.js kütüphanesini kullanmaya başlayabilirsiniz. Sitesinden js dosyaları lokalinize indirip, sayfanıza ekleyebilirsiniz (script src=”vue.js”). Fakat büyük çaplı bir proje geliştirecekseniz, npm’i kullanmanız en doğrusu. Örneklerde kütüphaneye odaklanabilmek ve kodları basit tutmak adına cdn kullanacağız.

Belirtmek istediğim diğer bir nokta da vue-cli kullanarak, her şeyiyle hazır yeni proje yapısı oluşturabiliriz. vue-cli komut satırı arayüzünü incelemenizi tavsiye ederim.

Basit Kullanım

Aşağıda en basit haliyle kullanımını görebiliriz. app objesini oluşturup, p dom nesnesiyle ilişkendirerek, uygulamaya reaktif bir özellik kazandırmış olduk.

CodePen örneğin çalışması

Reaktif olması ne anlama geliyor. app objesinin Message özelliği değişince, otomatik olarak p nesnesinin içide bu değişikliği yansıtacaktır. Chrome F12 ile geliştirici araçları açılıp, console üzerinde app.message set edilirse, Hello World yazısı değişip, Hello Hasan olarak değişecektir.

beforeconsole

Değişmiş hali:

afterconsole

Koşullu İfadeler

Şimdide koşullu ifadelerin kullanımı ile ilgili bir örneğe bakalım.

CodePen gösterimi

v-if ifadesi ile span nesnesinin gösterilip, gösterilmemesini koşula bağlayabiliriz. Angular’da kullanılan ng-if direktifide bu mantıkla çalışıyor.

Kullanıcı Etkileşimi ve Döngü Kullanımı

Kullanıcı etkileşimi ile ilgili bir örneğe bakalım şimdi: Basit bir todo uygulaması. Buton’a basılınca, v-on:click ifadesi ile todoEkle metodunun çalışacağını belirtmiş oluyoruz.

v-for ifadesi döngü oluşturmamıza yaramaktadır. todolist içerisindeki her todo objesi için html li nesnesini render ediyoruz.

Bileşen Oluşturma

Büyük ve karmaşık uygulamalar geliştirmek durumunda olduğumuzda, bildiğiniz gibi, kendi içinde bir bütünlük oluşturacak şekilde, bileşenler oluşturup kullanmak bize önemli avantajlar kazandıracaktır. Kodun bakımı, testi, hızlı geliştirilebilmesi, bileşen bazlı bir uygulama çatısının getirdiği kazanımlar.

CodePen gösterimi

person-item bileşenini, Vue.component ifadesi ile oluşturuyoruz. Artık person-item bileşenini herhangi bir yerde normal bir html nesnesi (div, p, h1 vs.) gibi kullanabiliriz.

Sonuç

Örneklerden anlaşılacağı üzere, vue kütüphanesi bize çok kolay ve esnek bir yapı sunmaktadır. Bir kaç gün içerisinde, kendi web sayfalarınızda, kodlamaya başlayarak, üretkenliğinizi maksimum bir noktaya taşıyabilirsiniz. Bu konuyla ilgili yazı dizimizin ilkini basit tutmaya çalıştım. Diğer yazılarda, http-client, router ve state yönetimi ile ilgili daha ileri düzey örnekler üzerinde duracağız.

4 düşünce - “Vue.js (1) : Giriş”

  1. başarılı bir çalışma olmuş ellerine sağlık.veritabanı uygulaması crud şeklinide koymanızı ricaederim.

    1. Teşekkür ederim. crud uygulaması örneği üzerinde çalışıyorum. Kısa bir süre içerisinde yayına hazır olacak.

Yorum Gönder

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Scroll to Top