VUE 组件介绍

ES6 模块化

1. 没有模块化的世界：全局变量污染、难以管理的依赖

2. 常见的模块化标准：CommonJS、ES6 Module、AMD、CMD、UMD....

导出js: 使用模块化在script标签上写 type="module"

在js函数开头 写入 export default(默认导出：{ default：fn })

在js函数开头 写入 export (真名导出(普通导出)：{ double：fn })

1. 从js中写入 import xxx form "路径.js" (导入模块化js)

2. 从js中写入 import {函数名} form "路径.js" (导入模块化js)

3. 从js中写入 import * as xxx form "路径.js" (导入模块化js)

组件概念：

一个完整的网页是复杂的，如果将其作为一个整体来进行开发，将会遇到下面的困难

1. 代码凌乱臃肿

2. 不易协作

3. 难以复用

vue推荐使用一种更加精细的控制方案--组件化开发

所谓组件化，即把一个页面中区域功能细分，每一个区域分为一个组件，每个组件包含：

1. 功能(JS代码)

2. 内容(模板代码)

3. 样式(CSS代码)

组件开发：

创建组件：

组件是根据一个普通的配置对象创建的，所以要开发一个组件，只需要写一个配置对象即可

向组件传递数据：

大部分组件要完成自身的功能，都需要一些额外的信息

比如一个头像组件，需要告诉他头像的地址，这就需要在使用组件时向组件传递数据

传递数据的方式有很多种，最常见的一种是使用组件属性 component props