## 前言
组件`Component`是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。
## 组件的定义和注册
### 写法一
写法一：使用Vue.extend方法定义组件，使用 Vue.component方法注册组件。
代码举例：
```html
Document
```
上方代码中，绿框部分的内容，就是我想定义的整个组件。
运行结果如下：
20180422_2230.png
代码截图如下：
20180422_2223.png
上图中，注意两点：
1、红框部分，要保证二者的名字是一致的。
2、绿框部分，一定要用一个大的 div 包裹起来。如果我写成下面这样，就没有预期的效果：
```
template: '登录页面
注册页面
'
```
结果如下：（并非预期的效果）
20180422_2232.png
### 写法二
写法二：Vue.component方法定义、注册组件（一步到位）。
代码如下：
```html
Document
```
代码截图如下：
20180422_2251.png
上图中，同样注意两点：
1、红框部分，要保证二者的名字是一致的。
2、绿框部分，一定要用一个大的 div 包裹起来。如果我写成下面这样，就没有预期的效果：
```
template: '登录页面
注册页面
'
```
结果如下：（并非预期的效果）
20180422_2232.png
### 写法三【荐】
写法三：将组件内容定义到template标签中去。
代码如下：
```html
Document
登录页面
注册页面
```
代码截图如下：
20180422_2256.png
写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了``标签中而已，这样有利于 html 标签的书写。