当某些html代码是重复使用时，就可以将其写成组件，直接调用，方便以后的修改。
需要注意的是：定义的组件只能在注册过的代码块中使用，且定义组件的Vue.component是
和注册代码是同级的。
其形式为：
Vue.component("组件名", {
template: "定义的html代码",
data: function () {
return {
返回的对象
}
}
})
注意：data后面必须是函数，且要返回一个对象，在引用组件的形式：“<组件名></组件名>”
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdn.jsdelivr.net/npm/vue"></script> <title>vue自定义组件</title> </head> <body> <div id="app"> <button-count></button-count> </div> <script> Vue.component("button-count", { template: "<button @click='count +=1'>您点击了{{count}}次</button>", data: function () { return { count: 0 } } }) new Vue({ el:"#app", }) </script> </body> </html>