[ Laravel & Vue.js ] 3.Video: Component Kullanımı -1



2 dakikalık okuma
February 28, 2019

Serinin 3.bölümü olan bu videoda şu konulara değindim:

  • Çoklu sayfalar için “component” çözümü.
  • Vue.js içerisinde component kullanımı. 
  • Component tanımlamanın yöntemleri.

Aslında Vue.js içerisinde en önemli özelliklerden biri “component”tir. Bu konunun önemine binaen detaylarına girmeliydim. Bu yüzden 4. ve 5. bölümler de component ile ilgili olacak.

Componentler sayesinde modüler tasarım çalışmaları yapabileceğiz. Ayrıca tekrar kullanılabilen birleşenler yazarak istediğimiz kadar proje içerisinde farklı yerlerinde kullanabiliriz.

Bir çoklarının SPA(Single Page Application) tarzı uygulamalarda birden fazla sayfa ile çalışma sorularının cevabı da bu component konusunda yatmaktadır.

Buyrun Vue.js’de Componentler - 1 Videosu:


Video Özeti

Vue.js’te Componentler ne işe yarar?

Vue.js daha çok SPA dediğimiz Single Page Application (Tek Sayfa Uygulamalar) için çok kullanışlıdır; ama bu demek değildir ki çok sayfalı uygulamalarda kullanamayız. Bunun için birçok yöntem geliştirilmiştir. İşte çoklu sayfalar yapmak için işimizi kolaylaştıracağımız Vue.js’in elmas değerindeki özelliklerinden biri de “component“lerdir.

Componentler ile:

  • Modüler
  • Tekrar kullanılabilir

birleşenler yazabiliriz. Böylece çoklu sayfa tasarımlarında karmaşıklığa sebebiyet vermeden uygulamamızı inşa edebiliriz.

Component Oluşturmanın Yöntemleri

Burada sadece temel 2 yönteminden bahsedeceğim. Lütfen aşağıdaki resme bakın:

component oluşturma yöntemleri

1.Yöntem:

Vue.component('component-ismi',require('./components/ExampleComponent.vue').default);

Birinci yöntemle yukarıda görülmek üzere ilk parametrede component ismini belirleriz. İkinci parametre ile de component’in yolunu gösteririz. Böylece mevcut oluşturulmuş Vue nesnemize bu Component’i dahil ederek kullanıma hazır hale getiririz. Kullanım içinde web sayfamızda aşağıdaki gibi yazmamız yeterlidir:

<component-ismi></component-ismi>

2.Yöntem:

Vue.component('component-ismi', {
    template:'<h1> Merhaba bu bir component </h1>'
    });

İkinci yöntemle de yukarıda görülmek üzere component’imizi oluşturup isimlendiririz. Bunun için template anahtar kelimesini kullandığıma dikkatinizi çekmek isterim ve birinci yöntemdeki gibi web sayfamızda aynı şekilde kullanırız.


Etiketler: