第3章 *组件-生命周期（2）

参考网址
官网：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 为配置选项。注册后，我们可以使用以下方式来调用组件：

全局组件

所有实例都能用全局组件。

局部组件

我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
如下例子，app2中访问不到runoob组件

template方式创建

上面的创建方式把html直接做为字符串写到template里，不方便看效果和调试，所以可以把html部分的内容抽取到body里面，包到之间，并可以为template指定唯一的id,js中就可以通过引用id把模板内容包含进来了
示例：

image.png

更先进的方式(先了解，上脚手架后会应用)

上面是一个最简单的注册例子，但是实际上我们并不会这么用。将来用vue-cli脚手架搭架后，我们会单独创建一个vue文件来封装一个组件。
在其他需要的地方用import ... from ...引用，类似java中类的引用

参考网址：https://www.jb51.net/article/146223.htm

生命周期详解

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

https://www.php.cn/vuejs/463882.html

    

        信息:{{msg}}
    
    

例子（根据后台数据加载列表框的值）：

Vue目前学到的属性

• el
• data
• methods
• computed
• watch
• filters
• components
• beforeCreate:
• created
• beforeMounted
• mounted
• beforeUpdated
• updated 等