# 1.什么是组件
我们传统写HTML
代码
首页 - HTML
顶部栏 - HTML -CSS -JS
导航栏 - HTML -CSS -JS
内容栏 - HTML -CSS -JS
底部栏 - HTML -CSS -JS
商品 - HTML
顶部栏 - 首页HTML -首页CSS -首页JS
商品列表栏 - HTML -CSS -JS
底部栏 - 首页HTML -首页CSS -首页JS
没什么问题,但是你非得要和组件化对比就有俩个地方不太完美
存在的问题:
1.依赖关系混乱,不好维护
2.代码复用率不高
如果你要引入外部jsjquery.js
,a.js
用到了它其中一个api
要在引入a.js
之前引入jquery.js
,假如b.js
要用到a.js
里的方法,得先引入a.js
再引入b.js
如果多起来就现得很烦,Vue的组件
就解决了这一些问题
2.组件化编程和之前用的传统编程相比,组件化编程有什么优势
使用组件方式编写应用
首先一上来分析页面有几大块,这里一共是4块
首页
顶部栏 -> header组件 -> 包含实现顶部一小块功能的样式(css)、结构(html片段)\交互(js)
导航栏
内容栏
底部栏
所有的区域都可以想顶部栏
那样写组件
优势:css改的时候就会特别明确控制的就是顶部的
更大的威力时从复用开始的
商品
顶部栏 ->一句代码,把之前写过的组件样式引入
商品列表栏 -> 创建一个list组件
底部栏
这里体现了封装
vm
|
-------------------------
| | |
组件 组件 组件
| | | | |
组件 组件 组件 组件 组件
表达的第一个: 所有的组件都得听大哥(vm
)的指挥
表达的第二个: 第一个组件下边没有下属了,第二个组件有下属1、2,同理第三个
组件的定义: 实现应用中局部
功能代码
和资源
的集合
最终落到了集合
局部
:一小块
代码
:html、css、js
资源
:mp3、mp4...
总结
模块
1、理解:向外提供特定功能的js程序,一般就是一个js文件
2、为什么:js文件很多很复杂
3、作用:复用js,简化js的编写,提高js运行效率
组件
1、理解:用来实现局部(特定)功能效果的代码集合(html/css/js/image…)
2、为什么:一个界面的功能很复杂
3、作用:复用编码,简化项目编码,提高运行效率
模块化
当应用中的js都以模块化来编写的,那这个应用就是一个模块化的应用
组件化
当应用中的功能都是很多组件的方式来编写的,哪这个应用就是一个组件化的应用