参考网址
官网：https://cn.vuejs.org/v2/api/#Vue-component
https://www.jianshu.com/p/0cfff4a2f226
https://www.jb51.net/article/140581.htm
注意事项：template中的html最外层必须有一个根节点
我的理解：组件类似java中的类（封装）
组件（Component）是 Vue.js 最强大的功能之一。
注意，在 Vue2.0 中，代码复用和抽象的主要形式是组件。
组件可以扩展 HTML 元素，封装可重用的代码，减少重复劳动。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：
注册一个全局组件语法格式如下：
Vue.component(tagName, options)
tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：
全局组件
所有实例都能用全局组件。
<!DOCTYPE html><html><head><metacharset="utf-8"><title>Vue 测试实例</title><scriptsrc="js/vue.min.js"></script></head><body><divid="app"><runoob></runoob></div><divid="app2"><runoob></runoob></div><script>// 注册Vue.component('runoob', { template: '<h1>自定义组件!<br><span>换行后内容</h1>'})// 创建根实例new Vue({ el: '#app'})// 创建根实例new Vue({ el: '#app2'})</script></body></html>
局部组件
我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
如下例子，app2中访问不到runoob组件
<!DOCTYPE html><html><head><metacharset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><scriptsrc="js/vue.min.js"></script></head><body><divid="app"><runoob></runoob></div><divid="app2"><runoob></runoob></div><script>// 创建根实例new Vue({ el: '#app', components: {//<runoob>将只在父模板可用'runoob': {template: '<h1>自定义组件!</h1>'} }})</script></body></html>
template方式创建
上面的创建方式把html直接做为字符串写到template里，不方便看效果和调试，所以可以把html部分的内容抽取到body里面，包到 之间，并可以为template指定唯一的id,js中就可以通过引用id把模板内容包含进来了
示例：
<!DOCTYPE html><html><head><metacharset="utf-8"><title>Vue 测试实例 - 菜鸟教程(runoob.com)</title><scriptsrc="js/vue.min.js"></script></head><body><divid="app"><runoob></runoob></div><divid="app2"><runoob></runoob></div><templateid="mytemp"><h1>自定义组件!<br><span>换行后内容</h1></template><script>// 创建根实例 new Vue({ el: '#app', components: { //<runoob>将只在父模板可用 'runoob': { template: '#mytemp' } } })</script></body></html>
生命周期详解
https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA
