Vue2.0 Vue 组件 非单文件组件 对组件的理解

# 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都以模块化来编写的，那这个应用就是一个模块化的应用

组件化

当应用中的功能都是很多组件的方式来编写的,哪这个应用就是一个组件化的应用