コンポーネントについて

コンポーネントとは再利用できるvueのインスタンスである。

間違った使い方から

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

<div id="app">
</div>

<div id="app">
</div>

new Vue({
 el: '#app',
 data: {
   number: 12
 },
 template: '<p>いいね{{number}}</p>'
})

こちらの意図としては同じdivタグを２つ用意して「いいね１２」が2連続表示されるかと思っていたが、その意図には反して最初に示したものと同じものは無視するというvuejsの仕様で無視されている。

ここでコンポーネントの設定をして２回連続表示します。

Vue　component('コンポーネントの名前',{コンポーネントの情報=データなど})

（１）vue.componentを設定します。
(2)vueファイルにコンポーネント名のタグを設置します。
*今回は
（３）Dataがある場合は関数を使ってreturnとオブジェクトで表現する。
今回はプロパティがnumberで値が１２です。
⇨data: function(){return {number: 12}}

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

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

<div id="app">
</div>

Vue.component('my-component',{
 data: function(){
   return {
     number: 12
   }
 },
 template: '<p>いいね({{number}})</p>'
})

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

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

繰り返し処理

うまくいきました。