vue template 复用_前端系列——Vue组件

1、组件的基本知识

前端开发的现代化：组件化、模块化、自动化

组件化开发概念：在Javascript 的开发中，就是根据功能、业务进行代码划分，使到这部分的代码可以被复用，说白了，将大量可重复利用的代码(功能，样式等)封装起来，各自保持独立，哪里需要就在哪里调用。

模块化：现在的主流就是之前讲过的es6的import export来实现模块化引入加载。

自动化：自动化构建项目，最主流的工具是webpack。

组件就是一个元素。所以，所有的html标签本身就可以当做是一个组件。但是这个组件不够看，不能形成一个具备独立功能的模块。如果我们可以将这些html标签组件，进行一些组合，然后赋予一些逻辑，形成具备一个独立功能的部件，这就是通常所说的组件。

就好像一辆汽车，由一个个部件拼接而成，那么某一个部件坏了，可以换，可以修对吧。网页就是这辆汽车，所谓的组件化开发，就是把整个页面分成一个个独立的部件(代码块)，方便维护修理。

需要将整个webapp，划分成若干个小的组件，然后进行组合。类似于搭积木的游戏。

组件化开发的特点：可组合、可重用、可维护

2、组件的使用

(1)定义组件

所谓组件，其实就是将html标签进行组合，赋予一些逻辑，形成一个具备独立功能的部件。组件的最小单位就是html标签。换言之，所有