VueJs Öğreniyorum : Giriş

Merhaba arkadaşlar, bildiğiniz üzere son zamanlarda JavaScript evreninde neredeyse her sene bir kütüphane popüler hale geliyor. Her kütüphanenin de kendine has özellikleri ve zorlukları mevcut oluyor. Bu kütüphanelerin arasına en son katılan VueJs oldu.

Biraz araştırma yaptıktan sonra Türkçe kaynakların da çoğaldığını görmek memnun edici olsa da bir kaç ders ve örnekler dışında pek fazla Türkçe bilgi bulmak mümkün değil. Fakat, bulduğumuz bilgi ve kaynaklar ile öğrenmesi son derece kolay bir kütüphane olduğunu söylemek mümkün diyebilirim.

AngularJS, React, Backbone.js gibi çeşitli kütüphaneler bana her zaman çok zor gelmiştir. Belki de öğrenmek istemedim bilmiyorum. Ama Vue.js beni heyecanlandıran ve öğrenme isteğimi ateşleyen bir kütüphane oldu.

Kolları sıvayıp bu dili öğrenmeye karar verdim. Fakat aynı zaman da öğrenirken de bloğum da öğrendiklerimi de not alarak benimle aynı düşünce de olan arkadaşlar ile de birlikte yol almak istedim.

Hadi birlikte başlayalım.

VueJs nedir?

Vue.js, web arayüzleri oluşturmak için geliştirilen progressive (kademeli) bir javaScript kütüphanesidir. Arayüz oluşturmak için geliştirildiği için ismi de “view” kelimesinden türeyip “-viuv” diye okunmakta. Peki kademeli kütüphane ne demek? Örneğin AngularJS kullanmak istendiği zaman Router, injection gibi bütün kütüphaneler içerisin de yer almakta ve istediğimizi kullanabilmekteyiz.

Fakat VueJs’de çekirdek kısım sadece view katmanı içeriyor. Yani kullanmak istediğimiz kütüphaneleri biz kendimiz çağırarak rahatlıkla ekleyebiliyor ve kullanabiliyoruz. Bu sayede kullanmadığımız kütüphaneler yüzünden boş yere uygulamamızı şişirmemiş oluyoruz.

SPA (Single Page Application) diye adlandırılan tek sayfa web uygulamalarında VueJs bizim işimizi çok kolaylaştıracaktır.

Vue.js hakkında kısaca bilgi sahibi olduktan sonra gelin birlikte ilk basit örneğimizi yapalım.

See the Pen VueJs Öğreniyorum : Giriş by Ahmet Kaplan (@ahmetkaplan) on CodePen.

İlk olarak kodlarımızı yazmaya başlamadan önce .html dosyamıza aşağıda ki komutu ekleyerek Vue.js kütüphanesini çağıralım. Yoksa kodlarımız çalışmayacaktır. Bu kodu js kodlarımızı yazdığımız satırın hemen bir üst satırına eklememiz daha doğru olacaktır.

Şimdi hazırlamış olduğumuz örneği birlikte inceleyelim. Standart bir HTML yapısı oluşturduk ve hazırladığımız div’e #ilkDers adında bir id verdik. Buraya kadar her şey bildiğimiz gibi. Sadece div içerisinde ki {{ message }} size farklı gelebilir. İşte burada da devreye vue.js giriyor.

Örneğimiz de JS kısmına geçiş yaparsak eğer Vue.js kodlarımızı orada inceleyebiliriz.

var app = new Vue komutu ile kendimize yeni bir instance oluşturduk. Hemen alt satırda bulunan el: ‘#ilkDers’ komutu ile de kendimize yeni bir element oluşturduk ve bu elementin adresini belirledik. Yani id’si ilkDers olan div’i kullanmasını sağladık.

Element içerisine de message isminde bir data ekledik. Message datamızın içerisinde yazmış olduğumuz yazımız HTML’de görmüş olduğumuz {{ message }} ibaresinin yerine geçecektir. Burada siz data içerisinde bulunan message kısmına  elma: ‘…’ yazmış olsaydınız HTML içerisinde {{ elma }} şeklinde çağırmanız gerekecekti.

Evet ilk örneğimizden de anlayacağımız üzere Vue.js diğer diller gibi örneği AngularJs gibi çok karmaşık bir dil değil. Öğrenmek için 3-4 hafta yerine bir kaç güç gibi bir zaman diliminde kolay hakim olunabilecek bir diyebilirim.

Bu şuan bulduğum makaleleri heyecanla okuyorum. Yaptığım denemeleri de burada blog sayfamda devam ettirerek birlikte öğrenmeye devam etmeyi umuyorum. Siz de yorumlarınız ile destek olur ve fikir alışverişin de bulunursanız çok sevinirim.

Herkese iyi kod yazmalar. 🙂

 

Bunlar da hoşuna gidebilir

2 yorum

  1. Etkili bir başlangıç olmuş. Elemanin id sine gore atama islemi cok yerinde boylece kod satırı uzadiginda sadece js yi okuyarak html de Nerede ne yazdigimizi bulabiliriz.

    1. Kesinlikle. Ek bir güzelliği de Chrome için Vue.js Devtools hazırlanmış olması. Çok kullanışlı ve işe yarar olmuş. Bir sonra ki yazımda bundan da söz edeceğim.

Bir Cevap Yazın

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