| title | type | order |
|---|---|---|
Giriş |
guide |
2 |
Vue (/viyuv/ şeklinde telaffuz edilir, İngilizcedeki view kelimesi gibi) kullanıcı arayüzleri oluşturmayı sağlayan kademeli bir framework'tür. Yazılım geliştirme ortamının her alanına nüfus eden diğer framework'lerin aksine Vue, basit bir temel üzerinde inşa edildiğinden kademeli olarak kademeli olarak kullanmaya başlayabilirsiniz. Ana kütüphane yalnızca görüntüleme katmanına odaklanmaktadır. Öğrenmesi kolay olup diğer kütüphanelere veya ileri aşamalardaki 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 son derece elverişlidir.
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/framework'lere göre bir karşılaştırmasını görmek istiyorsanız Diğer Framework'ler ile Karşılaştırma sayfasına bakınız.
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 framework öğrenmeye çalışmak doğru olmayabilir. Öncelikle bu alandaki temel bilgileri öğrenin. Ardından bu kılavuza geri dönebilirsiniz! Diğer framework'ler alanında deneyime sahip olmak 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 sekme 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>or:
<!-- 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'yi projeye dâhil etmeye yönelik 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 dersi serisine göz atabilirsiniz.
Verileri basit bir şablon sentaksı kullarak 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!'
}
}){% raw %}
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 konsolounu 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 bekleterek dinamik
bir şekilde bağlanmış "title" niteliğini görebilirsiniz!
</span>
</div>var app2 = new Vue({
el: '#app-2',
data: {
message: 'Bu sayfayı şu zamanda yüklediniz: ' + new Date().toLocaleString()
}
}){% raw %}
Burada yeni bir şeye tanıklık ediyoruz. Bu kod parçasında kullanılan v-bind niteliğine direktif denilir. Direktifler, Vue tarafından temin edilen özel niteliklere sahip olduklarını 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.
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
}
}){% raw %}
Ş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 sahip birkaç adet farklı direktif daha mevcuttur. Örneğin, v-for direktifi bir Veri Dizisi içerisindeki veri dizinlerini 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' }
]
}
}){% raw %}
- {{ todo.text }}
Konsolu açıp app4.todos.push({ text: 'Yeni liste elemanı' }) yazın. Yeni liste elemanının listeye eklendiğini göreceksiniz.
Kullanıcıların uygulamanız ile etkileşim gerçekleştirmesini sağlamak için Vue örneklerimize ait yöntemleri çağıran eylem 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('')
}
}
}){% raw %}
{{ message }}
Mesajı Tersine ÇevirDikkat 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!'
}
}){% raw %}
{{ message }}
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. Dikkat ederseniz 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şenin 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. Bir üst kademeden bu bileşene veri aktarmak daha ilgi çekici olacaktır. 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 öğesi
// 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' }
]
}
}){% raw %}
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. We will talk a lot more about components 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>Vue bileşenlerinin, Web Bileşenleri Standartlarının bir parçası olan Özel HTML Elementlerine son derece benzer olduğunu farketmiş 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:
-
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çerisinde yerleştirilebilir.
-
Vue bileşenleri sırada özel elementlerde yer almayan birçok önemli özellikliğe sahiptir. Bunların başında ise bileşenlerarası veri akışı, özel etkileşim iletişimi ve yazılım ortamı entegrasyonu geliyor.
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!
Videoyu hazırlayan: Vue Mastery. Vue Mastery’nin ücretsiz Vue'ye Giriş dersini izleyin.