akitoshiblog

よわよわエンジニアの日々の思考と学びの記録。

Vueのコンポーネント基礎知識

Vueのコンポーネントについての基礎知識についてまとめておきます。

コンポーネントとは、プログラムを構成する部品の一つのことを指す言葉。部品やあるまとまりに対してコンポーネントという言葉を使う

クリックした回数、数字として画面に反映させるコンポーネントを作成し、表示させる。

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  // click-counterというコンポーネントを使用する
  <click-counter></click-counter>
  <click-counter></click-counter>
  <click-counter></click-counter>
</div>
// click-counter という名前のコンポーネントを登録

Vue.component('click-counter' , {
  data: function() {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">Clickした回数は {{ count }} 回です</button>'
})

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

f:id:maserati004:20200728080013p:plain
動作確認