Vue.js的组件（一）全局组件和局部组件

刚开始学习Vue.js，记录下心得。
所谓组件，在我看来，就相当于新建一个属于自己的标签。但是这个标签的功能很强大，可以有很多特殊的功能。
组件可以全局声明：

/*js*/
Vue.component('my-component-button1',{
    template:'<button>myFirstComponent</button>'
});
var app1 = new Vue(
    el:'#app1' //绑定DOM元素
);

当然也可以局部声明，局部声明的话，就只能让注册了这个组件的Vue的实例使用。比如下面的app2.

/*js*/
var localComponent = {
    template:'<button>myFirstLocalComponent</button>'
}
var app2 = new Vue({
    el:'#app2' //绑定DOM元素
    //注意↓有s
    components:{ 
        'my-component-button2':localComponent
    }
})

//html
//第一个全局按钮组件
<div id="app1">
    <my-component-button1></my-component-button1>
</div>
//第一个局部按钮组件，只能让app2用，因为只用app2注册了.
<div id="app2">
    <my-component-button2></my-component-button2>
</div>

这两个组件分别被Vue.js渲染为：

<div id="app1">
    <button>myFirstComponent</button>
</div>
<div id="app2">
    <button>myFirstLocalComponent</button>
</div>

需要注意的是，模板的名字不要有驼峰，不要和已有的标签比如h1相同。最好是用- 将名字连接起来。