Vue コンポーネントの基本

目的

コンポーネントの基本 — Vue.js をやる。

基本例

コード

JavaScript

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
new Vue({ el: '#components-demo' })

HTML

<div id="components-demo">
  <button-counter></button-counter>
</div>

実行結果

コンポーネントの再利用

コード

JavaScript

new Vue({ el: '#components-demo2' });

HTML

<div id="components-demo2">
  <button-counter></button-counter>
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

実行結果

参考