基本概念

组件是一个可复用的Vue实例，需要挂载到Vue的实例

组件除了el选项外，同样包括有data、computed、watch、methods 以及生命周期钩子等。

这里有一个 Vue 组件的示例:

<div id="app">
         <button-counter></button-counter>
    </div>

 var compoent1={
        data:function(){
                return {
                    count:0
                }
        },
        template:`
                <button @click="count++">点击了{{count}}次.</button>
        `
    }

Vue.component("button-counter",compoent1);
var vm = new Vue({
    el: "#app"
  });
var courseListComponent={
    props:['coursename'],
    template:'<p>{{coursename}}</p>'
}

组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：

组件的复用

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

注意当点击按钮时，每个组件都会各自独立维护它的 count。因为你每用一次组件，就会有一个它的新实例被创建。

data 必须是一个函数

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

data: {
  count: 0
}

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

data: function () {
  return {
    count: 0
  }
}

定义组件

组件的data和Vue实例有区别:

组件通过一个函数返回一个对象

Vue实例是对象

el的区别:

组件没有el选项

Vue实例有el选项

var compoent1 = {
  data: function() {
    return {
     count: 0
    }
  },
  template: '<button v-on:click="count++">点击了{{ count }} 次.</button>'
}