09-15组件，生命周期

参考网址

注意事项：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