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