Kişisel web tasarım ve kodlama blogu. Web tasarımı ve kodlama araçları ile ilgili bilgiler ve yardımcı dökümanlar.

Kod yazmak sanattır...

gokhankr.com

Blogger tarafından desteklenmektedir.

Vue.js Bileşenler


Vue.js Bileşenler

Bu yazımda Vue Bileşenleri 'ni anlatacağım. Bileşenler sayfa içerisinde kullandığımız hazır şablonlardır. Bileşenler tıpkı bir Vue uygulaması gibi çalışır ancak amaçları farklıdır.
Klasik bir bileşen yapısı aşağıdaki gibidir.
Aslında düşündüğümüz zaman bir web sayfasında her alan bir bileşendir. Mesela sayfanın header kısmı yani <header> etiketi içerisindekiler ile beraber bir bileşendir.

Bileşenleri oluşturur ve tekrar tekrar sayfada kullanırız. Örneğin bir e-ticaret sitesini düşünün her zaman ürünlerin listelendiği bir sayfası ve bu ürünleri sayfa içerisinde bir kart içerisinde göstermek zorunda. Ancak bu kartları hem anasayfada hem de herhangi bir ürün sayfasının alt kısmında diğer ürünler olarak göstermek zorunda. Bunun için her sayfaya bu bileşeni kopyala yapıştır yapmak mı daha doğru yoksa tek bir bileşen haline getirip istediği yere sadece <urun-karti> şeklinde listelemesi mi ?

Tab ki bileşen sistemi öte yandan bu bileşeni tekrar tekrar düzenlediğinde tüm sayfadaki ürün kartları da eşzamanlı olarak bu değişimle birlikte görüntülenecek. Böyle de bir avantajı var.

Bir bileşen aşağıdaki gibi oluşturulur:

Vue JS
Vue.component('urun-karti',
template: '<li>Yepyeni mobilyalar</li>' 
})

<ol>
<!-- Burada urun-karti çağırılacak ve <li> elementi dönecek -->
 <urun-karti></urun-karti>
</ol>


Bu kullanım sade ve sadece tek bir "Yepyeni mobilyalar" çıktısını üretmekten öteye geçemez. İşimizi daha da profesyonelleştirelim.

Burada prob özelliğini kullanacağız ve bir Vue uygulaması içerisindeki bir data 'yı önce bileşen etiketi içerisinde v-bind:xxx şeklinde bağlayacağız ve bunu probs['xxx'] şeklinde bileşen içerisine alacağız.
Tam olarak anlamadıysanız örneği inceleyin.

Vue JS Bileşeni
// Bileşeni oluşturduk
Vue.component('urun-karti', 
// probs ile etiket üzerindeki "veri" attribute 'unu aldık.
props: ['veri'], 
template: '<li>{{ veri.urunIsmi }}</li>' 
})

HTML
<!-- Listelenecek etiketimizi oluşturduk -->
<div id="urunleri-listele">
<ol> 
<!-- Burada önce v-for ile verileri urun 'e attık sonra da v-bind ile "veri" attribute 'una bağladık -->
 <urun-karti v-for="urun in urunler" v-bind:veri="urun"></urun-karti>
</ol>
</div>

Vue JS
//Uygulamamızı oluşturduk ve ürünler adında dizimizi oluşturduk
var uygulama = new Vue({
el: '#urunleri-listele', 
data: { 
urunler: [ 
{ id: 0, urunIsmi : 'Dolap' }, 
{ id: 1, urunIsmi : 'Sandalye' }, 
{ id: 2, urunIsmi : 'Yeni masa gıcır gıcır' } 
})

Bu örneğin çıktısını aşağıdan inceleyebilirsiniz
probs içerisinde farklı attribute 'lar da çağırıp bileşen içerisinde kullanabilirsiniz. Örneğin probs['id','value','class'] şeklinde kullanabilirsiniz.

Bileşenler yazım bu kadar, bundan sonra Lifecycle Hooks(Yaşamdöngüsü Kancaları) 'u anlatacağım. Görüşmek üzere...

0 yorum:

Yorum Gönder