一、vue组件的概念：

       组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义标签，所有的 Vue 组件同时也都是 Vue 的实例（对象）。

commonJS，AMD，CMD是把JS逻辑进行模块化

vue组件是把页面（html代码，CSS代码）进行模块化

如下图所示，一个页面分四个部分，每个部分是个vue组件，而页面成了vue组件的容器。

 

二、  使用组件

       vue.js中创建组件有三个步骤：创建组件构造器，注册组件以及使用组件

1、 定义组件(创建组件构造器)（三种）

2、 注册（声明）组件（两种）

3、 使用组件

示例：

代码示意图：

源代码：

<div id="app1">		
	<!--在app1里可以使用全局注册的组件my-p -->
	<my-p></my-p>
</div>
<div id="app2">			
	<!--在app2里也可以使用全局注册的组件my-p -->
	<my-p></my-p>
</div>

<script type="text/javascript">
//1、定义组件构造器：
let myCom = Vue.extend({
	template:"<p>我是p</p>"
});
//2、注册全局组件（相当于自定义标签）
Vue.component("my-p",myCom);
//3、创建两个vue实例，都可以使用全局组件 my-p，具体使用的代码在HTML中。
let v1 = new Vue({
	el:"#app1"
});
let v2 = new Vue({
	el:"#app2"
});
</script>