SOURCE

// 定义一个名为 button-counter 的新组件
//驼峰命名法只能用在template，不能用在HTML
//组件可以复用
//组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
//例如 data、computed、watch、methods 以及生命周期钩子等
//一个组件的 data 选项必须是一个函数
//子级组件只能在父级下用，不能全局使用
Vue.component('button-counter ', {
    data: function () {
        return {
            count: 0
        }
    },
    //模板
    template: '<button V-on:click="handle">点我{{count}}次</button>',
    methods:{
        handle:function(){
            this.count +=2;
        }
    }

})

var vm = new Vue({
  el:'#app',
  data:{
      
  }
})
  

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