diff --git a/00-前端工具/03-Sublime Text在前端中的使用.md b/00-前端工具/03-Sublime Text在前端中的使用.md
index ea4a6d4..ef4e509 100644
--- a/00-前端工具/03-Sublime Text在前端中的使用.md	
+++ b/00-前端工具/03-Sublime Text在前端中的使用.md	
@@ -1,147 +1,147 @@
-
-
-
-
-
-
-
-
-### 新建文件时快速生成Html
-
-**安装如下插件：**
-
-- FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。[官网链接](https://github.com/shiyanhui/FileHeader)。
-- CSS Format：css格式化。
-- Emmet：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。[官网教程](http://docs.emmet.io/)。
-
-**开始使用：**
-
-新建文件，输入`html:5`，按[Ctrl + E] 或者 Tab 键，
-
-
-参考链接：[Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】](http://www.jianshu.com/p/f44e91bf9dfb)
-
-
-
-## 常用插件
-
-### SublimeCodeIntel：JavaScript代码自动提示（不好用）
-
-安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。
-
-将
-
-```
-"codeintel_selected_catalogs": ["jQuery"]
-
-```
-
-改为：
-
-```
-"codeintel_selected_catalogs": ["JavaScript"]
-```
-
-保存后重启软件。
-
-参考链接：[#](http://blog.csdn.net/hehexiaoxia/article/details/54134756)
-
-
-### javascript complet：JavaScript代码自动提示
-
-
-- [官网链接](https://packagecontrol.io/packages/JavaScript%20Completions)
-
-- [GitHub链接](https://github.com/pichillilorenzo/JavaScript-Completions)
-
-在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomp lete](https://github.com/alienhard/SublimeAllAutocomplete)
-
-
-### JsFormat：JS代码格式化
-
-
-快捷键是：选中JS代码，然后按ctrl+alt+f。
-
-或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令
-
-
-### Sublime Server
-
-我们如果右键在浏览器中打开html网页，其实是以**文件路径**的方式打开的，导致很多api无法操作。最好的办法是：将html在服务器上打开。
-
-我们如果安装 `Sublime Server`，就可以让网页在本地的服务器上打开。
-
-安装成功之后，使用步骤如下：
-
-（1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。
-
-（2）在html文档里，右键选择 "View in SublimeServer"。
-
-如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭方式容易导致软件卡死。
-
-
-
-
-## 代码快速生成
-
-
-（1）`>`符号的技巧：
-
-
-输入`ul>li*9`，然后按tab键，生成的代码如下；（符号`>`是包含的关系）
-
-```html
-        <div>
-            <li>a</li>
-            <li>a</li>
-            <li>a</li>
-            <li>a</li>
-            <li>a</li>
-            <li>a</li>
-            <li>a</li>
-            <li>a</li>
-            <li>a</li>
-        </div>
-    </div>
-```
-
-
-
-
-
-
-## sublime text 快捷键
-
-| Win快捷键 | Mac快捷键 |作用 | 备注 |
-|:-------------|:-------------|:-----|:-----|
-|html:5+tab||html结构代码||
-|tab||补全标签代码||
-|tab|补全标签代码| |比如，在html文件中输入`div`，然后	按住tab键后，会自动生成`<div></div>`。||
-|  **Ctrl + Shift + D** | Cmd + Shift + D|复制当前行到下一行  |   |
-|  Ctrl+Shift+K ||  快速删除整行 |   |
-|Ctrl+鼠标左键单击||集体输入||
-|Ctrl+H|Option+Cmd+F|查找替换|||
-| Ctrl+/  ||  注释单行 |   |
-| Ctrl+Shift+/  || 注释多行  |   |
-|Ctrl+L| | 快速选中整行，继续操作则继续选择下一行，效果和 `Shift + ↓` 效果一样| |
-|**Ctrl+Shift+L**| | 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行| 经常与上一个快捷键结合起来使用 |
-|**Ctrl + Shift +【↑/↓**| Ctrl + Cmd +↑/↓ | 移动当前行 | |
-|F11||全屏||
-
-
-
-
-## 推荐阅读
-
-
-- [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
-
-我自己整理的。
-
-
-## 参考链接
-
-- [像 Sublime Text 一样使用 Chrome DevTools](https://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/)
-
-
-
+
+
+
+
+
+
+
+
+### 新建文件时快速生成Html
+
+**安装如下插件：**
+
+- FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。[官网链接](https://github.com/shiyanhui/FileHeader)。
+- CSS Format：css格式化。
+- Emmet：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。[官网教程](http://docs.emmet.io/)。
+
+**开始使用：**
+
+新建文件，输入`html:5`，按[Ctrl + E] 或者 Tab 键，
+
+
+参考链接：[Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】](http://www.jianshu.com/p/f44e91bf9dfb)
+
+
+
+## 常用插件
+
+### SublimeCodeIntel：JavaScript代码自动提示（不好用）
+
+安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。
+
+将
+
+```
+"codeintel_selected_catalogs": ["jQuery"]
+
+```
+
+改为：
+
+```
+"codeintel_selected_catalogs": ["JavaScript"]
+```
+
+保存后重启软件。
+
+参考链接：[#](http://blog.csdn.net/hehexiaoxia/article/details/54134756)
+
+
+### javascript complet：JavaScript代码自动提示
+
+
+- [官网链接](https://packagecontrol.io/packages/JavaScript%20Completions)
+
+- [GitHub链接](https://github.com/pichillilorenzo/JavaScript-Completions)
+
+在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomp lete](https://github.com/alienhard/SublimeAllAutocomplete)
+
+
+### JsFormat：JS代码格式化
+
+
+快捷键是：选中JS代码，然后按ctrl+alt+f。
+
+或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令
+
+
+### Sublime Server
+
+我们如果右键在浏览器中打开html网页，其实是以**文件路径**的方式打开的，导致很多api无法操作。最好的办法是：将html在服务器上打开。
+
+我们如果安装 `Sublime Server`，就可以让网页在本地的服务器上打开。
+
+安装成功之后，使用步骤如下：
+
+（1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。
+
+（2）在html文档里，右键选择 "View in SublimeServer"。
+
+如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭方式容易导致软件卡死。
+
+
+
+
+## 代码快速生成
+
+
+（1）`>`符号的技巧：
+
+
+输入`ul>li*9`，然后按tab键，生成的代码如下；（符号`>`是包含的关系）
+
+```html
+        <div>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+            <li>a</li>
+        </div>
+    </div>
+```
+
+
+
+
+
+
+## sublime text 快捷键
+
+| Win快捷键 | Mac快捷键 |作用 | 备注 |
+|:-------------|:-------------|:-----|:-----|
+|html:5+tab||html结构代码||
+|tab||补全标签代码||
+|tab|补全标签代码| |比如，在html文件中输入`div`，然后	按住tab键后，会自动生成`<div></div>`。||
+|  **Ctrl + Shift + D** | Cmd + Shift + D|复制当前行到下一行  |   |
+|  Ctrl+Shift+K ||  快速删除整行 |   |
+|Ctrl+鼠标左键单击||集体输入||
+|Ctrl+H|Option+Cmd+F|查找替换|||
+| Ctrl+/  ||  注释单行 |   |
+| Ctrl+Shift+/  || 注释多行  |   |
+|Ctrl+L| | 快速选中整行，继续操作则继续选择下一行，效果和 `Shift + ↓` 效果一样| |
+|**Ctrl+Shift+L**| | 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行| 经常与上一个快捷键结合起来使用 |
+|**Ctrl + Shift +【↑/↓**| Ctrl + Cmd +↑/↓ | 移动当前行 | |
+|F11||全屏||
+
+
+
+
+## 推荐阅读
+
+
+- [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
+
+我自己整理的。
+
+
+## 参考链接
+
+- [像 Sublime Text 一样使用 Chrome DevTools](https://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/)
+
+
+
diff --git a/20-前端综合/2018年-前端日记.md b/20-前端综合/2018年-前端日记.md
index 00fd9de..cee448e 100644
--- a/20-前端综合/2018年-前端日记.md
+++ b/20-前端综合/2018年-前端日记.md
@@ -217,7 +217,6 @@ git cherry-pick myLog
 - **shadow-root**：下一代。
 
 
-
 ### 2018-06-07
 
 - [原生js实现淡入淡出效果](https://www.teakki.com/p/57dfb44cd3a7507f975e91e4)
@@ -232,6 +231,13 @@ git cherry-pick myLog
 - pv、uv的概念
 
 
+### 2018-06-21
+
+- 今天学会了 iPhone上WebApp的真机调试，感觉很高端呀。具体可以看我在本文件夹中写的《前端开发积累》这篇文章。
+
+
+
+
 
 
 
diff --git a/20-前端综合/前端开发积累.md b/20-前端综合/前端开发积累.md
new file mode 100644
index 0000000..1304496
--- /dev/null
+++ b/20-前端综合/前端开发积累.md
@@ -0,0 +1,28 @@
+
+
+
+
+## 移动端WebApp前端真机调试
+
+
+### iPhone/iOS借助Safari进行真机调试
+
+
+（1）手机端：设置 → Safari → 高级 → Web 检查器 → 开。
+
+（2）mac端：Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单。
+
+
+（3）在 OS X 中启动 Safari 之后，以 USB 电缆正常接入 iOS 设备，并在此移动设备上启动 Safari。此时点击计算机上的 Safari 菜单中的“开发”，可以看到有 iOS 设备的名称显示，其子菜单项即为移动设备上 Safari 的所有标签页，点击任意一个开始调试。如下：
+
+
+![](http://img.smyhvae.com/20180621_1900.png)
+
+
+
+参考链接：
+
+- [移动端前端开发真机调试攻略](https://juejin.im/entry/563ab66400b0bf37d79aa17d)
+
+- [iOS、Android 之类的如何调试 Web APP](https://segmentfault.com/q/1010000000124121)
+
diff --git a/21-Vue基础/02-Vue实例的生命周期函数.md b/21-Vue基础/02-Vue实例的生命周期函数.md
index 4203c61..74051d2 100644
--- a/21-Vue基础/02-Vue实例的生命周期函数.md
+++ b/21-Vue基础/02-Vue实例的生命周期函数.md
@@ -1,192 +1,192 @@
-
-
-
-## 介绍
-
-
-
-- [vue实例的生命周期](https://cn.vuejs.org/v2/guide/instance.html#实例生命周期)：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
-
-
-- [生命周期钩子](https://cn.vuejs.org/v2/api/#选项-生命周期钩子)：就是生命周期事件的别名而已。
-
-生命周期钩子 = 生命周期函数 = 生命周期事件。
-
-
-## 生命周期函数的主要分类
-
-![](http://img.smyhvae.com/20180422_1650.png)
-
-根据上面这张图，我们把生命周期函数主要分为三类。
-
-
-### 1、创建期间的生命周期函数
-
-- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
-
-- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。我们可以在这里进行Ajax请求。
-
-- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
-
-- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示**真实DOM渲染完了，可以操作DOM了**）
-
-
-**举例**：
-
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-    <!--这个div区域就是MVVM中的 View-->
-    <div id="app">
-    </div>
-</body>
-
-<script>
-    new Vue({
-        el: '#app',
-        data: {
-            msg: 'hello vuejs'
-        },
-        // 这是第1个生命周期函数，表示实例完全被创建出来之前，会执行它
-        beforeCreate: function () {
-            console.log('01 beforeCreate', this.msg);
-            //注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
-        },
-
-        // 这是第2个生命周期函数
-        created: function () {
-            console.log('02 created', this.msg);
-            //注意：如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
-        },
-
-        // 这是第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
-        beforeMount: function () {
-            console.log('03 beforeMount', this.msg);
-            // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
-        },
-
-        // 这是第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
-        mounted: function () {
-            console.log('04 mounted', this.msg);
-            // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了
-            // 此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
-        }
-    });
-
-</script>
-
-</html>
-```
-
-打印结果：
-
-![](http://img.smyhvae.com/20180610_1500.png)
-
-### 运行期间的生命周期函数
-
-- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
-
-- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
-
-PS：数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。
-
-
-**举例**：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <title>Title</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-    <!--这个div区域就是MVVM中的 View-->
-    <div id="app">
-        <input type="button" value="修改flag" @click="myMethod">
-        <h3 id="h3">{{ flag }}</h3>
-    </div>
-</body>
-
-<script>
-    new Vue({
-        el: '#app',
-        data: {
-            msg: 'hello vue',
-            flag: false
-        },
-
-        methods: {
-            myMethod: function () {
-                this.flag = true;
-            }
-        },
-
-
-        // 接下来的是运行中的两个事件
-        // 这时候，我们的界面还没有被更新【但是，数据被更新了吗？  数据肯定被更新了】
-        beforeUpdate() {
-            console.log('-------------05 beforeUpdate', this.msg);
-
-            // 结论：当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
-            console.log('界面上DOM元素显示的内容：' + document.getElementById('h3').innerText)
-            console.log('data 中的 msg 数据：' + this.flag)
-        },
-        updated() {
-            console.log('-------------06 updated', this.msg);
-
-            // 结论：updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
-            console.log('界面上DOM元素显示的内容：' + document.getElementById('h3').innerText)
-            console.log('data 中的 msg 数据：' + this.flag)
-        }
-    });
-
-</script>
-
-</html>
-```
-
-
-当我们点击按钮后，运行效果是：
-
-![](http://img.smyhvae.com/20180610_1528.png)
-
-可以看出：
-
-- 当执行 beforeUpdate 的时候，页面中的显示的数据还是旧的，但此时 data 数据是最新的
-
-- updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
-
-
-
-### 3、销毁期间的生命周期函数
-
-- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
-
-- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
-
-PS：可以在beforeDestory里**清除定时器、或清除事件绑定**。
-
-
-## 生命周期函数图解
-
-![](http://img.smyhvae.com/20180610_2130.png)
-
-PS：图片来自网络。
-
-
-
-
-
+
+
+
+## 介绍
+
+
+
+- [vue实例的生命周期](https://cn.vuejs.org/v2/guide/instance.html#实例生命周期)：从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。
+
+
+- [生命周期钩子](https://cn.vuejs.org/v2/api/#选项-生命周期钩子)：就是生命周期事件的别名而已。
+
+生命周期钩子 = 生命周期函数 = 生命周期事件。
+
+
+## 生命周期函数的主要分类
+
+![](http://img.smyhvae.com/20180422_1650.png)
+
+根据上面这张图，我们把生命周期函数主要分为三类。
+
+
+### 1、创建期间的生命周期函数
+
+- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
+
+- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板。我们可以在这里进行Ajax请求。
+
+- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
+
+- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示。（mounted之后，表示**真实DOM渲染完了，可以操作DOM了**）
+
+
+**举例**：
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+    <!--这个div区域就是MVVM中的 View-->
+    <div id="app">
+    </div>
+</body>
+
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            msg: 'hello vuejs'
+        },
+        // 这是第1个生命周期函数，表示实例完全被创建出来之前，会执行它
+        beforeCreate: function () {
+            console.log('01 beforeCreate', this.msg);
+            //注意：在 beforeCreate 生命周期函数执行的时候，data 和 methods 中的 数据都还没有没初始化
+        },
+
+        // 这是第2个生命周期函数
+        created: function () {
+            console.log('02 created', this.msg);
+            //注意：如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作
+        },
+
+        // 这是第3个生命周期函数，表示 模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中
+        beforeMount: function () {
+            console.log('03 beforeMount', this.msg);
+            // 在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
+        },
+
+        // 这是第4个生命周期函数，表示，内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了
+        mounted: function () {
+            console.log('04 mounted', this.msg);
+            // 注意： mounted 是 实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了
+            // 此时，如果没有其它操作的话，这个实例，就静静的 躺在我们的内存中，一动不动
+        }
+    });
+
+</script>
+
+</html>
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180610_1500.png)
+
+### 运行期间的生命周期函数
+
+- beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
+
+- updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了。
+
+PS：数据发生变化时，会触发这两个方法。不过，我们一般用watch来做。
+
+
+**举例**：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+    <!--这个div区域就是MVVM中的 View-->
+    <div id="app">
+        <input type="button" value="修改flag" @click="myMethod">
+        <h3 id="h3">{{ flag }}</h3>
+    </div>
+</body>
+
+<script>
+    new Vue({
+        el: '#app',
+        data: {
+            msg: 'hello vue',
+            flag: false
+        },
+
+        methods: {
+            myMethod: function () {
+                this.flag = true;
+            }
+        },
+
+
+        // 接下来的是运行中的两个事件
+        // 这时候，我们的界面还没有被更新【但是，数据被更新了吗？  数据肯定被更新了】
+        beforeUpdate() {
+            console.log('-------------05 beforeUpdate', this.msg);
+
+            // 结论：当执行 beforeUpdate 的时候，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步
+            console.log('界面上DOM元素显示的内容：' + document.getElementById('h3').innerText)
+            console.log('data 中的 msg 数据：' + this.flag)
+        },
+        updated() {
+            console.log('-------------06 updated', this.msg);
+
+            // 结论：updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
+            console.log('界面上DOM元素显示的内容：' + document.getElementById('h3').innerText)
+            console.log('data 中的 msg 数据：' + this.flag)
+        }
+    });
+
+</script>
+
+</html>
+```
+
+
+当我们点击按钮后，运行效果是：
+
+![](http://img.smyhvae.com/20180610_1528.png)
+
+可以看出：
+
+- 当执行 beforeUpdate 的时候，页面中的显示的数据还是旧的，但此时 data 数据是最新的
+
+- updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
+
+
+
+### 3、销毁期间的生命周期函数
+
+- beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
+
+- destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
+
+PS：可以在beforeDestory里**清除定时器、或清除事件绑定**。
+
+
+## 生命周期函数图解
+
+![](http://img.smyhvae.com/20180610_2130.png)
+
+PS：图片来自网络。
+
+
+
+
+
diff --git a/21-Vue基础/04-Vue动画.md b/21-Vue基础/04-Vue动画.md
index 608228c..8292def 100644
--- a/21-Vue基础/04-Vue动画.md
+++ b/21-Vue基础/04-Vue动画.md
@@ -1,1151 +1,1151 @@
-04-Vue动画.md
-
-
-
-## 前言
-
-动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。
-
-
-## 使用过渡类名实现动画
-
-### 官方文档的截图
-
-过渡类名如下：
-
-![](http://img.smyhvae.com/20180616_1555.png)
-
-动画进入：
-
-- v-enter：动画进入之前的**初始**状态
-
-- v-enter-to：动画进入之后的**结束**状态
-
-- v-enter-active：动画进入的时间段
-
-PS：第一、第二个是时间点；第三个是时间段。
-
-动画离开：
-
-- v-leave：动画离开之前的**初始**状态
-
-- v-leave-to：动画离开之后的**结束**状态
-
-- v-leave-active：动画离开的时间段
-
-PS：第一、第二个是时间点；第三个是时间段。
-
-
-### 使用举例（通过Vue的过渡类名来实现）
-
-`v-enter-to`和`v-leave`的状态是一样的。而且一般来说，`v-enter`和`v-leave-to`的状态也是一致的。所以，我们可以把这四个状态写成两组。
-
-现在我们来做个例子：点击按钮时，让div显示/隐藏。
-
-**1、引入**：
-
-如果我们不使用动画，应该是这样做：
-
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-    <div id="app">
-        <input type="button" value="toggle" @click="flag=!flag">
-        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
-        <h3 v-if="flag">这是一个H3</h3>
-    </div>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                flag: false
-            },
-            methods: {}
-        });
-    </script>
-</body>
-
-</html>
-```
-
-
-**2、使用动画**：（通过Vue的过渡类名来实现）
-
-现在，我们加**淡入淡出**的动画，让div显示和隐藏。代码如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-    <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->
-    <style>
-        /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
-
-        /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
-
-        .v-enter,
-        .v-leave-to {
-            opacity: 0;
-        }
-
-        /* v-enter-active 【入场动画的时间段】 */
-
-        /* v-leave-active 【离场动画的时间段】 */
-
-        .v-enter-active,
-        .v-leave-active {
-            transition: all 1s ease;   /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
-        }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-        <input type="button" value="toggle" @click="flag=!flag">
-        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
-        <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
-        <!-- transition 元素，是 Vue 官方提供的 -->
-        <transition>
-            <h3 v-if="flag">这是一个H3</h3>
-        </transition>
-    </div>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                flag: false
-            },
-            methods: {}
-        });
-    </script>
-</body>
-
-</html>
-
-```
-
-
-上方代码中，我们使用vue提供的`<transition>`标签把需要被动画控制的元素，包裹起来；然后使用`.v-enter`、`.v-leave-to`等进行动画的定义。
-
-运行效果如下：
-
-![](http://img.smyhvae.com/20180615_2200.gif)
-
-
-**3、再加一个tramsform属性进行位移**：
-
-
-我们在上方代码的基础之上，加一个tramsform属性，让动画有一个位移的效果。完整代码如下：
-
-
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-    <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->
-    <style>
-        /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
-
-        /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
-
-        .v-enter,
-        .v-leave-to {
-            opacity: 0;
-            /* 在动画中加入位移 */
-            transform: translateX(80px); /* smyhvae提示：v-enter表示，一开始让DOM元素处于靠右80px的位置 */
-        }
-
-        /* v-enter-active 【入场动画的时间段】 */
-
-        /* v-leave-active 【离场动画的时间段】 */
-
-        .v-enter-active,
-        .v-leave-active {
-            transition: all 1s ease;   /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
-        }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-        <input type="button" value="toggle" @click="flag=!flag">
-        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
-        <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
-        <!-- transition 元素，是 Vue 官方提供的 -->
-        <transition>
-            <h3 v-if="flag">这是一个H3</h3>
-        </transition>
-    </div>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                flag: false
-            },
-            methods: {}
-        });
-    </script>
-</body>
-
-</html>
-```
-
-
-效果如下：
-
-![](http://img.smyhvae.com/20180615_2205.gif)
-
-### 修改过渡类名的前缀
-
-在上一小段中，`.v-enter`、`.v-leave-to`这些过渡类名都是以`v-`开头的。这样做，会有一个局限性：假设有两个DOM元素都用`<transition>`进行了包裹，那这两个DOM元素就都具备了`v-`中所定义的动画。
-
-那**如果我们想把两个DOM元素的动画进行分开定义**，该怎么做呢？这里，我们可以通过修改过渡类名的前缀来做。比如：
-
-第一步：（自定义别名）
-
-```html
-    <transition name="my">
-      <h6 v-if="flag2">这是一个H6</h6>
-    </transition>
-```
-
-上方代码中，我们加了`name="my"`。
-
-第二步：（我们就可以使用 `my-enter`、`.my-leave-to`这些类名了）
-
-```css
-    .my-enter,
-    .my-leave-to {
-      opacity: 0;
-      transform: translateY(70px);
-    }
-
-```
-
-
-完整代码举例如下；
-
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="./lib/vue-2.4.0.js"></script>
-    <style>
-        /* 自定义第一组样式，来控制 transition 内部的元素实现动画 */
-
-        /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
-
-        /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
-
-        .v-enter,
-        .v-leave-to {
-            opacity: 0;
-            transform: translateX(150px);
-        }
-
-        /* v-enter-active 【入场动画的时间段】 */
-
-        /* v-leave-active 【离场动画的时间段】 */
-
-        .v-enter-active,
-        .v-leave-active {
-            transition: all 0.8s ease;
-        }
-
-
-        /* 自定义第二组样式，来控制 transition 内部的元素实现动画。这次，我们通过自己起的别名`name`来作为指令 */
-
-        .my-enter,
-        .my-leave-to {
-            opacity: 0;
-            transform: translateY(70px);
-        }
-
-        .my-enter-active,
-        .my-leave-active {
-            transition: all 1s ease;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-        <!-- 第一组 -->
-        <input type="button" value="toggle" @click="flag=!flag">
-        <!-- 使用 transition 元素，把 需要被动画控制的元素 h3，包裹起来 -->
-        <!-- transition 元素，是 Vue 官方提供的 -->
-        <transition>
-            <h3 v-if="flag">这是一个H3</h3>
-        </transition>
-
-        <hr>
-
-        <!-- 第二组 -->
-        <input type="button" value="toggle2" @click="flag2=!flag2">
-        <!-- 使用 transition 元素，把 需要被动画控制的元素 h6，包裹起来 -->
-        <!-- transition 元素，是 Vue 官方提供的 -->
-        <!-- 【重点】在这里，我们给这个transition定义一个别名，叫`name`，然后，我们就可以通过 `.my-enter`等 来定义动画的样式【重要】 -->
-        <transition name="my">
-            <h6 v-if="flag2">这是一个H6</h6>
-        </transition>
-    </div>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                flag: false,
-                flag2: false
-            },
-            methods: {}
-        });
-    </script>
-</body>
-
-</html>
-```
-
-运行效果如下：
-
-![](http://img.smyhvae.com/20180616_1513.gif)
-
-## 使用第三方animate.css类库实现动画
-
-animate.css网址：
-
-- 官方网站：<https://daneden.github.io/animate.css/>
-
-
-**代码举例**：
-
-下面的代码中，我们使用animate.css提供的`bounceIn`、`bounceOut`这两个类来做入场、离场的动画。代码如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-    <link rel="stylesheet" href="animate3.6.0.css">
-    <!-- 入场 bounceIn    离场 bounceOut -->
-</head>
-
-<body>
-    <div id="app">
-        <input type="button" value="toggle" @click="flag=!flag">
-        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
-        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
-            <h3 v-if="flag">这是一个H3</h3>
-        </transition>
-
-    </div>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                flag: false
-            },
-            methods: {}
-        });
-    </script>
-</body>
-
-</html>
-```
-
-
-
-上面的代码中，注意：
-
-注意1：`enter-active-class`和`leave-active-class`这两个类名是Vue动画里的关键词，不能写成自己**随意起**的类名。
-
-注意2：`bounceIn`、`bounceOut`这两个类不能直接使用，要在前面加上`animated`这个类；否则动画是不会生效的。当然，上面的代码中，我们还可以把`class = animated`这个代码移到`<h3>`标签里，效果是一样的，如下：
-
-```html
-        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
-        <transition enter-active-class="bounceIn" leave-active-class="bounceOut">
-            <h3 v-if="flag" class="animated">这是一个H3</h3>
-        </transition>
-
-```
-
-
-运行效果如下：
-
-![](http://img.smyhvae.com/20180616_1538.gif)
-
-**改进1**：（统一设置入场、出场动画的持续时间）
-
-我们把上面的代码改进一下，如果我们想给入场、出场动画设置持续的时间，可以使用`:duration`来做。如下：
-
-
-```html
-        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
-        <!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 -->
-        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="500">
-            <h3 v-if="flag">这是一个H3</h3>
-        </transition>
-```
-
-
-**改进2**：（分别设置入场、出场动画的持续时间）
-
-```html
-        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
-        <!-- 使用  :duration="{ enter: 1000, leave: 300 }"  来分别设置 入场的时长 和 离场的时长  -->
-        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{ enter: 1000, leave: 300 }">
-            <h3 v-if="flag">这是一个H3</h3>
-        </transition>
-```
-
-
-## 钩子函数实现半场动画
-
-只有出场动画、没有离场动画，这种就是属于半场动画。比如你把一件商品加入收藏，会出现一个动画；当再次点击收藏按钮的时候却看不到动画效果，这就说明，只有前一半才有动画。
-
-
-半场动画，可以使用钩子函数来实现。
-
-
-### 动画的钩子函数介绍
-
-可以在属性中声明 JavaScript 钩子函数：（这八个钩子函数可以理解成是动画的生命周期）
-
-```html
-<transition
-  v-on:before-enter="beforeEnter"
-  v-on:enter="enter"
-  v-on:after-enter="afterEnter"
-  v-on:enter-cancelled="enterCancelled"
-
-  v-on:before-leave="beforeLeave"
-  v-on:leave="leave"
-  v-on:after-leave="afterLeave"
-  v-on:leave-cancelled="leaveCancelled"
->
-  <!-- DOM元素 -->
-</transition>
-```
-
-
-我们可以这样理解：上面这八个钩子函数（四个入场、四个离场），对应了八个事件，我们要紧接着在methods中定义八个函数。
-
-如果要定义半场动画，做法是：直接在methods中写入场动画的函数，不写离场动画的函数即可。
-
-### 举例：使用钩子函数模拟小球半场动画
-
-现在要实现的例子是：点击按钮后，让小球进行移动。完整代码如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-    <style>
-        .ball {
-            width: 15px;
-            height: 15px;
-            border-radius: 50%;
-            background-color: red;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-        <input type="button" value="加入购物车" @click="flag=!flag">
-        <!-- 1. 使用 transition 元素把 小球包裹起来 -->
-        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
-            <div class="ball" v-show="flag"></div>
-        </transition>
-    </div>
-
-    <script>
-
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                flag: false
-            },
-            methods: {
-                // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
-                // 我们可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
-                beforeEnter(el) {
-                    // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
-                    // 设置小球开始动画之前的 起始位置
-                    el.style.transform = "translate(0, 0)"   // smyhvae提示：一开始的时候，让小球处于（0，0）的位置
-                },
-                enter(el, done) {
-                    // 【注意1】el.offsetWidth 这句话，没有实际的作用，但是，如果不写，出不来动画效果。可以认为 el.offsetWidth 会强制动画刷新
-                    el.offsetWidth
-                    // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
-                    el.style.transform = "translate(150px, 300px)" // smyhvae 提示：让小球从（0，0）移动到 (150px, 300px)
-                    el.style.transition = 'all 1s ease'
-
-                    // 【注意2】这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
-                    done()
-                },
-                afterEnter(el) {
-                    // 动画完成之后，会调用 afterEnter
-                    // console.log('ok')
-                    // 动画结束后，让小球消失（直接让 flag 取反即可）
-                    this.flag = !this.flag  // 因为最开始的时候，小球就是处于消失的状态，这行代码可以让小球的动画重新开始
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-
-```
-
-
-运行效果如下：（我们可以用这种动画效果，做类似于“加入购物车”的动画效果）
-
-![](http://img.smyhvae.com/20180616_1618.gif)
-
-上面的代码中，有两个地方要注意：
-
-
-**注意1**：
-
-`el.offsetWidth`这行代码不能少。虽然这行代码没有实际的意义，但是少了之后，动画效果出不来：
-
-![](http://img.smyhvae.com/20180616_1620.gif)
-
-当然，我们也可以把这行代码换成`el.offsetHeight`、`el.offsetLeft`、`el.offsetTop`之类的，只要包含了offset就行。
-
-
-**注意2**：
-
-`enter()`函数里，函数的第二个参数要加上`done`，函数体的最后一行要写`done()`，表示**立即执行**后面的`afterEnter()`函数；如果没有这个`done`，则会**延迟执行**后面的`afterEnter()`函数：
-
-![](http://img.smyhvae.com/20180616_2145.gif)
-
-Vue官方文档的解释是这样：
-
-
- > 当只用 JavaScript 过渡的时候，在`enter`和`leave`中必须使用`done`进行回调。否则，它们将被同步调用，过渡会立即完成。
-
-
-
-
-## 使用transition-group元素实现列表动画
-
-现在的场景是：在一个`<ul>`列表中，如果我想给**指定的某个**`li`添加动画效果，该怎么做呢？（需要声明的是，这些`li`是用v-for循环进行遍历的）
-
-如果我们用`<transition>`把`li`包裹起来，就会让所有的`li`都具备了动画，这显然是不可取的。
-
-那该怎么做呢？这里我们就可以用`transition-group`进行包裹。
-
-**代码举例1**：点击添加按钮后，给新增的 item 加个动画
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-    <style>
-        li {
-            border: 1px dashed #999;
-            margin: 5px;
-            line-height: 35px;
-            padding-left: 5px;
-            font-size: 12px;
-            width: 100%;
-        }
-
-        li:hover {
-            background-color: hotpink;
-            transition: all 0.8s ease;  /*鼠标悬停时，出现背景色。让这个背景色的出现，也加一个淡入的动画*/
-        }
-
-        .v-enter,
-        .v-leave-to {
-            opacity: 0;
-            transform: translateY(80px);
-        }
-
-        .v-enter-active,
-        .v-leave-active {
-            transition: all 0.6s ease;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-
-        <div>
-            <label>
-                Id:
-                <input type="text" v-model="id">
-            </label>
-
-            <label>
-                Name:
-                <input type="text" v-model="name">
-            </label>
-
-            <input type="button" value="添加" @click="add">
-        </div>
-
-        <!-- <ul> -->
-        <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
-        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
-        <transition-group>
-            <li v-for="(item, i) in list" :key="item.id">
-                {{item.id}} --- {{item.name}}
-            </li>
-        </transition-group>
-        <!-- </ul> -->
-
-    </div>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                id: '',
-                name: '',
-                list: [
-                    { id: 1, name: '赵高' },
-                    { id: 2, name: '秦桧' },
-                    { id: 3, name: '严嵩' },
-                    { id: 4, name: '魏忠贤' }
-                ]
-            },
-            methods: {
-                add() {
-                    this.list.push({ id: this.id, name: this.name })
-                    this.id = this.name = ''
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-```
-
-运行效果如下：
-
-![](http://img.smyhvae.com/20180616_2240.gif)
-
-
-**改进1**：添加删除item的功能
-
-基于上面的代码，我们来添加**删除item**的功能，代码本应该是这样写：
-
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-    <style>
-        li {
-            border: 1px dashed #999;
-            margin: 5px;
-            line-height: 35px;
-            padding-left: 5px;
-            font-size: 12px;
-            width: 100%;
-        }
-
-        li:hover {
-            background-color: hotpink;
-            transition: all 0.8s ease;
-            /*鼠标悬停时，出现背景色。让这个背景色的出现，也加一个淡入的动画*/
-        }
-
-        .v-enter,
-        .v-leave-to {
-            opacity: 0;
-            transform: translateY(80px);
-        }
-
-        .v-enter-active,
-        .v-leave-active {
-            transition: all 0.6s ease;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-
-        <div>
-            <label>
-                Id:
-                <input type="text" v-model="id">
-            </label>
-
-            <label>
-                Name:
-                <input type="text" v-model="name">
-            </label>
-
-            <input type="button" value="添加" @click="add">
-        </div>
-
-        <!-- <ul> -->
-        <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
-        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
-        <transition-group>
-            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
-                {{item.id}} --- {{item.name}}
-            </li>
-        </transition-group>
-        <!-- </ul> -->
-
-    </div>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                id: '',
-                name: '',
-                list: [
-                    { id: 1, name: '赵高' },
-                    { id: 2, name: '秦桧' },
-                    { id: 3, name: '严嵩' },
-                    { id: 4, name: '魏忠贤' }
-                ]
-            },
-            methods: {
-                add() {
-                    this.list.push({ id: this.id, name: this.name })
-                    this.id = this.name = ''
-                },
-                del(i) {
-                    this.list.splice(i, 1);
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-
-```
-
-运行效果如下：
-
-![](http://img.smyhvae.com/20180617_1555.gif)
-
-**改进2:**：
-
-上图中，我们发现，当我删除第2个item时，**第3、第4个item在往上移动的过程比会较突兀**。为了改进这个地方，我们可以给`.v-move`、`.v-leave-active`加一些动画属性。最终，完整版代码如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-    <style>
-        li {
-            border: 1px dashed #999;
-            margin: 5px;
-            line-height: 35px;
-            padding-left: 5px;
-            font-size: 12px;
-            width: 100%;
-        }
-
-        li:hover {
-            background-color: hotpink;
-            transition: all 0.8s ease;
-            /*鼠标悬停时，出现背景色。让这个背景色的出现，也加一个淡入的动画*/
-        }
-
-        .v-enter,
-        .v-leave-to {
-            opacity: 0;
-            transform: translateY(80px);
-        }
-
-        .v-enter-active,
-        .v-leave-active {
-            transition: all 0.6s ease;
-        }
-
-        /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
-        .v-move {
-            transition: all 0.6s ease;
-        }
-
-        .v-leave-active {
-            position: absolute;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-
-        <div>
-            <label>
-                Id:
-                <input type="text" v-model="id">
-            </label>
-
-            <label>
-                Name:
-                <input type="text" v-model="name">
-            </label>
-
-            <input type="button" value="添加" @click="add">
-        </div>
-
-        <!-- <ul> -->
-        <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
-        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
-        <transition-group>
-            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
-                {{item.id}} --- {{item.name}}
-            </li>
-        </transition-group>
-        <!-- </ul> -->
-
-    </div>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                id: '',
-                name: '',
-                list: [
-                    { id: 1, name: '赵高' },
-                    { id: 2, name: '秦桧' },
-                    { id: 3, name: '严嵩' },
-                    { id: 4, name: '魏忠贤' }
-                ]
-            },
-            methods: {
-                add() {
-                    this.list.push({ id: this.id, name: this.name })
-                    this.id = this.name = ''
-                },
-                del(i) {
-                    this.list.splice(i, 1);
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-```
-
-运行效果如下：
-
-![](http://img.smyhvae.com/20180617_1556.gif)
-
-### transition-group中appear和tag属性的作用
-
-我们可以在上面的代码基础之上，给transition-group加上`appear`属性，这样的话，可以让transition-group包裹的所有DOM元素在刷新时，有**淡入效果**。
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-    <style>
-        li {
-            border: 1px dashed #999;
-            margin: 5px;
-            line-height: 35px;
-            padding-left: 5px;
-            font-size: 12px;
-            width: 100%;
-        }
-
-        li:hover {
-            background-color: hotpink;
-            transition: all 0.8s ease;
-        }
-
-        .v-enter,
-        .v-leave-to {
-            opacity: 0;
-            transform: translateY(80px);
-        }
-
-        .v-enter-active,
-        .v-leave-active {
-            transition: all 0.6s ease;
-        }
-
-        /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
-
-        .v-move {
-            transition: all 0.6s ease;
-        }
-
-        .v-leave-active {
-            position: absolute;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-
-        <div>
-            <label>
-                Id:
-                <input type="text" v-model="id">
-            </label>
-
-            <label>
-                Name:
-                <input type="text" v-model="name">
-            </label>
-
-            <input type="button" value="添加" @click="add">
-        </div>
-
-        <ul>
-            <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
-            <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
-            <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
-            <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
-            <transition-group appear>
-                <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
-                    {{item.id}} --- {{item.name}}
-                </li>
-            </transition-group>
-        </ul>
-
-    </div>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                id: '',
-                name: '',
-                list: [
-                    { id: 1, name: '赵高' },
-                    { id: 2, name: '秦桧' },
-                    { id: 3, name: '严嵩' },
-                    { id: 4, name: '魏忠贤' }
-                ]
-            },
-            methods: {
-                add() {
-                    this.list.push({ id: this.id, name: this.name })
-                    this.id = this.name = ''
-                },
-                del(i) {
-                    this.list.splice(i, 1)
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-```
-
-![](http://img.smyhvae.com/20180617_1600.gif)
-
-**改进**：`transition-group`的`tag`属性
-
-上面的代码中，我们审查一下代码元素会发现，用`transition-group`包裹的元素，会被默认套上一层`<span>`：
-
-![](http://img.smyhvae.com/20180617_1620.png)
-
-这个`<span>`虽然没有太大副作用，但是不符合代码规范。为了解决这个问题，我们可以通过`tag`属性给`transition-group`包谷的元素套上一层`<ul>`，然后把现有的`<ul>`注释掉，就可以了。最终代码如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-    <style>
-        li {
-            border: 1px dashed #999;
-            margin: 5px;
-            line-height: 35px;
-            padding-left: 5px;
-            font-size: 12px;
-            width: 100%;
-        }
-
-        li:hover {
-            background-color: hotpink;
-            transition: all 0.8s ease;
-        }
-
-
-
-        .v-enter,
-        .v-leave-to {
-            opacity: 0;
-            transform: translateY(80px);
-        }
-
-        .v-enter-active,
-        .v-leave-active {
-            transition: all 0.6s ease;
-        }
-
-        /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
-
-        .v-move {
-            transition: all 0.6s ease;
-        }
-
-        .v-leave-active {
-            position: absolute;
-        }
-    </style>
-</head>
-
-<body>
-    <div id="app">
-
-        <div>
-            <label>
-                Id:
-                <input type="text" v-model="id">
-            </label>
-
-            <label>
-                Name:
-                <input type="text" v-model="name">
-            </label>
-
-            <input type="button" value="添加" @click="add">
-        </div>
-
-        <!-- <ul> -->
-        <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
-        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
-        <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
-        <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
-        <transition-group appear tag="ul">
-            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
-                {{item.id}} --- {{item.name}}
-            </li>
-        </transition-group>
-        <!-- </ul> -->
-
-    </div>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                id: '',
-                name: '',
-                list: [
-                    { id: 1, name: '赵高' },
-                    { id: 2, name: '秦桧' },
-                    { id: 3, name: '严嵩' },
-                    { id: 4, name: '魏忠贤' }
-                ]
-            },
-            methods: {
-                add() {
-                    this.list.push({ id: this.id, name: this.name })
-                    this.id = this.name = ''
-                },
-                del(i) {
-                    this.list.splice(i, 1)
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-```
-
-这样的话，审查元素的效果如下：
-
-![](http://img.smyhvae.com/20180617_1621.png)
-
+04-Vue动画.md
+
+
+
+## 前言
+
+动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。
+
+
+## 使用过渡类名实现动画
+
+### 官方文档的截图
+
+过渡类名如下：
+
+![](http://img.smyhvae.com/20180616_1555.png)
+
+动画进入：
+
+- v-enter：动画进入之前的**初始**状态
+
+- v-enter-to：动画进入之后的**结束**状态
+
+- v-enter-active：动画进入的时间段
+
+PS：第一、第二个是时间点；第三个是时间段。
+
+动画离开：
+
+- v-leave：动画离开之前的**初始**状态
+
+- v-leave-to：动画离开之后的**结束**状态
+
+- v-leave-active：动画离开的时间段
+
+PS：第一、第二个是时间点；第三个是时间段。
+
+
+### 使用举例（通过Vue的过渡类名来实现）
+
+`v-enter-to`和`v-leave`的状态是一样的。而且一般来说，`v-enter`和`v-leave-to`的状态也是一致的。所以，我们可以把这四个状态写成两组。
+
+现在我们来做个例子：点击按钮时，让div显示/隐藏。
+
+**1、引入**：
+
+如果我们不使用动画，应该是这样做：
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <input type="button" value="toggle" @click="flag=!flag">
+        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
+        <h3 v-if="flag">这是一个H3</h3>
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                flag: false
+            },
+            methods: {}
+        });
+    </script>
+</body>
+
+</html>
+```
+
+
+**2、使用动画**：（通过Vue的过渡类名来实现）
+
+现在，我们加**淡入淡出**的动画，让div显示和隐藏。代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->
+    <style>
+        /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
+
+        /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
+
+        .v-enter,
+        .v-leave-to {
+            opacity: 0;
+        }
+
+        /* v-enter-active 【入场动画的时间段】 */
+
+        /* v-leave-active 【离场动画的时间段】 */
+
+        .v-enter-active,
+        .v-leave-active {
+            transition: all 1s ease;   /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <input type="button" value="toggle" @click="flag=!flag">
+        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
+        <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
+        <!-- transition 元素，是 Vue 官方提供的 -->
+        <transition>
+            <h3 v-if="flag">这是一个H3</h3>
+        </transition>
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                flag: false
+            },
+            methods: {}
+        });
+    </script>
+</body>
+
+</html>
+
+```
+
+
+上方代码中，我们使用vue提供的`<transition>`标签把需要被动画控制的元素，包裹起来；然后使用`.v-enter`、`.v-leave-to`等进行动画的定义。
+
+运行效果如下：
+
+![](http://img.smyhvae.com/20180615_2200.gif)
+
+
+**3、再加一个tramsform属性进行位移**：
+
+
+我们在上方代码的基础之上，加一个tramsform属性，让动画有一个位移的效果。完整代码如下：
+
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <!-- 2. 自定义两组样式，来控制 transition 内部的元素实现动画 -->
+    <style>
+        /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
+
+        /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
+
+        .v-enter,
+        .v-leave-to {
+            opacity: 0;
+            /* 在动画中加入位移 */
+            transform: translateX(80px); /* smyhvae提示：v-enter表示，一开始让DOM元素处于靠右80px的位置 */
+        }
+
+        /* v-enter-active 【入场动画的时间段】 */
+
+        /* v-leave-active 【离场动画的时间段】 */
+
+        .v-enter-active,
+        .v-leave-active {
+            transition: all 1s ease;   /*期间，设置过渡的属性：all表示所有的属性、时间为1秒、过渡的状态*/
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <input type="button" value="toggle" @click="flag=!flag">
+        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
+        <!-- 1. 使用 transition 元素，把 需要被动画控制的元素，包裹起来 -->
+        <!-- transition 元素，是 Vue 官方提供的 -->
+        <transition>
+            <h3 v-if="flag">这是一个H3</h3>
+        </transition>
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                flag: false
+            },
+            methods: {}
+        });
+    </script>
+</body>
+
+</html>
+```
+
+
+效果如下：
+
+![](http://img.smyhvae.com/20180615_2205.gif)
+
+### 修改过渡类名的前缀
+
+在上一小段中，`.v-enter`、`.v-leave-to`这些过渡类名都是以`v-`开头的。这样做，会有一个局限性：假设有两个DOM元素都用`<transition>`进行了包裹，那这两个DOM元素就都具备了`v-`中所定义的动画。
+
+那**如果我们想把两个DOM元素的动画进行分开定义**，该怎么做呢？这里，我们可以通过修改过渡类名的前缀来做。比如：
+
+第一步：（自定义别名）
+
+```html
+    <transition name="my">
+      <h6 v-if="flag2">这是一个H6</h6>
+    </transition>
+```
+
+上方代码中，我们加了`name="my"`。
+
+第二步：（我们就可以使用 `my-enter`、`.my-leave-to`这些类名了）
+
+```css
+    .my-enter,
+    .my-leave-to {
+      opacity: 0;
+      transform: translateY(70px);
+    }
+
+```
+
+
+完整代码举例如下；
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="./lib/vue-2.4.0.js"></script>
+    <style>
+        /* 自定义第一组样式，来控制 transition 内部的元素实现动画 */
+
+        /* v-enter 【这是一个时间点】 是进入之前，元素的起始状态，此时还没有开始进入 */
+
+        /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
+
+        .v-enter,
+        .v-leave-to {
+            opacity: 0;
+            transform: translateX(150px);
+        }
+
+        /* v-enter-active 【入场动画的时间段】 */
+
+        /* v-leave-active 【离场动画的时间段】 */
+
+        .v-enter-active,
+        .v-leave-active {
+            transition: all 0.8s ease;
+        }
+
+
+        /* 自定义第二组样式，来控制 transition 内部的元素实现动画。这次，我们通过自己起的别名`name`来作为指令 */
+
+        .my-enter,
+        .my-leave-to {
+            opacity: 0;
+            transform: translateY(70px);
+        }
+
+        .my-enter-active,
+        .my-leave-active {
+            transition: all 1s ease;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <!-- 第一组 -->
+        <input type="button" value="toggle" @click="flag=!flag">
+        <!-- 使用 transition 元素，把 需要被动画控制的元素 h3，包裹起来 -->
+        <!-- transition 元素，是 Vue 官方提供的 -->
+        <transition>
+            <h3 v-if="flag">这是一个H3</h3>
+        </transition>
+
+        <hr>
+
+        <!-- 第二组 -->
+        <input type="button" value="toggle2" @click="flag2=!flag2">
+        <!-- 使用 transition 元素，把 需要被动画控制的元素 h6，包裹起来 -->
+        <!-- transition 元素，是 Vue 官方提供的 -->
+        <!-- 【重点】在这里，我们给这个transition定义一个别名，叫`name`，然后，我们就可以通过 `.my-enter`等 来定义动画的样式【重要】 -->
+        <transition name="my">
+            <h6 v-if="flag2">这是一个H6</h6>
+        </transition>
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                flag: false,
+                flag2: false
+            },
+            methods: {}
+        });
+    </script>
+</body>
+
+</html>
+```
+
+运行效果如下：
+
+![](http://img.smyhvae.com/20180616_1513.gif)
+
+## 使用第三方animate.css类库实现动画
+
+animate.css网址：
+
+- 官方网站：<https://daneden.github.io/animate.css/>
+
+
+**代码举例**：
+
+下面的代码中，我们使用animate.css提供的`bounceIn`、`bounceOut`这两个类来做入场、离场的动画。代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <link rel="stylesheet" href="animate3.6.0.css">
+    <!-- 入场 bounceIn    离场 bounceOut -->
+</head>
+
+<body>
+    <div id="app">
+        <input type="button" value="toggle" @click="flag=!flag">
+        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
+        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut">
+            <h3 v-if="flag">这是一个H3</h3>
+        </transition>
+
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                flag: false
+            },
+            methods: {}
+        });
+    </script>
+</body>
+
+</html>
+```
+
+
+
+上面的代码中，注意：
+
+注意1：`enter-active-class`和`leave-active-class`这两个类名是Vue动画里的关键词，不能写成自己**随意起**的类名。
+
+注意2：`bounceIn`、`bounceOut`这两个类不能直接使用，要在前面加上`animated`这个类；否则动画是不会生效的。当然，上面的代码中，我们还可以把`class = animated`这个代码移到`<h3>`标签里，效果是一样的，如下：
+
+```html
+        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
+        <transition enter-active-class="bounceIn" leave-active-class="bounceOut">
+            <h3 v-if="flag" class="animated">这是一个H3</h3>
+        </transition>
+
+```
+
+
+运行效果如下：
+
+![](http://img.smyhvae.com/20180616_1538.gif)
+
+**改进1**：（统一设置入场、出场动画的持续时间）
+
+我们把上面的代码改进一下，如果我们想给入场、出场动画设置持续的时间，可以使用`:duration`来做。如下：
+
+
+```html
+        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
+        <!-- 使用 :duration="毫秒值" 来统一设置 入场 和 离场 时候的动画时长 -->
+        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="500">
+            <h3 v-if="flag">这是一个H3</h3>
+        </transition>
+```
+
+
+**改进2**：（分别设置入场、出场动画的持续时间）
+
+```html
+        <!-- 需求： 点击按钮，让 h3 显示，再点击，让 h3 隐藏 -->
+        <!-- 使用  :duration="{ enter: 1000, leave: 300 }"  来分别设置 入场的时长 和 离场的时长  -->
+        <transition enter-active-class="animated bounceIn" leave-active-class="animated bounceOut" :duration="{ enter: 1000, leave: 300 }">
+            <h3 v-if="flag">这是一个H3</h3>
+        </transition>
+```
+
+
+## 钩子函数实现半场动画
+
+只有出场动画、没有离场动画，这种就是属于半场动画。比如你把一件商品加入收藏，会出现一个动画；当再次点击收藏按钮的时候却看不到动画效果，这就说明，只有前一半才有动画。
+
+
+半场动画，可以使用钩子函数来实现。
+
+
+### 动画的钩子函数介绍
+
+可以在属性中声明 JavaScript 钩子函数：（这八个钩子函数可以理解成是动画的生命周期）
+
+```html
+<transition
+  v-on:before-enter="beforeEnter"
+  v-on:enter="enter"
+  v-on:after-enter="afterEnter"
+  v-on:enter-cancelled="enterCancelled"
+
+  v-on:before-leave="beforeLeave"
+  v-on:leave="leave"
+  v-on:after-leave="afterLeave"
+  v-on:leave-cancelled="leaveCancelled"
+>
+  <!-- DOM元素 -->
+</transition>
+```
+
+
+我们可以这样理解：上面这八个钩子函数（四个入场、四个离场），对应了八个事件，我们要紧接着在methods中定义八个函数。
+
+如果要定义半场动画，做法是：直接在methods中写入场动画的函数，不写离场动画的函数即可。
+
+### 举例：使用钩子函数模拟小球半场动画
+
+现在要实现的例子是：点击按钮后，让小球进行移动。完整代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <style>
+        .ball {
+            width: 15px;
+            height: 15px;
+            border-radius: 50%;
+            background-color: red;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+        <input type="button" value="加入购物车" @click="flag=!flag">
+        <!-- 1. 使用 transition 元素把 小球包裹起来 -->
+        <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
+            <div class="ball" v-show="flag"></div>
+        </transition>
+    </div>
+
+    <script>
+
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                flag: false
+            },
+            methods: {
+                // 注意： 动画钩子函数的第一个参数：el，表示 要执行动画的那个DOM元素，是个原生的 JS DOM对象
+                // 我们可以认为 ， el 是通过 document.getElementById('') 方式获取到的原生JS DOM对象
+                beforeEnter(el) {
+                    // beforeEnter 表示动画入场之前，此时，动画尚未开始，可以 在 beforeEnter 中，设置元素开始动画之前的起始样式
+                    // 设置小球开始动画之前的 起始位置
+                    el.style.transform = "translate(0, 0)"   // smyhvae提示：一开始的时候，让小球处于（0，0）的位置
+                },
+                enter(el, done) {
+                    // 【注意1】el.offsetWidth 这句话，没有实际的作用，但是，如果不写，出不来动画效果。可以认为 el.offsetWidth 会强制动画刷新
+                    el.offsetWidth
+                    // enter 表示动画 开始之后的样式，这里，可以设置小球完成动画之后的，结束状态
+                    el.style.transform = "translate(150px, 300px)" // smyhvae 提示：让小球从（0，0）移动到 (150px, 300px)
+                    el.style.transition = 'all 1s ease'
+
+                    // 【注意2】这里的 done， 起始就是 afterEnter 这个函数，也就是说：done 是 afterEnter 函数的引用
+                    done()
+                },
+                afterEnter(el) {
+                    // 动画完成之后，会调用 afterEnter
+                    // console.log('ok')
+                    // 动画结束后，让小球消失（直接让 flag 取反即可）
+                    this.flag = !this.flag  // 因为最开始的时候，小球就是处于消失的状态，这行代码可以让小球的动画重新开始
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+
+```
+
+
+运行效果如下：（我们可以用这种动画效果，做类似于“加入购物车”的动画效果）
+
+![](http://img.smyhvae.com/20180616_1618.gif)
+
+上面的代码中，有两个地方要注意：
+
+
+**注意1**：
+
+`el.offsetWidth`这行代码不能少。虽然这行代码没有实际的意义，但是少了之后，动画效果出不来：
+
+![](http://img.smyhvae.com/20180616_1620.gif)
+
+当然，我们也可以把这行代码换成`el.offsetHeight`、`el.offsetLeft`、`el.offsetTop`之类的，只要包含了offset就行。
+
+
+**注意2**：
+
+`enter()`函数里，函数的第二个参数要加上`done`，函数体的最后一行要写`done()`，表示**立即执行**后面的`afterEnter()`函数；如果没有这个`done`，则会**延迟执行**后面的`afterEnter()`函数：
+
+![](http://img.smyhvae.com/20180616_2145.gif)
+
+Vue官方文档的解释是这样：
+
+
+ > 当只用 JavaScript 过渡的时候，在`enter`和`leave`中必须使用`done`进行回调。否则，它们将被同步调用，过渡会立即完成。
+
+
+
+
+## 使用transition-group元素实现列表动画
+
+现在的场景是：在一个`<ul>`列表中，如果我想给**指定的某个**`li`添加动画效果，该怎么做呢？（需要声明的是，这些`li`是用v-for循环进行遍历的）
+
+如果我们用`<transition>`把`li`包裹起来，就会让所有的`li`都具备了动画，这显然是不可取的。
+
+那该怎么做呢？这里我们就可以用`transition-group`进行包裹。
+
+**代码举例1**：点击添加按钮后，给新增的 item 加个动画
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <style>
+        li {
+            border: 1px dashed #999;
+            margin: 5px;
+            line-height: 35px;
+            padding-left: 5px;
+            font-size: 12px;
+            width: 100%;
+        }
+
+        li:hover {
+            background-color: hotpink;
+            transition: all 0.8s ease;  /*鼠标悬停时，出现背景色。让这个背景色的出现，也加一个淡入的动画*/
+        }
+
+        .v-enter,
+        .v-leave-to {
+            opacity: 0;
+            transform: translateY(80px);
+        }
+
+        .v-enter-active,
+        .v-leave-active {
+            transition: all 0.6s ease;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+
+        <div>
+            <label>
+                Id:
+                <input type="text" v-model="id">
+            </label>
+
+            <label>
+                Name:
+                <input type="text" v-model="name">
+            </label>
+
+            <input type="button" value="添加" @click="add">
+        </div>
+
+        <!-- <ul> -->
+        <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
+        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
+        <transition-group>
+            <li v-for="(item, i) in list" :key="item.id">
+                {{item.id}} --- {{item.name}}
+            </li>
+        </transition-group>
+        <!-- </ul> -->
+
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                id: '',
+                name: '',
+                list: [
+                    { id: 1, name: '赵高' },
+                    { id: 2, name: '秦桧' },
+                    { id: 3, name: '严嵩' },
+                    { id: 4, name: '魏忠贤' }
+                ]
+            },
+            methods: {
+                add() {
+                    this.list.push({ id: this.id, name: this.name })
+                    this.id = this.name = ''
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+```
+
+运行效果如下：
+
+![](http://img.smyhvae.com/20180616_2240.gif)
+
+
+**改进1**：添加删除item的功能
+
+基于上面的代码，我们来添加**删除item**的功能，代码本应该是这样写：
+
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <style>
+        li {
+            border: 1px dashed #999;
+            margin: 5px;
+            line-height: 35px;
+            padding-left: 5px;
+            font-size: 12px;
+            width: 100%;
+        }
+
+        li:hover {
+            background-color: hotpink;
+            transition: all 0.8s ease;
+            /*鼠标悬停时，出现背景色。让这个背景色的出现，也加一个淡入的动画*/
+        }
+
+        .v-enter,
+        .v-leave-to {
+            opacity: 0;
+            transform: translateY(80px);
+        }
+
+        .v-enter-active,
+        .v-leave-active {
+            transition: all 0.6s ease;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+
+        <div>
+            <label>
+                Id:
+                <input type="text" v-model="id">
+            </label>
+
+            <label>
+                Name:
+                <input type="text" v-model="name">
+            </label>
+
+            <input type="button" value="添加" @click="add">
+        </div>
+
+        <!-- <ul> -->
+        <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
+        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
+        <transition-group>
+            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
+                {{item.id}} --- {{item.name}}
+            </li>
+        </transition-group>
+        <!-- </ul> -->
+
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                id: '',
+                name: '',
+                list: [
+                    { id: 1, name: '赵高' },
+                    { id: 2, name: '秦桧' },
+                    { id: 3, name: '严嵩' },
+                    { id: 4, name: '魏忠贤' }
+                ]
+            },
+            methods: {
+                add() {
+                    this.list.push({ id: this.id, name: this.name })
+                    this.id = this.name = ''
+                },
+                del(i) {
+                    this.list.splice(i, 1);
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+
+```
+
+运行效果如下：
+
+![](http://img.smyhvae.com/20180617_1555.gif)
+
+**改进2:**：
+
+上图中，我们发现，当我删除第2个item时，**第3、第4个item在往上移动的过程比会较突兀**。为了改进这个地方，我们可以给`.v-move`、`.v-leave-active`加一些动画属性。最终，完整版代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <style>
+        li {
+            border: 1px dashed #999;
+            margin: 5px;
+            line-height: 35px;
+            padding-left: 5px;
+            font-size: 12px;
+            width: 100%;
+        }
+
+        li:hover {
+            background-color: hotpink;
+            transition: all 0.8s ease;
+            /*鼠标悬停时，出现背景色。让这个背景色的出现，也加一个淡入的动画*/
+        }
+
+        .v-enter,
+        .v-leave-to {
+            opacity: 0;
+            transform: translateY(80px);
+        }
+
+        .v-enter-active,
+        .v-leave-active {
+            transition: all 0.6s ease;
+        }
+
+        /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
+        .v-move {
+            transition: all 0.6s ease;
+        }
+
+        .v-leave-active {
+            position: absolute;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+
+        <div>
+            <label>
+                Id:
+                <input type="text" v-model="id">
+            </label>
+
+            <label>
+                Name:
+                <input type="text" v-model="name">
+            </label>
+
+            <input type="button" value="添加" @click="add">
+        </div>
+
+        <!-- <ul> -->
+        <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
+        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
+        <transition-group>
+            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
+                {{item.id}} --- {{item.name}}
+            </li>
+        </transition-group>
+        <!-- </ul> -->
+
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                id: '',
+                name: '',
+                list: [
+                    { id: 1, name: '赵高' },
+                    { id: 2, name: '秦桧' },
+                    { id: 3, name: '严嵩' },
+                    { id: 4, name: '魏忠贤' }
+                ]
+            },
+            methods: {
+                add() {
+                    this.list.push({ id: this.id, name: this.name })
+                    this.id = this.name = ''
+                },
+                del(i) {
+                    this.list.splice(i, 1);
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+```
+
+运行效果如下：
+
+![](http://img.smyhvae.com/20180617_1556.gif)
+
+### transition-group中appear和tag属性的作用
+
+我们可以在上面的代码基础之上，给transition-group加上`appear`属性，这样的话，可以让transition-group包裹的所有DOM元素在刷新时，有**淡入效果**。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <style>
+        li {
+            border: 1px dashed #999;
+            margin: 5px;
+            line-height: 35px;
+            padding-left: 5px;
+            font-size: 12px;
+            width: 100%;
+        }
+
+        li:hover {
+            background-color: hotpink;
+            transition: all 0.8s ease;
+        }
+
+        .v-enter,
+        .v-leave-to {
+            opacity: 0;
+            transform: translateY(80px);
+        }
+
+        .v-enter-active,
+        .v-leave-active {
+            transition: all 0.6s ease;
+        }
+
+        /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
+
+        .v-move {
+            transition: all 0.6s ease;
+        }
+
+        .v-leave-active {
+            position: absolute;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+
+        <div>
+            <label>
+                Id:
+                <input type="text" v-model="id">
+            </label>
+
+            <label>
+                Name:
+                <input type="text" v-model="name">
+            </label>
+
+            <input type="button" value="添加" @click="add">
+        </div>
+
+        <ul>
+            <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
+            <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
+            <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
+            <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
+            <transition-group appear>
+                <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
+                    {{item.id}} --- {{item.name}}
+                </li>
+            </transition-group>
+        </ul>
+
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                id: '',
+                name: '',
+                list: [
+                    { id: 1, name: '赵高' },
+                    { id: 2, name: '秦桧' },
+                    { id: 3, name: '严嵩' },
+                    { id: 4, name: '魏忠贤' }
+                ]
+            },
+            methods: {
+                add() {
+                    this.list.push({ id: this.id, name: this.name })
+                    this.id = this.name = ''
+                },
+                del(i) {
+                    this.list.splice(i, 1)
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+```
+
+![](http://img.smyhvae.com/20180617_1600.gif)
+
+**改进**：`transition-group`的`tag`属性
+
+上面的代码中，我们审查一下代码元素会发现，用`transition-group`包裹的元素，会被默认套上一层`<span>`：
+
+![](http://img.smyhvae.com/20180617_1620.png)
+
+这个`<span>`虽然没有太大副作用，但是不符合代码规范。为了解决这个问题，我们可以通过`tag`属性给`transition-group`包谷的元素套上一层`<ul>`，然后把现有的`<ul>`注释掉，就可以了。最终代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+    <style>
+        li {
+            border: 1px dashed #999;
+            margin: 5px;
+            line-height: 35px;
+            padding-left: 5px;
+            font-size: 12px;
+            width: 100%;
+        }
+
+        li:hover {
+            background-color: hotpink;
+            transition: all 0.8s ease;
+        }
+
+
+
+        .v-enter,
+        .v-leave-to {
+            opacity: 0;
+            transform: translateY(80px);
+        }
+
+        .v-enter-active,
+        .v-leave-active {
+            transition: all 0.6s ease;
+        }
+
+        /* 下面的 .v-move 和 .v-leave-active 配合使用，能够实现列表后续的元素，渐渐地漂上来的效果 */
+
+        .v-move {
+            transition: all 0.6s ease;
+        }
+
+        .v-leave-active {
+            position: absolute;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="app">
+
+        <div>
+            <label>
+                Id:
+                <input type="text" v-model="id">
+            </label>
+
+            <label>
+                Name:
+                <input type="text" v-model="name">
+            </label>
+
+            <input type="button" value="添加" @click="add">
+        </div>
+
+        <!-- <ul> -->
+        <!-- 在实现列表过渡的时候，如果需要过渡的元素，是通过 v-for 循环渲染出来的，不能使用 transition 包裹，需要使用 transitionGroup -->
+        <!-- 如果要为 v-for 循环创建的元素设置动画，必须为每一个 元素 设置 :key 属性 -->
+        <!-- 给 ransition-group 添加 appear 属性，实现页面刚展示出来时候，入场时候的效果 -->
+        <!-- 通过 为 transition-group 元素，设置 tag 属性，指定 transition-group 渲染为指定的元素，如果不指定 tag 属性，默认，渲染为 span 标签 -->
+        <transition-group appear tag="ul">
+            <li v-for="(item, i) in list" :key="item.id" @click="del(i)">
+                {{item.id}} --- {{item.name}}
+            </li>
+        </transition-group>
+        <!-- </ul> -->
+
+    </div>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                id: '',
+                name: '',
+                list: [
+                    { id: 1, name: '赵高' },
+                    { id: 2, name: '秦桧' },
+                    { id: 3, name: '严嵩' },
+                    { id: 4, name: '魏忠贤' }
+                ]
+            },
+            methods: {
+                add() {
+                    this.list.push({ id: this.id, name: this.name })
+                    this.id = this.name = ''
+                },
+                del(i) {
+                    this.list.splice(i, 1)
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+```
+
+这样的话，审查元素的效果如下：
+
+![](http://img.smyhvae.com/20180617_1621.png)
+
diff --git a/21-Vue基础/06-Vue组件之间的传值.md b/21-Vue基础/06-Vue组件之间的传值.md
index 6014489..7ea32c9 100644
--- a/21-Vue基础/06-Vue组件之间的传值.md
+++ b/21-Vue基础/06-Vue组件之间的传值.md
@@ -1,99 +1,99 @@
-
-
-## 父组件向子组件传值
-
-
-我们可以这样理解：Vue实例就是一个**父组件**，而我们自定义的组件（包括全局组件、私有组件）就是**子组件**。
-
-需要注意的是，子组件不能直接使用父组件中的数据。**父组件可以通过`props`属性向子组件传值**。
-
-代码举例：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-    <div id="app">
-        <!--第二步：父组件在引用子组件的时候， 通过 属性绑定（v-bind:）的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
-        <component1 v-bind:parent-msg="msg"></component1>
-    </div>
-
-    <!-- 定义子组件的模板 -->
-    <template id="myTemplate">
-        <h1 @click="change">我是子组件。我想使用父组件中的数据parentMsg： {{ parentMsg }}</h1>
-    </template>
-
-    <script>
-        // 创建 Vue 实例，得到 ViewModel
-        var vm = new Vue({
-            el: '#app',
-            data: {
-                msg: '父组件中的数据123'
-            },
-            methods: {},
-            components: {
-                // 子组件默认无法访问到 父组件中的 data 中的数据 和 methods 中的方法
-                component1: {
-                    template: '#myTemplate',
-                    data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
-                        // data 上的数据，都是可读可写的
-                        return {
-                            title: '子组件私有的数据 title',
-                            content: '子组件私有的数据 content'
-                        }
-                    },
-                    // 注意： 组件中的 所有 props 中的数据，都是通过 父组件 传递给子组件的
-                    // props 中的数据，都是只读的，无法重新赋值（也就是说，）
-                    props: ['parentMsg'], // 第一步：把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
-                    directives: {},
-                    filters: {},
-                    components: {},
-                    methods: {
-                        change() {
-                            // 下面这行会报错，因为子组件不要直接修改父组件中的data数据
-                            // this.parentmsg = '被修改了'
-                        }
-                    }
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-```
-
-
-效果如下：
-
-20180618_2350.png
-
-代码截图如下：
-
-20180618_2355.png
-
-
-**父组件给字组件传值的步骤**：
-
-> 根据上方截图，我们可以总结出父组件给子组件传值的步骤。
-
-子组件中，data中的数据和props中的数据的区别：
-
--
-
-
-- data中的数据是可读可写的；props中的属性只是可读的，无法重新赋值，重新赋值会报错（也就是说，子组件不要直接去修改父组件中的数据）。
-
-
-
-
-
+
+
+## 父组件向子组件传值
+
+
+我们可以这样理解：Vue实例就是一个**父组件**，而我们自定义的组件（包括全局组件、私有组件）就是**子组件**。
+
+需要注意的是，子组件不能直接使用父组件中的数据。**父组件可以通过`props`属性向子组件传值**。
+
+代码举例：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+    <div id="app">
+        <!--第二步：父组件在引用子组件的时候， 通过 属性绑定（v-bind:）的形式, 把 需要传递给 子组件的数据，以属性绑定的形式，传递到子组件内部，供子组件使用 -->
+        <component1 v-bind:parent-msg="msg"></component1>
+    </div>
+
+    <!-- 定义子组件的模板 -->
+    <template id="myTemplate">
+        <h1 @click="change">我是子组件。我想使用父组件中的数据parentMsg： {{ parentMsg }}</h1>
+    </template>
+
+    <script>
+        // 创建 Vue 实例，得到 ViewModel
+        var vm = new Vue({
+            el: '#app',
+            data: {
+                msg: '父组件中的数据123'
+            },
+            methods: {},
+            components: {
+                // 子组件默认无法访问到 父组件中的 data 中的数据 和 methods 中的方法
+                component1: {
+                    template: '#myTemplate',
+                    data() { // 注意： 子组件中的 data 数据，并不是通过 父组件传递过来的，而是子组件自身私有的，比如： 子组件通过 Ajax ，请求回来的数据，都可以放到 data 身上；
+                        // data 上的数据，都是可读可写的
+                        return {
+                            title: '子组件私有的数据 title',
+                            content: '子组件私有的数据 content'
+                        }
+                    },
+                    // 注意： 组件中的 所有 props 中的数据，都是通过 父组件 传递给子组件的
+                    // props 中的数据，都是只读的，无法重新赋值（也就是说，）
+                    props: ['parentMsg'], // 第一步：把父组件传递过来的 parentmsg 属性，先在 props 数组中，定义一下，这样，才能使用这个数据
+                    directives: {},
+                    filters: {},
+                    components: {},
+                    methods: {
+                        change() {
+                            // 下面这行会报错，因为子组件不要直接修改父组件中的data数据
+                            // this.parentmsg = '被修改了'
+                        }
+                    }
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+```
+
+
+效果如下：
+
+20180618_2350.png
+
+代码截图如下：
+
+20180618_2355.png
+
+
+**父组件给字组件传值的步骤**：
+
+> 根据上方截图，我们可以总结出父组件给子组件传值的步骤。
+
+子组件中，data中的数据和props中的数据的区别：
+
+-
+
+
+- data中的数据是可读可写的；props中的属性只是可读的，无法重新赋值，重新赋值会报错（也就是说，子组件不要直接去修改父组件中的数据）。
+
+
+
+
+
diff --git a/21-Vue基础/Vue组件.md b/21-Vue基础/Vue组件.md
index a648996..efdfa8d 100644
--- a/21-Vue基础/Vue组件.md
+++ b/21-Vue基础/Vue组件.md
@@ -1,618 +1,618 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-## 子组件的定义和注册
-
-我们在本文的第一段中，通过`Vue.component`形式定义的是**全局组件**。这一段中，我们来讲一下**子组件**。
-
-### 在父组件中定义子组件
-
-比如说，一个`账号`模块是父组件，里面分为`登陆`模块和`注册`模块，这两个晓得模块就可以定义为子组件。
-
-需要注意的是作用域的问题：我们在父组件中定义的子组件，只能在当前父组件的模板中使用；在其他的组件，甚至根组件中，都无法使用。
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-
-    <div id="app">
-        <account>
-
-        </account>
-    </div>
-
-    <script>
-
-        //定义、注册组件
-        Vue.component('account', {
-            template: '<div><h2>账号模块</h2> <login></login></div>',
-            components: {
-                'login': {
-                    template: '<h3>登录模块</h3>'
-                }
-            }
-        });
-
-        new Vue({
-            el: '#app'
-        });
-    </script>
-</body>
-
-</html>
-```
-
-我们发现，既然是定义父亲`<account>`的子组件，那么，子组件`<login>`的调用，只能写在父组件`<account>`的`template`模板中。
-
-显示效果：
-
-![](http://img.smyhvae.com/20180423_1029.png)
-
-
-### 在 Vue 根实例中定义子组件
-
-当然，我们还可以这样做：把整个 Vue 对象当成父亲，这样的话，就可以在 Vue 示例中定义一个子组件。如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-
-    <div id="app">
-        <login> </login>
-    </div>
-
-    <script>
-
-        new Vue({
-            el: '#app',
-            //在Vue实例中定义子组件
-            components: {  // components 是关键字，不能改
-                'login': {
-                    template: '<h3>登录模块</h3>'
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-
-```
-
-这样写的话，我们定义的子组件`<login>`在整个`#app`区域，都是可以使用的。
-
-上面的代码，还有**另外一种写法**：（把子组件的模板定义，存放到变量中）【重要】
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-
-    <div id="app">
-        <login> </login>
-    </div>
-
-    <script>
-
-        //通过变量接收定义的子组件
-        var myLogin = {
-            template: '<h3>登录模块</h3>'   // template 是关键字，不能改
-        }
-
-        new Vue({
-            el: '#app',
-            //在Vue实例中定义子组件
-            components: {  // components 是关键字，不能改
-                'login': myLogin
-
-            }
-        });
-    </script>
-</body>
-
-</html>
-```
-
-注意，在定义子组件时，关键字`components`不要写错了。
-
-## 组件之间的动态切换（暂略）
-
-我们可以利用`<component> `标签的`:is`参数来进行组件之间的切换。
-
-## 父组件向子组件传递数据
-
-我们要记住：父组件通过**属性**的形式，向子组件传递数据。
-
-**引入**：
-
-我们先来看这样一段代码：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-</head>
-<script src="vue2.5.16.js"></script>
-
-<body>
-
-    <div id="app">
-        <!-- 这里是父组件的范围，自定义一个数值 number -->
-        <counter number="1+2"> </counter>
-        <counter number="10+20"> </counter>
-    </div>
-
-    <script>
-        var myCounter = {
-            //【重要】这里是子组件的范围，无法直接获取父组件中的 number
-            template: '<div>我是子组件。{{number}}</div>'
-        }
-
-        var vm = new Vue({
-            el: '#app',
-            components: {
-                'counter': myCounter
-            }
-        });
-    </script>
-
-</body>
-
-</html>
-
-```
-
-上方代码中，我想把父组件里 number 的数值传递给子组件，直接这样写，是看不到效果的：
-
-![](http://img.smyhvae.com/20180424_1520.png)
-
-**1、父组件传值给子组件**：
-
-要通过 props 属性将number进行传递给子组件才可以。代码如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-</head>
-<script src="vue2.5.16.js"></script>
-
-<body>
-
-    <div id="app">
-        <!-- 这里是父组件的范围，自定义一个数值 number -->
-        <counter :number="1+2"> </counter>
-        <counter :number="10+20"> </counter>
-    </div>
-
-    <script>
-        var myCounter = {
-            //这里是子组件的范围
-            props: ['number'], //通过 props 属性将父亲的 number 数据传递给子组件
-            template: '<div>我是子组件。{{number}}</div>'
-        }
-
-        var vm = new Vue({
-            el: '#app',
-            components: {
-                'counter': myCounter
-            }
-        });
-    </script>
-
-</body>
-
-</html>
-```
-
-在`<counter>`标签中，要注意`:number`里的冒号。加上冒号，那么引号里的内容就是表达式（期望的结果）；否则，引号的内容只是字符串：
-
-![](http://img.smyhvae.com/20180424_1530.png)
-
-**2、子组件获取了父组件的数据后，进行求和操作**：
-
-上方代码中，子组件已经获取了父组件的两个number，现在要求：每点击一次子组件，在子组件中将数据加 1。
-
-一般人可能会这样写：（不推荐的写法：子组件直接修改父组件中的数据）
-
-```javascript
-        var myCounter = {
-            //这里是子组件的范围
-            props: ['number'], //通过 props 属性将父亲的数据传递给子组件
-            template: '<div @click="addClick">我是子组件。{{number}}</div>',
-            methods: {
-                addClick: function () {
-                    this.number ++;  //这种写法不推荐。不建议直接操作父组件中的数据
-                }
-
-            }
-        }
-```
-
-上方代码的写法不推荐，因为不建议直接操作父组件中的数据。虽然数据操作成功，但是控制台会报错：
-
-img.png
-
-这样涉及到**单向数据流**的概念：
-
-- 父组件可以传递参数给子组件，但是反过来，子组件不要去修改父组件传递过来的参数。因为同一个参数，可能会传递给多个子组件，避免造成修改的冲突。
-
-既然如此，我可以把父组件中的数据，在子组件中创建**副本**，然后我们去修改这个副本，就不会造成影响了。最终，完整版代码如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-</head>
-<script src="vue2.5.16.js"></script>
-
-<body>
-
-    <div id="app">
-        <!-- 这里是父组件的范围，自定义一个数值 number -->
-        <counter :number="1+2"> </counter>
-        <counter :number="10+20"> </counter>
-    </div>
-
-    <script>
-        var myCounter = {
-            //这里是子组件的范围
-            props: ['number'], //通过 props 属性将父亲的数据传递给子组件
-            data: function () {
-                return {
-                    number2: this.number
-                }
-            },
-            template: '<div @click="addClick">我是子组件。{{number2}}</div>',
-
-            methods: {
-                addClick: function () {
-                    this.number2 ++;   //操作和修改number的副本
-                }
-
-            }
-        }
-
-        var vm = new Vue({
-            el: '#app',
-            components: {
-                'counter': myCounter
-            },
-
-        });
-    </script>
-
-</body>
-
-</html>
-
-```
-
-## 子组件向父组件传值
-
-我们要记住：子组件通过**事件触发**的形式，向父组件传值。
-
-
-
-
-**案例1:**子组件给父组件传递数据
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-
-    <div id="app">
-        <!-- 在外层监听`mysend`事件，进而出发外层的 getData 方法 -->
-        <counter v-on:mysend="getData"> </counter>
-    </div>
-
-    <script>
-
-        Vue.component('counter', {
-            template: '<div @click = "addClick">发送数据给父组件</div>',  //当组件被点击时，触发 addClick 方法
-
-            methods: {
-                addClick: function () {
-                    //第一个参数为键(注意，要小写，不能大写)，第二个参数为值
-                    this.$emit('mysend', 'smyhvae'); //通过键`mysend`事件通知外面，将值`smyhvae`传给父组件
-                }
-            }
-        });
-
-        new Vue({
-            el: '#app',
-            methods: {
-                getData: function (input) { //通过括号里的参数，获取子组件传递过来的值
-                    console.log(input);   //打印结果：smyhvae
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-
-```
-
-
-**案例2**：获取子组件的DOM对象
-
-题目：给两个相同的子组件定义计数器，每点击一次，数值加1。然后在父组件中求和。
-
-步骤（1）：给两个相同的子组件定义计数器，每点击一次，数值加1。代码如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-
-    <div id="app">
-        <counter> </counter>
-        <counter> </counter>
-    </div>
-
-    <script>
-
-        Vue.component('counter', {
-            template: '<div @click = "addClick">当前计数：{{number}}</div>',  //当组件被点击时，调用 addClick 方法
-
-            data: function () {
-                return {
-                    number: 0 //给组件定义一个数据：number
-                }
-            },
-            methods: {
-                addClick: function () {
-                    this.number++;   //定义方法：每点击一次，number 的数值加 1
-                }
-            }
-        });
-
-        new Vue({
-            el: '#app'
-        });
-    </script>
-</body>
-
-</html>
-```
-
-步骤（2）：两个子组件的数值加 1 后，通知父组件。代码如下：
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-
-    <div id="app">
-        <!-- 在外层监听`change`事件，进而出发外层的 myClick 方法 -->
-        <counter @change="myMethod"> </counter>
-        <counter @change="myMethod"> </counter>
-    </div>
-
-    <script>
-
-        Vue.component('counter', {
-            template: '<div @click = "addClick">当前计数：{{number}}</div>',  //当组件被点击时，
-
-            data: function () {
-                return {
-                    number: 0 //给组件定义一个数据：number
-                }
-            },
-            methods: {
-                addClick: function () {
-                    this.number++;   //定义方法：每点击一次，number 的数值加 1
-                    this.$emit('change'); //通过这一行的`change`，通知外面，内部的 addClick 方法已经执行了
-                }
-            }
-        });
-
-        new Vue({
-            el: '#app',
-            methods: {
-                myMethod: function () {
-                    console.log('触发父组件');
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-
-```
-
-上方代码中，通过关键字`emit`通知父组件，子组件里的 addClick 方法被执行了。父组件得知后，执行`myMethod()`方法（这个方法是在Vue实例中定义的，很好理解）
-
-步骤（3）：在父组件中求和
-
-既然父组件已经得知子组件的 addClick 事件，那我们直接在父组件的`myMethod()`里定义求和的方法即可。
-
-```html
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <meta http-equiv="X-UA-Compatible" content="ie=edge">
-    <title>Document</title>
-    <script src="vue2.5.16.js"></script>
-</head>
-
-<body>
-
-    <div id="app">
-        <!-- 在外层监听`change`事件，进而触发外层的 myMethod 方法 -->
-        <counter ref="one" @change="myMethod"> </counter>
-        <counter ref="two" @change="myMethod"> </counter>
-        <div>{{totalData}}</div>
-    </div>
-
-    <script>
-
-        Vue.component('counter', {
-            template: '<div @click = "addClick">当前计数：{{number}}</div>',  //当组件被点击时，触发 addClick方法
-
-            data: function () {
-                return {
-                    number: 0 //给组件定义一个数据：number
-                }
-            },
-            methods: {
-                addClick: function () {
-                    this.number++;   //定义方法：每点击一次，number 的数值加 1
-                    this.$emit('change'); //通过这一行自定义的`change`，通知外面，内部的 addClick 方法已经执行了
-                }
-            }
-        });
-
-        new Vue({
-            el: '#app',
-            data: {
-                totalData: 0
-            },
-            methods: {
-                myMethod: function () {
-                    console.log('触发父组件');
-                    //通过`$refs`获取子组件中各自的number数值
-                    var a1 = this.$refs.one.number;
-                    var a2 = this.$refs.two.number;
-                    //求和，存放在父组件的 totalData 中
-                    this.totalData = a1 + a2;
-
-                    console.log();
-                }
-            }
-        });
-    </script>
-</body>
-
-</html>
-
-```
-
-代码的关键：
-
-- 在`<counter>`标签中，通过 `ref = "xxx"`属性，给各个组件起一个别名，代表组件的引用
-
-- 在父函数`myMethod()`中，通过`this.$refs.xxx`获取组件的引用。我们看一下最后两行代码在控制台的输出便知：（组件里有 number 属性）
-
-![](http://img.smyhvae.com/20180424_1455.png)
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## 子组件的定义和注册
+
+我们在本文的第一段中，通过`Vue.component`形式定义的是**全局组件**。这一段中，我们来讲一下**子组件**。
+
+### 在父组件中定义子组件
+
+比如说，一个`账号`模块是父组件，里面分为`登陆`模块和`注册`模块，这两个晓得模块就可以定义为子组件。
+
+需要注意的是作用域的问题：我们在父组件中定义的子组件，只能在当前父组件的模板中使用；在其他的组件，甚至根组件中，都无法使用。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+    <div id="app">
+        <account>
+
+        </account>
+    </div>
+
+    <script>
+
+        //定义、注册组件
+        Vue.component('account', {
+            template: '<div><h2>账号模块</h2> <login></login></div>',
+            components: {
+                'login': {
+                    template: '<h3>登录模块</h3>'
+                }
+            }
+        });
+
+        new Vue({
+            el: '#app'
+        });
+    </script>
+</body>
+
+</html>
+```
+
+我们发现，既然是定义父亲`<account>`的子组件，那么，子组件`<login>`的调用，只能写在父组件`<account>`的`template`模板中。
+
+显示效果：
+
+![](http://img.smyhvae.com/20180423_1029.png)
+
+
+### 在 Vue 根实例中定义子组件
+
+当然，我们还可以这样做：把整个 Vue 对象当成父亲，这样的话，就可以在 Vue 示例中定义一个子组件。如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+    <div id="app">
+        <login> </login>
+    </div>
+
+    <script>
+
+        new Vue({
+            el: '#app',
+            //在Vue实例中定义子组件
+            components: {  // components 是关键字，不能改
+                'login': {
+                    template: '<h3>登录模块</h3>'
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+
+```
+
+这样写的话，我们定义的子组件`<login>`在整个`#app`区域，都是可以使用的。
+
+上面的代码，还有**另外一种写法**：（把子组件的模板定义，存放到变量中）【重要】
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+    <div id="app">
+        <login> </login>
+    </div>
+
+    <script>
+
+        //通过变量接收定义的子组件
+        var myLogin = {
+            template: '<h3>登录模块</h3>'   // template 是关键字，不能改
+        }
+
+        new Vue({
+            el: '#app',
+            //在Vue实例中定义子组件
+            components: {  // components 是关键字，不能改
+                'login': myLogin
+
+            }
+        });
+    </script>
+</body>
+
+</html>
+```
+
+注意，在定义子组件时，关键字`components`不要写错了。
+
+## 组件之间的动态切换（暂略）
+
+我们可以利用`<component> `标签的`:is`参数来进行组件之间的切换。
+
+## 父组件向子组件传递数据
+
+我们要记住：父组件通过**属性**的形式，向子组件传递数据。
+
+**引入**：
+
+我们先来看这样一段代码：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<script src="vue2.5.16.js"></script>
+
+<body>
+
+    <div id="app">
+        <!-- 这里是父组件的范围，自定义一个数值 number -->
+        <counter number="1+2"> </counter>
+        <counter number="10+20"> </counter>
+    </div>
+
+    <script>
+        var myCounter = {
+            //【重要】这里是子组件的范围，无法直接获取父组件中的 number
+            template: '<div>我是子组件。{{number}}</div>'
+        }
+
+        var vm = new Vue({
+            el: '#app',
+            components: {
+                'counter': myCounter
+            }
+        });
+    </script>
+
+</body>
+
+</html>
+
+```
+
+上方代码中，我想把父组件里 number 的数值传递给子组件，直接这样写，是看不到效果的：
+
+![](http://img.smyhvae.com/20180424_1520.png)
+
+**1、父组件传值给子组件**：
+
+要通过 props 属性将number进行传递给子组件才可以。代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<script src="vue2.5.16.js"></script>
+
+<body>
+
+    <div id="app">
+        <!-- 这里是父组件的范围，自定义一个数值 number -->
+        <counter :number="1+2"> </counter>
+        <counter :number="10+20"> </counter>
+    </div>
+
+    <script>
+        var myCounter = {
+            //这里是子组件的范围
+            props: ['number'], //通过 props 属性将父亲的 number 数据传递给子组件
+            template: '<div>我是子组件。{{number}}</div>'
+        }
+
+        var vm = new Vue({
+            el: '#app',
+            components: {
+                'counter': myCounter
+            }
+        });
+    </script>
+
+</body>
+
+</html>
+```
+
+在`<counter>`标签中，要注意`:number`里的冒号。加上冒号，那么引号里的内容就是表达式（期望的结果）；否则，引号的内容只是字符串：
+
+![](http://img.smyhvae.com/20180424_1530.png)
+
+**2、子组件获取了父组件的数据后，进行求和操作**：
+
+上方代码中，子组件已经获取了父组件的两个number，现在要求：每点击一次子组件，在子组件中将数据加 1。
+
+一般人可能会这样写：（不推荐的写法：子组件直接修改父组件中的数据）
+
+```javascript
+        var myCounter = {
+            //这里是子组件的范围
+            props: ['number'], //通过 props 属性将父亲的数据传递给子组件
+            template: '<div @click="addClick">我是子组件。{{number}}</div>',
+            methods: {
+                addClick: function () {
+                    this.number ++;  //这种写法不推荐。不建议直接操作父组件中的数据
+                }
+
+            }
+        }
+```
+
+上方代码的写法不推荐，因为不建议直接操作父组件中的数据。虽然数据操作成功，但是控制台会报错：
+
+img.png
+
+这样涉及到**单向数据流**的概念：
+
+- 父组件可以传递参数给子组件，但是反过来，子组件不要去修改父组件传递过来的参数。因为同一个参数，可能会传递给多个子组件，避免造成修改的冲突。
+
+既然如此，我可以把父组件中的数据，在子组件中创建**副本**，然后我们去修改这个副本，就不会造成影响了。最终，完整版代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<script src="vue2.5.16.js"></script>
+
+<body>
+
+    <div id="app">
+        <!-- 这里是父组件的范围，自定义一个数值 number -->
+        <counter :number="1+2"> </counter>
+        <counter :number="10+20"> </counter>
+    </div>
+
+    <script>
+        var myCounter = {
+            //这里是子组件的范围
+            props: ['number'], //通过 props 属性将父亲的数据传递给子组件
+            data: function () {
+                return {
+                    number2: this.number
+                }
+            },
+            template: '<div @click="addClick">我是子组件。{{number2}}</div>',
+
+            methods: {
+                addClick: function () {
+                    this.number2 ++;   //操作和修改number的副本
+                }
+
+            }
+        }
+
+        var vm = new Vue({
+            el: '#app',
+            components: {
+                'counter': myCounter
+            },
+
+        });
+    </script>
+
+</body>
+
+</html>
+
+```
+
+## 子组件向父组件传值
+
+我们要记住：子组件通过**事件触发**的形式，向父组件传值。
+
+
+
+
+**案例1:**子组件给父组件传递数据
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+    <div id="app">
+        <!-- 在外层监听`mysend`事件，进而出发外层的 getData 方法 -->
+        <counter v-on:mysend="getData"> </counter>
+    </div>
+
+    <script>
+
+        Vue.component('counter', {
+            template: '<div @click = "addClick">发送数据给父组件</div>',  //当组件被点击时，触发 addClick 方法
+
+            methods: {
+                addClick: function () {
+                    //第一个参数为键(注意，要小写，不能大写)，第二个参数为值
+                    this.$emit('mysend', 'smyhvae'); //通过键`mysend`事件通知外面，将值`smyhvae`传给父组件
+                }
+            }
+        });
+
+        new Vue({
+            el: '#app',
+            methods: {
+                getData: function (input) { //通过括号里的参数，获取子组件传递过来的值
+                    console.log(input);   //打印结果：smyhvae
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+
+```
+
+
+**案例2**：获取子组件的DOM对象
+
+题目：给两个相同的子组件定义计数器，每点击一次，数值加1。然后在父组件中求和。
+
+步骤（1）：给两个相同的子组件定义计数器，每点击一次，数值加1。代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+    <div id="app">
+        <counter> </counter>
+        <counter> </counter>
+    </div>
+
+    <script>
+
+        Vue.component('counter', {
+            template: '<div @click = "addClick">当前计数：{{number}}</div>',  //当组件被点击时，调用 addClick 方法
+
+            data: function () {
+                return {
+                    number: 0 //给组件定义一个数据：number
+                }
+            },
+            methods: {
+                addClick: function () {
+                    this.number++;   //定义方法：每点击一次，number 的数值加 1
+                }
+            }
+        });
+
+        new Vue({
+            el: '#app'
+        });
+    </script>
+</body>
+
+</html>
+```
+
+步骤（2）：两个子组件的数值加 1 后，通知父组件。代码如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+    <div id="app">
+        <!-- 在外层监听`change`事件，进而出发外层的 myClick 方法 -->
+        <counter @change="myMethod"> </counter>
+        <counter @change="myMethod"> </counter>
+    </div>
+
+    <script>
+
+        Vue.component('counter', {
+            template: '<div @click = "addClick">当前计数：{{number}}</div>',  //当组件被点击时，
+
+            data: function () {
+                return {
+                    number: 0 //给组件定义一个数据：number
+                }
+            },
+            methods: {
+                addClick: function () {
+                    this.number++;   //定义方法：每点击一次，number 的数值加 1
+                    this.$emit('change'); //通过这一行的`change`，通知外面，内部的 addClick 方法已经执行了
+                }
+            }
+        });
+
+        new Vue({
+            el: '#app',
+            methods: {
+                myMethod: function () {
+                    console.log('触发父组件');
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+
+```
+
+上方代码中，通过关键字`emit`通知父组件，子组件里的 addClick 方法被执行了。父组件得知后，执行`myMethod()`方法（这个方法是在Vue实例中定义的，很好理解）
+
+步骤（3）：在父组件中求和
+
+既然父组件已经得知子组件的 addClick 事件，那我们直接在父组件的`myMethod()`里定义求和的方法即可。
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <script src="vue2.5.16.js"></script>
+</head>
+
+<body>
+
+    <div id="app">
+        <!-- 在外层监听`change`事件，进而触发外层的 myMethod 方法 -->
+        <counter ref="one" @change="myMethod"> </counter>
+        <counter ref="two" @change="myMethod"> </counter>
+        <div>{{totalData}}</div>
+    </div>
+
+    <script>
+
+        Vue.component('counter', {
+            template: '<div @click = "addClick">当前计数：{{number}}</div>',  //当组件被点击时，触发 addClick方法
+
+            data: function () {
+                return {
+                    number: 0 //给组件定义一个数据：number
+                }
+            },
+            methods: {
+                addClick: function () {
+                    this.number++;   //定义方法：每点击一次，number 的数值加 1
+                    this.$emit('change'); //通过这一行自定义的`change`，通知外面，内部的 addClick 方法已经执行了
+                }
+            }
+        });
+
+        new Vue({
+            el: '#app',
+            data: {
+                totalData: 0
+            },
+            methods: {
+                myMethod: function () {
+                    console.log('触发父组件');
+                    //通过`$refs`获取子组件中各自的number数值
+                    var a1 = this.$refs.one.number;
+                    var a2 = this.$refs.two.number;
+                    //求和，存放在父组件的 totalData 中
+                    this.totalData = a1 + a2;
+
+                    console.log();
+                }
+            }
+        });
+    </script>
+</body>
+
+</html>
+
+```
+
+代码的关键：
+
+- 在`<counter>`标签中，通过 `ref = "xxx"`属性，给各个组件起一个别名，代表组件的引用
+
+- 在父函数`myMethod()`中，通过`this.$refs.xxx`获取组件的引用。我们看一下最后两行代码在控制台的输出便知：（组件里有 number 属性）
+
+![](http://img.smyhvae.com/20180424_1455.png)
+
+
+