vue 组件，以及组件的复用

有时候代码的某一模块可能会经常使用到，那么完全可以把这一模块抽取出来，封装为一个组件，哪里需要用到的时候只需把模块调用即可 。参考vue官方 https://cn.vuejs.org/v2/guide/components.html

这里用一段代码

<div id="components-demo"> //注意组件名称不能驼峰命名，否则不渲染，也不报错
   <button v-on:click="count++">You clicked me {{ count }} times.</button>
</div>

因为这个点击按钮button会经常被用到，所以在这里要把这个button模块给抽取出来，做为一个组件

组件抽取

例：// 定义一个名为 button-counter 的新组件

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

})
注意：组件是可复用的VUE实例，所以他接收和new Vue实例同样的选项，如 data、computed、watch、methods 以及生命周期钩子等。

复用组件

例：

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

ok！完事儿