元件（component）

元件是可以重複使用的一組 Vue 實體，而且會有一個標籤名。可以在 HTML 裡輸入標籤名，就可以從該元件中取得 data 資料渲染 HTML。我們可以在同一個 HTML 插入多個一樣的標籤名，而且做到一樣的格式。而且，每個標籤彼此運用的資料是獨立的，就像三杯果汁個別各自擁有自己的一根吸管，不是一杯果汁被放入三根吸管，不會有彼此互相干擾的情形。

在codepen中我們有做過計數器，就是個非常適合拿來做成元件的例子。但今天我先借用官方例子。

// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

這樣就每在 html 寫上<button-counter></button-counter>就會在該處渲染template的內容。而且，多個<button-counter></button-counter>的元件標籤，點在按鈕上的總數是不會影響彼此的。