vue学习之组件基础

1.组件可以被复用，
2.每个组件都会各自独立维护它的 count。因为每用一次组件，就会有一个它的新实例被创建。
3.vue组件示例

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

data 必须是一个函数

当我们定义这个 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：

data: {
count: 0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：