【Vue.js】初めてのコンポーネント。Vueインスタンスを再利用。

index.html

<div id="app">
  <hello-component></hello-component>
  <hello-component></hello-component>
  <hello-component></hello-component>
  <hello-component></hello-component>
  <hello-component></hello-component>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

<script>
  Vue.component('hello-component', {
    data: function() {
     return {
      number: 13
     }
    },
    template: '<p>Hello{{ number }}</p>'
  })

  var app = new Vue({
    el: '#app',
  })
</script>

コンポーネントの中では、dataは関数である必要があるらしい。

Hello13

Hello13

Hello13

Hello13

Hello13