xtemplate

etiketlenmiş gönderiler

Vue.js Bileşenlerini Sayfa İçinde Doğrudan Kullanmak

30 Temmuz 2018 Pazartesi günü JavaScript başlığında

Vue.js Bileşenlerini Sayfa İçinde Doğrudan Kullanmak

Vue.js bileşenlerini webpack/nodejs aracını kullanmadan sayfa içinde oluşturmak için birkaç yöntem hali hazırda mevcut. Ben kullandığım esnek bir yöntemi paylaşacağım.

Evvela bir Vue bileşeni oluşturalım.

Vue.component('hello', {
  template: '#hello',
  props: ['message'],
})

let app = new Vue({
  el: '#app',
})

Vue bileşenini oluşturduktan sonra, Vue örneğimi oluşturup, #app ID'sine işaret ettik. Vue bileşeni oluştururken vereceğimiz ilk değer, bileşenin adıdır. İkinci değer ise bir obje alır. Burada obje içerisindeki template aşağıda göreceğimiz x-template türündeki script etiketini temsil eder. props (propertys) ise bileşenin alacağı özellikleri tanımlar.

<div id="app">
  <hello message="Merhaba dünya!" />
</div>

<script type="text/x-template" id="hello">
  <p>{{message}}</p>
</script>

Kolay gelsin, iyi çalışmalar.