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

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 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.