Vue.js – 1. Bölüm (Giriş ve Hello Vue)

 

Merhaba dostlar, bugün sizlerle bir başka JavaScript framework‘ü olan Vue.js üzerine konuşacağız. Vue.js, son yılların en çok dikkatimi çeken framework‘ü oldu, bunun sebebi ise React ve Angular‘ın en beğenilen özelliklerini birleştirmesiydi. Bununla beraber öğrenmesi en kolay framework olduğunu da söylemem yanlış olmayacaktır. Bir kaç güzel özelliğiyle konuşmaya devam edelim dostlar.

Vue.js‘e dalış yapmaya hazırsanız, bir index.html dosyası oluşturalım ve Vue‘u hemen dahil edelim yapacağımız ufak projeye.

 

Bu; geliştirme versiyonunda çalışmak isterseniz dahil etmeniz gereken kütüphane, bu kütüphaneyi eklerseniz console’da oldukça faydalı uyarıları görebilirsiniz:



 

Bu ise üretim versiyonu:



 

İki versiyon arasındaki en önemli fark ise, üretim versiyonun daha hızlı olması ama geliştirici versiyonun ise öğrenirken daha fazla yardımcı olmasıdır. Biz örneklerimizde geliştirici versiyonunu kullanacağız ki alabildiğimiz her yardımı alalım. Siz son ürün ortaya çıkarmaya hazır olduğunuzda kesinlikle üretim versiyonunu kullanınız.

 

Vue.js‘in çekirdeğinin sahip olduğu özellik ile doğrudan DOM’a (Document Object Model) bildirimde bulunabiliyoruz. Bu özelliği örnek ile anlatalım.

Şimdi index.html dosyamızın yanına bir de index.js dosyası oluşturalım ve index.html’imizin içine ekleyelim. Ben index.js dosyamı js adlı bir klasör içine yerleştirdim.

 



 

index.html:







Vue.js Beginning








{{ message }}

 

index.js:

var app = new Vue({ 
    el: '#app',
    data: {
        message: 'Hello Vue-World!'
    }
});

 

index.html‘imizin body’sinin içine id=”app” olan bir div oluşturduk, buraya kadar her şey normal div’imizin içeriği ise biraz daha farklı çünkü çift kırlangıç ile javascript dosyamızda tanımladığımız data elemanlarını aldığımızı gösteriyoruz. index.js dosyamızda ise html dosyamızdaki id’lere göre içeriklerini data içinde tanımlıyoruz.

Yaptığımız şey basit görünse de DOM ile data‘yı birbiriyle konuşur, bağlantılı hale getirdi bizim için Vue. Bu projemizin reaktif yani tepkisel olmasını sağladı. Bunu şu şekilde görebiliriz; projemizi çalıştırdığımız tarayıcıda f12’ye basarak javascript console’unu açalım ve console ile app.message değerini değiştirelim. Sayfada direk olarak yeni değerin oluştuğunu göreceksiniz.

 

Evet dostlar benim yeni üzerine çalıştığım bu güzel framework, Vue.js‘e ufak bir giriş yapmış olduk, umarım benimle beraber öğrenmeye başlamışsınızdır. Yaptığım ve yapacağım vue.js örneklerine bu github linkinden ulaşabilirsiniz. Kendinize dikkat edin.

ahmet

Ahmet Kılınç - Software Developer

Bunlar da hoşunuza gidebilir...

1 Cevap

  1. Ertan Layrik dedi ki:

    Ahmet Kılınç bey merhaba,

    Sitenizi yeni keşfettim. Henüz çok acemiyim. DOM’a bildirimde bulunurken sorun yaşıyorum. Ekranıma hemen açılıp ardından doğrudan kapanan bir hata mesajı gelmekte. Sanırım bu sebepten ötürü de düzgün çalıştırmayı başaramadım. Acaba nerede hata yapıyorum?

    Teşekkürler

Bir cevap yazın

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.