`）包裹起来。如果我写成下面这样，就没有预期的效果：
+
+```
+ template: '
登录页面
注册页面
'
+```
+
+结果如下：（并非预期的效果）
+
+
+
+### 写法二
+
+写法二：Vue.component方法定义、注册组件（一步到位）。
+
+代码如下：
+
+```html
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+```
+
+代码截图如下：
+
+
+
+上图中，同样注意两点：
+
+1、红框部分，要保证二者的名字是一致的。
+
+2、绿框部分，一定要用一个大的根元素（例如`
`）包裹起来。如果我写成下面这样，就没有预期的效果：
+
+```
+ template: '
登录页面
注册页面
'
+```
+
+结果如下：（并非预期的效果）
+
+
+
+
+### 写法三
+
+> 上面的写法一、写法二并不是很智能，因为在定义模板的时候，没有智能提示和高亮，容易出错。我们不妨来看看写法三。
+
+写法三：将组件内容定义到template标签中去。
+
+代码如下：
+
+```html
+
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
登录页面
+ 注册页面
+
+
+
+
+
+
+
+
+
+```
+
+代码截图如下：
+
+
+
+写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了`
`标签中而已，这样有利于 html 标签的书写。
+
+
+## 使用components定义私有组件
+
+我们在上一段中定义的是**全局组件**，这样做的时候，多个Vue实例都可以使用这个组件。
+
+我们还可以在一个Vue实例的内部定义**私有组件**，这样做的时候，只有当前这个Vue实例才可以使用这个组件。
+
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+运行效果：
+
+
+
+当然，我们还可以把**模板的定义**存放在``标签中，这样的话，模板里的html标签就可以出现智能提示和高亮，避免出错。如下：
+
+
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+ 这是私有的login组件
+
+
+
+
+
+
+
+
+
+
+
+```
+
+运行效果不变。
+
+
+## 为组件添加 data 和 methods
+
+既然组件是一个页面，那么，页面中可能会有一些功能要**动态展示**。因此，我们有必要为组件添加 data 和 methods。
+
+代码举例如下：
+
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+ {{myData}}
+
登录1
+
登录页面
+
注册页面
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{count}}
+
+
+
+
+
+
+
+```
+
+运行效果如下：
+
+
+
+
+
+上面的例子中，将组件``调用了两次，由于`dataObj`是**全局对象**，导致两个组件实例都可以**共享**这个`dataObj`数据。于是，我们点击任何一个组件实例的按钮，都可以让`count`数据加1。
+
+
+现在问题来了，如果我们想让组件``的两个实例去单独操作`count`数据，应该怎么做呢？我们应该修改 data中 return出去的内容：
+
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{count}}
+
+
+
+
+
+
+
+
+```
+
+运行效果：
+
+
+
+如上图所示，每当我们创建一个新的组件实例时，就会调用data函数，data函数里会return一个**新开辟**的对象数据。这样做，就可以保证每个组件实例有**独立的数据存储**。
+
+## 组件的切换
+
+
+### 使用v-if和v-else结合flag进行切换
+
+
+代码举例：（登录组件/注册组件，二选一）
+
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+```
+
+运行效果如下：
+
+
+
+
+### 使用Vue提供的``标签实现组件切换
+
+上面的例子中，我们是通过flag的值来进行组件的切换。但是，flag的值只可能有两种情况，也就是说，v-if和v-else只能进行两个组件之间的切换。
+
+那如何实现三个甚至三个以上的组件切换呢？这里，我们可以用到Vue提供的``标签。
+
+
+我们先来看一下``标签的用法。
+
+基于上面的代码，如果我想让login组件显示出来，借助``标签可以这样做：
+
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+上方代码中，提取关键代码如下：
+
+```html
+
+```
+
+
+如果我想让register组件显示出来，借助``标签可以这样做：
+
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+上方代码中，提取关键代码如下：
+
+```html
+
+```
+
+因此，如果要实现组件之间的切换，我们可以给``标签里的is属性值设置为变量即可，来看看代码实现。
+
+**实现组件切换**的完整代码：
+
+```html
+
+
+
+
+
+
+
+ Document
+
+
+
+
+
+
+
登录
+
注册
+
+
+
+
+
+
+
`）包裹起来。如果我写成下面这样，就没有预期的效果：
-```
- template: '
登录页面
注册页面
'
-```
-结果如下：（并非预期的效果）
-
-### 写法二
-写法二：Vue.component方法定义、注册组件（一步到位）。
-代码如下：
-```html
-
-
-
-
-
-
-
Document
-
-
-
-
-
-
-
-```
-代码截图如下：
-
-上图中，同样注意两点：
-1、红框部分，要保证二者的名字是一致的。
-2、绿框部分，一定要用一个大的根元素（例如`
`）包裹起来。如果我写成下面这样，就没有预期的效果：
-```
- template: '
登录页面
注册页面
'
-```
-结果如下：（并非预期的效果）
-
-
-
-
-### 写法三
-
-写法三：将组件内容定义到template标签中去。
-
-代码如下：
-
-```html
-
-
-
-
-
-
-
-
Document
-
-
-
-
-
-
-
-
登录页面
- 注册页面
-
-
-
-
-
-
-
-
-
-```
-
-代码截图如下：
-
-
-
-写法三其实和方法二差不多，无非是把绿框部分的内容，单独放在了`
`标签中而已，这样有利于 html 标签的书写。
-
-## 为组件添加 data 和 method
-
-既然组件是一个页面，那么，页面中可能会有一些功能要**动态展示**。因此，我们有必要为组件添加 data 和 method。
-
-代码举例如下：
-
-```html
-
-
-
-
-
-
-
- Document
-
-
-
-
-
-
-
- {{myData}}
-
登录1
-
登录页面
-
注册页面
-
-