如代码：
<div id="app">
</div>
<script>
//定义一个组件
var btn = Vue.extend({
template: "<button>这是一个按钮</button>"
})
//创建根实例，也就是说让Vue对这个根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": btn
}
});
</script> 注：
根据官方教程，这种方法（指局部注册），也适用于其他资源，比如指令、过滤器和过渡。
④步骤简化：
【1】定义组件和注册组件结合起来一步完成：
//定义一个组件
Vue.component("add-button", {
template: "<button>这是一个按钮</button>"
}); 【2】局部注册时，定义和注册一步完成：
//创建根实例，也就是说让Vue对这个根生效
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮</button>"
}
}
}); ⑤data属性
直接给组件添加data属性是不可以的（无效）；
原因在于，假如这么干，那么组件的data属性有可能是一个对象，而这个对象也有可能是外部传入的（例如先声明一个对象，然后这个对象作为data的值），可能导致这个组件的所有副本，都共享一个对象（那个外部传入的），这显然是不对的。
因此，data属性应该是一个函数，然后有一个返回值，这个返回值作为data属性的值。
且这个返回值应该是一个全新的对象（即深度复制的，避免多个组件共享一个对象）；
如代码：
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮{{btn}}</button>",
data: function () {
return {btn: "123"};
}
}
}
}); 另外，假如这样的话，btn的值是一样的（因为他们实际上还是共享了一个对象）
<div id="app">
</div>
<div id="app2">
</div>
<script>
var obj = {btn: "123"};
var vm = new Vue({
el: '#app',
template: "<add-button></add-button>",
components: {
"add-button": {
template: "<button>这是一个按钮{{btn}}</button>",
data: function () {
return obj;
}
}
}
});
obj.btn = "456";
var vm2 = new Vue({
el: '#app2',
template: "<add-button></add-button>",
