diff --git a/00-前端工具/03-VS Code.md b/00-前端工具/02-VS Code.md
similarity index 78%
rename from 00-前端工具/03-VS Code.md
rename to 00-前端工具/02-VS Code.md
index dda1588..2cbbd25 100644
--- a/00-前端工具/03-VS Code.md	
+++ b/00-前端工具/02-VS Code.md	
@@ -151,6 +151,48 @@ Sass 文件格式化。
 20180611_2235.png
 
 
+### open in browser
+
+在浏览器中打开。
+
+
+### Auto Rename Tag
+
+适用于 JSX、Vue、HTML。在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键。
+
+
+###Project Manager
+
+项目管理，让我们方便的在命令面板中切换项目文件夹，当然，你也可以直接打开包含多个项目的父级文件夹，但这样可能会让 VSCode 变慢。
+
+
+
+### highlight-icemode：选中相同的代码时，让高亮显示更加明显
+
+VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧。
+
+所用了这个插件之后，VS Code自带的高亮就可以关掉了：
+
+在用户设置里添加`"editor.selectionHighlight": false`即可。
+
+
+参考链接：[vscode 选中后相同内容高亮插件推荐](https://blog.csdn.net/palmer_kai/article/details/79548164)
+
+
+### highlight-words：全局高亮（跨文件多色彩）
+
+
+参考链接：[Visual Studio Code全局高亮着色插件(跨文件多色彩)经验纪要](https://zhuanlan.zhihu.com/p/31163793)
+
+
+
+
+
+
+
+
+
+
 
 ## Vue 相关的插件
 
@@ -217,4 +259,23 @@ Sass 文件格式化。
 
 问题1
 
-解决；You can kill the Microsoft.VSCode.Cpp.IntelliSense.Msvc process to save the file successfully. 也就是 IntelliSense 这个进程。
\ No newline at end of file
+解决；You can kill the Microsoft.VSCode.Cpp.IntelliSense.Msvc process to save the file successfully. 也就是 IntelliSense 这个进程。
+
+
+
+
+## 参考链接
+
+- [能让你开发效率翻倍的 VSCode 插件配置（上）](https://zhuanlan.zhihu.com/p/30976584)
+
+
+### 某网友的VS Code 插件截图
+
+20180611_2255.png
+
+
+
+
+
+
+
diff --git a/00-前端工具/01-Sublime Text在前端中的使用.md b/00-前端工具/03-Sublime Text在前端中的使用.md
similarity index 96%
rename from 00-前端工具/01-Sublime Text在前端中的使用.md
rename to 00-前端工具/03-Sublime Text在前端中的使用.md
index ef4e509..ea4a6d4 100644
--- a/00-前端工具/01-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/00-前端工具/02-WebStorm的使用.md b/00-前端工具/04-WebStorm的使用.md
similarity index 100%
rename from 00-前端工具/02-WebStorm的使用.md
rename to 00-前端工具/04-WebStorm的使用.md
diff --git a/00-前端工具/04-Atom在前端的使用.md b/00-前端工具/05-Atom在前端的使用.md
similarity index 100%
rename from 00-前端工具/04-Atom在前端的使用.md
rename to 00-前端工具/05-Atom在前端的使用.md
diff --git a/20-前端综合/2018年-前端日记.md b/20-前端综合/2018年-前端日记.md
index fecf0c8..00fd9de 100644
--- a/20-前端综合/2018年-前端日记.md
+++ b/20-前端综合/2018年-前端日记.md
@@ -83,7 +83,7 @@ Vue.component('my-div', $.extend({
 
 ### 2018-05-08
 
-- sku的概念
+- sku、spu的概念
 
 ### 2018-05-09
 
@@ -163,6 +163,11 @@ v-on:keyup="querysku = querysku.replace(/\D/,'')"
 - jingwen推荐的iconMoon图标网站。网址：<https://icomoon.io/>
 
 
+### 2018-06-01
+
+- `PingFangSC`字体是iOS独有的字体。`PingFangSC-Regular`是常规字体，`PingFangSC-Semibold`是加粗字体。如果我在代码里设置了这个字体，那么，ios上可以看到效果，但是Android上看不到效果，仍然会采用Android系统默认的字体。
+
+
 
 ### 2018-06-04
 
@@ -193,9 +198,7 @@ git cherry-pick myLog
 
 相当于是，我现在是**并行**开发两个功能了，要怎么通过git来进行协作呢？
 
-目前考虑到有几种答案。
-
-方式1:
+目前考虑到的姣好的方式是：
 
 - 从master拉分支`branch1`，此分支专门用来开发功能1，改功能1的bug。
 
@@ -221,7 +224,17 @@ git cherry-pick myLog
 
 - 通过 jQuery 获取Dom的时候，比如`$('#topNavTop').css('background','red')`记得要指明是 id 还是 class。
 
-- 每次开发一个新的需求，每次开发一个新的需求，记得要问清楚：“H5和”
+- 每次开发一个新的需求，记得要问清楚：“H5和小程序”都要做吗？要做的话，工作量基本乘以2。
+
+
+### 2018-06-14
+
+- pv、uv的概念
+
+
+
+
+
 
 
 
diff --git a/21-Vue基础/03-Vue中的Ajax请求.md b/21-Vue基础/03-Vue中的Ajax请求.md
index e6bce92..ecdff22 100644
--- a/21-Vue基础/03-Vue中的Ajax请求.md
+++ b/21-Vue基础/03-Vue中的Ajax请求.md
@@ -270,7 +270,7 @@ vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js
 
                     this.pname = '';
 
-                    // 3、直接将列表数据重新加载一次，即可刷新页面上的数据
+                    // 3、添加完成后，只需要手动再调用一次getlist（将列表数据重新加载一次），即可刷新页面上的数据
                     this.getlist();
 
                 });
@@ -481,3 +481,71 @@ vue-resource 依赖于 Vue。所以，我们要按照先后顺序，导入vue.js
 
 除了 vue-resource 之外，还可以使用 `axios` 的第三方包实现实现数据的请求。
 
+
+## 通过Vue全局配置api接口的url地址
+
+api接口的url地址包括：绝对路径+相对路径。
+
+我们在做Ajax请求的时候，所填写的url建议填**相对路径**，然后把**绝对路径**放在全局的位置。
+
+Vue就提供了这个功能。举例如下：
+
+```html
+
+  <script>
+    // 如果我们通过全局配置了，请求的数据接口 根域名，则 ，在每次单独发起 http 请求的时候，请求的 url 路径，应该以相对路径开头，前面不能带 /  ，否则 不会启用根路径做拼接；
+    Vue.http.options.root = 'http://smyhvae/';
+    // 全局启用 emulateJSON 选项
+    Vue.http.options.emulateJSON = true;
+
+    var vm = new Vue({
+      el: '#app',
+      data: {
+        name: '',
+        list: [ // 存放所有品牌列表的数组
+        ]
+      },
+      created() { // 当 vm 实例 的 data 和 methods 初始化完毕后，vm实例会自动执行created 这个生命周期函数
+        this.getAllList()
+      },
+      methods: {
+        getAllList() { // 获取所有的品牌列表
+          // 分析：
+          // 1. 由于已经导入了 Vue-resource这个包，所以 ，可以直接通过  this.$http 来发起数据请求
+          // 2. 根据接口API文档，知道，获取列表的时候，应该发起一个 get 请求
+          // 3. this.$http.get('url').then(function(result){})
+          // 4. 当通过 then 指定回调函数之后，在回调函数中，可以拿到数据服务器返回的 result
+          // 5. 先判断 result.status 是否等于0，如果等于0，就成功了，可以 把 result.message 赋值给 this.list ; 如果不等于0，可以弹框提醒，获取数据失败！
+
+          this.$http.get('api/getprodlist').then(result => {
+            // 注意： 通过 $http 获取到的数据，都在 result.body 中放着
+            var result = result.body
+            if (result.status === 0) {
+              // 成功了
+              this.list = result.message
+            } else {
+              // 失败了
+              alert('获取数据失败！')
+            }
+          })
+        }
+      }
+    });
+  </script>
+
+```
+
+如上方代码所示，第一步是在全局的位置写**绝对路径**：
+
+```javascript
+    Vue.http.options.root = 'http://smyhvae/';
+```
+
+第二步是在Ajax请求的url中写**相对路径**：（注意，前面不要带`/`）
+
+```javascript
+this.$http.get('api/getprodlist')
+```
+
+
+
diff --git a/21-Vue基础/04-Vue动画.md b/21-Vue基础/04-Vue动画.md
new file mode 100644
index 0000000..5915ecf
--- /dev/null
+++ b/21-Vue基础/04-Vue动画.md
@@ -0,0 +1,155 @@
+04-Vue动画.md
+
+
+
+## 前言
+
+动画的作用：提高用户的体验，帮助用户更好的理解页面中的功能。
+
+
+## 使用过渡类名实现动画
+
+### 官方文档的解释
+
+过渡类名如下：
+
+
+
+动画进入：
+
+- v-enter：动画进入之前的**初始**状态
+
+- v-enter-to：动画进入之后的**结束**状态
+
+- v-enter-active：动画进入的时间段
+
+PS：第一、第二个是时间点；第三个是时间段。
+
+动画离开：
+
+- v-leave：动画离开之前的**初始**状态
+
+- v-leave-to：动画离开之后的**结束**状态
+
+- v-leave-active：动画离开的时间段
+
+PS：第一、第二个是时间点；第三个是时间段。
+
+
+### 使用举例
+
+温馨提示：`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>
+
+```
+
+
+
+
+
+
+
+