Giriş

Vue.js nedir?

Vue (/viyuv/ şeklinde telaffuz edilir, İngilizcedeki view kelimesi gibi) kullanıcı arayüzleri oluşturmayı sağlayan kademeli bir uygulama çerçevesidir (framework). Yazılım geliştirme ortamının her alanına nüfus eden diğer uygulama çerçevelerinin aksine Vue, basit bir temel üzerine inşa edildiğinden kademeli olarak kullanılabilir. Ana kütüphane yalnızca görüntüleme katmanına odaklanmaktadır. Öğrenmesi kolay olup diğer kütüphanelere ve mevcut projelere entegre edilebilir. Diğer taraftan, Vue modern dosya yönetimi ve destekleyici kütüphaneler eşliğinde sofistike Tek Sayfa Uygulamalar yaratmak için tamamen uygundur.

Eğer Vue öğrenmeye başlamadan önce daha fazla bilgi edinmek isterseniz, bu teknolojinin temel prensiplerinin dile getirildiği ve örnek bir projenin sunulduğu bir video hazırladık.

Eğer kullanıcı arayüzü programcılığı alanında deneyimli iseniz ve Vue’nin diğer kütüphaneler/uygulama çerçevelerine göre bir karşılaştırmasını görmek istiyorsanız Diğer Uygulama Çerçeveleri ile Karşılaştırma sayfasına bakınız.

İlk Adımlar

Kurulum

Sitemiz üzerinde sunulan kılavuz HTML, CSS ve JavaScript alanlarında orta seviye bilgiye sahip olduğunuzu varsaymaktadır. Eğer kullanıcı arayüzü programcılığına yeni giriş yapıyorsanız ilk adım olarak bir uygulama çerçevesi öğrenmeye çalışmak doğru olmayabilir. Öncelikle o alanlardaki temel bilgileri öğrenin. Ardından bu kılavuza geri dönebilirsiniz! Diğer uygulama çerçeveleri alanında deneyim işinize yarayacaktır ancak zorunlu değildir.

Vue.js’i denemenin en kolay yolu JSFiddle Hello World örneği.’ne bakmaktır. Bu sayfayı başka bir sekmede açarsanız değineceğimiz birtakım basit örneklere daha yakından göz atabilirsiniz. Veya bir index.html sayfası oluşturduktan sonra Vue’yi aşağıdaki bağlantı ile projeye dâhil edebilirsiniz:

<!-- geliştirme versiyonu, yardımcı konsol uyarıları içerir -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

veya:

<!-- son kullanıcı versiyonu, boyut ve hız açısından optimize edilmiştir -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

Kurulum sayfası Vue’nin kurulumuna dair ilave seçenekleri açıklar. Not: Özellikle Node.js bazlı proje kurma araçlarına henüz alışkın değilseniz başlangıç seviyesinde vue-cli kullanmanızı tavsiye etmiyoruz.

Eğer daha etkileşimli bir ortamı tercih ederseniz, bir taraftan ekran paylaşımlı ders diğer taraftan dilediğiniz anda durdurup kodu değiştirebileceğiniz bir deney ortamı sunan şu Scrimba ders serisine göz atabilirsiniz.

Beyansal Görüntüleme

Verileri basit bir şablon sentaksı kullanarak DOM’a beyansal olarak yansıtmayı sağlayan bir sistem Vue.js’nin kalbinde yatmaktadır:

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Merhaba Vue!'
  }
})

Bu şekilde ilk Vue uygulamamızı yaratmış olduk! Bu teknik, bir dizgi şablonunun ekrana yansıtılmasına oldukça benzemektedir fakat Vue arka planda birçok şey gerçekleştirmektedir. Şu anda veriler ve DOM arasında bir bağlantı kurulmuş ve her şey reaktif bir hale gelmiş durumda. Kendi gözlerinizle görmeye ne dersiniz? Tarayıcınızın JavaScript konsolunu açın (doğrudan bu sayfaya ait konsol) ve app.message değişkenine farklı bir değer verin. Yukarıda ekrana yansıtılmış olan örneğin girdiğiniz değere göre değiştiğini göreceksiniz.

Metin değerlerinin takibine ek olarak aşağıda görebileceğiniz şekilde HTML öğesi niteliklerini de değişkenlere bağlayabilirsiniz:

<div id="app-2">
  <span v-bind:title="message">
    Fare imlecini üzerimde birkaç saniye bekleterek dinamik
    bir şekilde bağlanmış "title" niteliğini görebilirsin!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: Bu sayfayı şu zamanda yüklediniz: ' + new Date().toLocaleString()
  }
})

Burada yeni bir şeye tanıklık ediyoruz. Bu kod parçasında kullanılan v-bind niteliğine direktif denilir. Direktifler, Vue çerçevesinde özel bir nitelik olduğunu belirten v- ifadesi ile başlar ve sizin de tahmin edebileceğiniz gibi ekrana yansıtılan DOM mimarisi üzerinde özel bir reaktivite tesis eder. Yukarıda görmekte olduğunuz kullanım “söz konusu HTML elementinin title niteliğini Vue örneğindeki (Vue instance) message özelliği ile birebir aynı tut” anlamına geliyor.

Eğer yine JavaScript konsolunu açarsanız ve app2.message = 'dilediğiniz yeni bir mesaj' komutunu girerseniz bağlanmış olan HTML elementinin - bu durumda title niteliğinin - güncelleneceğini göreceksiniz.

Koşullar ve Döngüler

Bir elementin görünürlüğünü değiştirmek de son derece kolay:

<div id="app-3">
  <span v-if="seen">Şu an beni görüyorsun</span>
</div>

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})

Şimdi konsolu açın ve app3.seen = false komutunu girin. Mesajın kaybolacağını göreceksiniz.

Bu örnek yalnızca metin ve niteliklerin değil, aynı zamanda bütün DOM yapısının değişkenlere bağlanabileceğini göstermektedir. Vue aynı zamanda HTML elementlerinin Vue tarafından eklenmesi/güncellenmesi/kaldırılması sırasında otomatik olarak geçiş efektlerinin uygulanmasını sağlayan güçlü bir geçiş sistemi temin etmektedir.

Her biri farklı bir işleve bir dizi direktif mevcuttur. Örneğin, v-for direktifi bir Veri Dizisi içerisindeki verileri kullanarak ekranda bir liste görüntülemek için kullanılabilir:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'JavaScript Öğren' },
      { text: 'Vue Öğren' },
      { text: 'Harika bir proje gerçekleştir' }
    ]
  }
})

Konsolu açıp app4.todos.push({ text: 'Yeni liste elemanı' }) yazın. Yeni liste elemanının listeye eklendiğini göreceksiniz.

Kullanıcı Girdilerini Yönetmek

Kullanıcıların uygulamanız ile etkileşim gerçekleştirmesini sağlamak için Vue örneklerimize ait yöntemleri çağıran olay dinleyicilerini entegre etmek için v-on direktifini kullanabiliriz:

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Mesajı Tersine Çevir</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Merhaba Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

Dikkat ederseniz yukarıdaki bu yöntem sayesinde DOM’a dokunma ihtiyacı duymadan uygulamamızın durumunu güncelleyebildik; DOM ile gerçekleştirilmesi gereken tüm etkileşimler Vue tarafından yönetiliyor ve sizin yazdığınız kod da uygulamanızın altında yatan mantığa odaklanıyor.

Vue aynı zamanda form girdileri ile uygulamanızın durumu arasında iki yönlü etkileşimi çocuk oyuncağı haline getiren v-model direktifini de size sunuyor:

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Merhaba Vue!'
  }
})

Bileşenler ile Proje İnşası

Bileşen sistemi Vue içerisinde önem taşıyan bir diğer konsepttir. Bu soyutlama yaklaşımı küçük, kendine yeten ve çoğu zaman yeniden kullanılabilen bileşenleri bir araya getirerek büyük çaplı uygulamalar inşa etmeyi sağlar. Düşünecek olursak her türden uygulama bir bileşenler ağacı olarak soyutlanabilir:

Vue çerçevesinde bir bileşen, önceden belirlenmiş seçeneklere sahip bir Vue örneğidir. Vue içerisinde bir bileşen oluşturmak son derece basit:

// todo-item isimli yeni bir bileşen belirlemek
Vue.component('todo-item', {
  template: ‘<li>Yapılacaklar listesi elemanı</li>'
})

Bunun ardından bir başka bileşenin şablon metni içerisinde bu bileşeni dahil edebilirsiniz:

<ol>
  <!-- todo-item bileşeninin bir örneğini oluşturmak -->
  <todo-item></todo-item>
</ol>

Fakat bu örnek her kullanımda aynı metni ekrana yansıtacağından çok yararlı olmayacaktır. Bizim amacımız bir üst kademeden bu bileşene veri aktarabilmektir. Bileşen beyanını biraz değiştirerek bir prop kabul etmesini sağlayalım:

Vue.component('todo-item', {
  // todo-item bileşeni şu anda bizim belirlediğimiz bir HTML 
  // niteliği olarak hareket edecek olan bir "prop" kabul ediyor.
  // Bu prop'a todo adını verdik.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

Şimdi v-bind direktifini kullanarak tekrar eden her bileşen içerisinde todo niteliğini tayin edebiliriz:

<div id="app-7">
  <ol>
    <!--
      Aşağıda her todo-item'a temsil etmekte olduğu todo nesnesini     
      aktarıyoruz. Böylece todo-item dinamik bir hale geliyor.
      Aynı zamanda her bileşene bir "key" (anahtar) veriyoruz.
      Bu işlemin amacını daha sonra açıklayacağız.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    ></todo-item>
  </ol>
</div>

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Sebze' },
      { id: 1, text: 'Peynir' },
      { id: 2, text: 'İnsanların yiyebileceği diğer herhangi bir şey' }
    ]
  }
})

Bu çok gerçekçi bir örnek olmasa da uygulamamızı iki parçaya ayırabildik ve alt konumdaki bileşen üst kademeden prop arayüzü sayesinde yeterli ölçüde ayrılmış durumda. Bu sayede üst kademedeki uygulamayı etkilemeden <todo-item> bileşenimizi daha kompleks bir şablon ve mantık ile geliştirebiliriz.

Büyük çaplı bir uygulamada geliştirme sürecini daha kolay yönetebilmek amacıyla bütün uygulamayı farklı bileşenlere bölmek önem taşır. Kılavuzun ilerleyen kısımlarında bileşenlere daha yakından göz atacağız fakat bir uygulama şablonunun bileşenler aracılığı ile nasıl inşa edilebileceğine dair (teorik) bir örneği aşağıda bulabilirsiniz:

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

Özel HTML Elementlerine Benzerlik

Vue bileşenlerinin, Web Bileşenleri Standartlarının bir parçası olan Özel HTML Elementlerine son derece benzer olduğunu fark etmiş olabilirsiniz. Bunun sebebi Vue’nin bileşen sentaksının kabaca söz konusu standart baz alınarak modellenmiş olmasıdır. Örneğin Vue bileşenleri Slot API‘yi ve is özel niteliğini desteklemektedir. Fakat birtakım kilit farklılıklar da mevcuttur:

1. Web Bileşenleri Standartları tamamlanmış olsa da her tarayıcıda otomatik olarak desteklenmemektedir. Web bileşenlerini otomatik olarak destekleyen tarayıcılar Safari 10.1 ve üstü, Chrome 54 ve üstü, Firefox 63 ve üstüdür. Buna karşılık, Vue bileşenleri polyfill uygulanmasını gerektirmez ve bütün tarayıcılarda desteklenmektedir (IE9 ve üstü). Gerek olduğunda Vue bileşenleri özel HTML elementi içerisine yerleştirilebilir.

2. Vue bileşenleri sıradan özel elementlerde yer almayan birçok önemli özelliğe sahiptir. Bunların başında ise bileşenlerarası veri akışı, kendi olay iletişimini tasarlama imkanı ve proje kurma araçlarının entegrasyonu geliyor.

Vue, özel HTML elementlerini kendi içerisinde kullanmasa da, özel HTML elementi olarak tüketim ve dağıtım gerçekleştirme açısından güçlü bir çapraz kullanım kapasitesine sahiptir. Aynı zamanda Vue CLI, gerçek bir özel HTML elementi olarak tanımlanan Vue bileşenlerinin tasarlanmasına müsaade etmektedir.

Daha fazlası için hazır mısınız?

Bu yazı içerisinde ana Vue.js kütüphanesinin en temel özelliklerine değindik. Bu kılavuzun geri kalan kısımlarında bu konseptler ve diğer ileri düzey özellikler çok daha detaylı bir şekilde ele alınacak. Bu kılavuzun tamamını okumanızı tavsiye ederiz!