2-Giriş

2 VueJs'in dokümantasyonundan kendi ihtiyacıma göre yaptığım çevirileri paylaşacağım. 
 Bu ikinci yayınım vuejs'e giriş niteliğinde olacak.

---

VueJs Nedir?

Vue (view gibi okunuyor), kullanıcı arayüzü oluştururken kullanılan bir progressive framework'tür. (?) Diğer tek parça framework'lerin aksine Vue, aşamalı olarak benimseyebileceğiniz bir yapıda sıfırdan tasarlanmıştır. Çekirdek kütüphane sadece view katmanına odaklanır ve mevcut projelerinize dahil edilmesi kolaydır. Öte yandan, modern araçlarıyla ve destek kütüphaneleriyle birlikte kullanıldığında karmaşık tek sayfa uygulamalarınıza müthiş güç kazandırır.

Diğer framework'lerle karşılaştırmasını görmek isterseniz buraya tıklayabilirsiniz.

Başlarken

Orta seviye HTML, CSS ve JavaScript biliyor olmalısınız. Eğer bu konularda yeniyseniz önce bu konuları geliştirip Vue'ye öyle geçmeniz daha iyi olacaktır. 

Eğer react, angular gibi diğer framework'lerde tecrübeniz varsa size yardımcı olacaktır ama yoksa bile çok önemli değil...

Vue.js'i hemen denemenin en iyi yolu olarak JSFiddle Hello World örneğini inceleyin. Bu örneği yan bir sekmede açık tutup burada örnekler anlatılırken orada denemekten çekinmeyin. Yok ben kendi dosyamda çalışmak isterim derseniz de bir index.html sayfası oluşturup kütüphaneyi sayfanıza çağırın:

<!-- geliştirici versiyonu, vuejs'in console'da yardımcı uyarı mesajları veren hali -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

veya

<!-- üretim versiyonu, vuejs'in hız ve boyut için optimize edilmiş hali -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

Merhaba Dünya Örneği

HTML

<div id="app">

    {{ mesaj }}

</div>

JS

var app = new Vue({

    el: '#app',

    data: {

        mesaj: 'Merbaha Vue!'

    }

});

Şimdi çıktısını gösteremiyorum ama siz üstte yazdığım gibi JSFiddle Hello World örneği üzerinde deneyebilirsiniz. Daha önce JSFiddle kullanmamış olanlar için yazıyorum: Değişikliklerinizi yaptıktan sonra sol üstteki Run butonuna tıklayın veya CTRL+ENTER yapın. Göreceğiniz gibi ekranda Merhaba Vue! yazıyor.

Böylece ilk uygulamamızı yaptık bile! Basit bir string tema oluşturmuş gibi görünüyor olabiliriz ama aslında Vue arkada daha çok iş yaptı. Artık DOM ve JS birbirine direkt bağlı. Yani #app div'inin içindeki yazı ile data objesinin içindeki mesaj değişkeni birbirine direkt bağlı. mesaj değişkeninin değeri değiştiği anda #app div'inin içeriği de otomatik değişecektir. Nasıl bileceğiz? Bu uygulamayı yazıp açtığınız tarayıcıda console'u açın ve app.mesaj='yeni değer' yazıp ENTER'a basın. div içeriğinin değiştiğini göreceksiniz.

Sadece elementlerin içeriklerine değil, attribute'lere de dinamik değer verebilirsiniz. Mesela aşağıda span elementinin title attribute'üne dinamik değer gönderiyoruz:

HTML

<div id="app-2">
    <span v-bind:title="message">
        Fare imlecini bir süre bu yazının üstünde tutup title attribute'ünü görün.
    </span>
</div>

JS

var app2 = new Vue({
    el: '#app-2',
    data: {
        message: 'Sayfanız ' + new Date().toLocaleString() + ' anında yüklendi.'
    }
});

Çıktıyı yine burada gösteremiyorum. JSFiddle'da deneyip sonucu görebilirsiniz.
Burada yeni bir şeyle karşılaşıyoruz: v-bind. Bu arkadaş Vue'ye, belirttiği attribute'ün değerinin dinamik olabileceğini bildirir. v- ön eki, vue tarafından sağlanan bir değer olacağını belirtmek için eklenmiş. v-bind:title dediğimizde Vue'ye "buradaki değeri güncel tut" demiş oluyoruz. Böylece bu #app-2 div'i DOM'a yerleştirilirken bu alan vue'nin kontrolüne verilmiş oluyor.
Önceki örnekte olduğu gibi yine console'u kullanarak değeri güncellemeniz mümkün:

CONSOLE

app2.message = 'yeni bir mesaj'

Karşılaştırmalar ve Döngüler

if koşulu koyarak kolayca bir elementi toggle edebilirsiniz.

HTML

<div id="app-3">

    <span v-if="gorunurluk">Şimdi beni görüyorsun!</span>

</div>

JS

var app3=new Vue({

    el: 'app-3',

    data: { gorunurluk: true }

});

Console'da şunu yazıp enter'a basarsanız ve span'ın DOM'dan kalktığını görebilirsiniz:

CONSOLE

app3.seen = false

Bu örnekte görebildiğiniz gibi vue ile yalnızca element içeriklerinde veya attribute değerlerinde değil, DOM'un yapısında da değişiklik yapabiliyoruz. Hatta vue'de, vue'ye bağlı elementler eklendiğinde/güncellendiğinde/silindiğinde güçlü geçiş efektleri sistemi de vardır.
Aslında sırası değil ama şu örneği de vermiş olalım. (Karışık gelirse umursamayın. İleriki bir konu):

HTML

<div id="demo">
    <button v-on:click="show = !show">Toggle</button>
    <transition name="fadeEfekti">
        <p v-if="gorunurluk">Selam!</p>
    </transition>
</div>

JS

new Vue({
    el: '#demo',
    data: {
        gorunurluk: true
    }
})

CSS

.fadeEfekti-enter-active, .fadeEfekti-leave-active {
    transition: opacity .5s;
}
.fadeEfekti-enter, .fadeEfekti-leave-to {
    opacity: 0;
}

Burada bir butona v-on:click diyerek tıklandığında bir işlem yapılmasını istiyoruz: gorunurluk değerini true ise false, false ise true yap! (Bu v-on:click konusu ileride işlenecek.)
Normalde HTML tag'larında olmamasına rağmen vue ile oluşturulmuş bir bileşen (component) olan <transition> ile, bu alanda bir css efekti işlemi yapacağımızı bildiriyoruz. (Component oluşturmak da ileriki bir konu.) Bu component'in name'i, CSS'le ulaşmamız için önemli.
<p> tag'ında, önceki örnekte yaptığımız gibi bir if koşulu ekliyoruz. Eğer gorunurluk değeri true ise bu element DOM'da bulunsun, değilse bulunmasın, demiş oluyoruz.
JS tarafında #demo elementini vue'ye bağlıyoruz ve gorunurluk adında bir data kullanacağımızı söylüyoruz.
CSS tarafı zaten anlaşılmıştır. <transition> elementinin name attribute değerini ön ek olarak kullanıyoruz ve hangi durumlarda ne yapılacağını söylüyoruz. Buradaki değerler, transition elementi içindeki bir DOM elemanındaki eklenme/silinme halinde elementin class'ında vue tarafından oluşturulurlar/kaldırılırlar.
Element oluştuğunda .fadeEfekti-enter başlangıç değeri olarak alınır ve .fadeEfekti-enter-active ile belirtilen duruma geçiş sağlanır. (Örneğimizde, transition:opaicty .5s geçişi ile opacity değeri 0'dan 1'e taşınır.)
Element kaldırılırken de .fadeEfekti-leave-to bitiş değeri olarak alınır ve .fadeEfekti-leave-active ile belirtilen durumdan bitiş değerine geçiş sağlanır. (Örneğimizde opacity değeri 1'den transition:opacity .5s ile 0'a taşınır.

Dediğim gibi bu ileriki bir konu olduğundan fazla takılmayın. Ben geçiş efektleri olayının nasıl mümkün olduğunu göstermek için ileriki bir konudan buraya ekleme yapmak istedim. Şimdi konumuza dönelim...

For örneğine değinelim. v-for direktifi yardımı ile data içindeki bir dizinin elemanlarına tek tek erişmemiz mümkün. Şöyle ki:

HTML

<div id="app-4">
    <div v-for="yapilacak in yapilacaklar">
        {{ yapilacak.baslik }} : {{ yapilacak.aciklama }}
    </div>
</div>

JS

var app4 = new Vue({
    el: '#app-4',
    data: {
        yapilacaklar: [
            { baslik: 'Kalk', aciklama: 'Kalkış saati 07.00' },
            { baslik: 'Yemek', aciklama: 'Yemek saati 07.30' },
            { baslik: 'Temizlik', aciklama: 'Temizlik saati 08.00' }
        ]
    }
});

Bu örnek foreach döngüsü gibi oldu. v-for direktifinin belirttiği işlem şu: yapilacaklar dizisinin her bir elemanını sırayla dolaş ve buna yapilacak değişkeni ile erişmemi sağla.
v-for direktifini alan div, kendini yapilacaklar dizisinin eleman sayısı kadar (3) tekrarlayacak ve alt alta div'ler oluşmuş olacak. İçerikleri de belirtildiği gibi başlık: açıklama şeklinde olacak. Anlık değişimi test etmek için yine console'u kullanabilirsiniz:

CONSOLE

app4.yapilacaklar.push({ baslik:'Spor', aciklama:'Spor saati 09.00' });

Kullanıcı Etkileşimi

v-on:click mevzuları... devam edecek...

---

Önceki Yayın: 1-Kurulum
Sonraki Yayın: 3-Vue Oluşturmak (Eklenecek...)