[ Laravel & Vue.js ] 4.Video: Component Kullanımı -2



2 dakikalık okuma
March 1, 2019

Serinin 4.bölümü olan bu videoda component konusunu anlatmaya devam ediyorum.

Bu videoda;

  • Laravel içerisinde hazır gelen otomatik Vue.js component’i tanımlama özelliğinin aktif hale geçirilmesi.
  • Component tanımlamada camelCase kebap-case ayrıntısı.

konuları anlatılmakta.

Buyrun video burada:


Video Özeti

PHP dilinde geliştirilen Laravel Framework‘ü bildiğiniz üzere Vue.JS‘e resmi olarak destek vermektedir. Hal böyle olunca Laravel camiasında birçok programcı da Progressive Web Framework’ü için Angular ve React arasından Vue.js’i seçerek yoluna onunla devam etmektedir.

Bunu şu yüzden söylüyorum; Laravel’i kurduğunuzda içerisinde aslında Vue.js’te hazır olarak gelmekte. Tek yapılması gereken birkaç küçük ayardır.

Laravel içerisinde otomatik component tanımlama sisteminin aktif hale geçirilmesi

Tek yapmanız gereken resources > js > app.js dosyasını açmanız ve işerisinde aşağıda bulunan satırı aktif yapmanızdır.

component tanımlama

Yukarıdaki kod kısmını aktif yaptıktan sonra o kısım, resources > js içerisinde bulunan “vue” uzantılı dosyaları otomatik olarak uygulama boyunca oluşturacağınız Vue nesnesine iliştirecektir (register) yapacaktır.

İsimlendirme içinse dosya adını component adı olarak atayacaktır. Bir önceki videoda anlatıldığı üzere Vue.js camel case isimlendirmeleri otomatik olarak kebap case’e çevirdiği için kullanımı kebap case şeklinde olacaktır. Mesela

selamDeneme adında olan component’i siz kullanırken element olarak şöyle yazacaksınız:

<selam-deneme></selam-deneme>

Aşağıdaki resimdeki örnek gibi:

kebap case

Not:

  • buBirDeneme -> Camel Case kullanımına örnek
  • bu-bir-deneme -> Kebap Case kullanımına örnek

Etiketler: