add file:变量提升

03-JavaScript（二）/06-作用域和闭包.md

@@ -206,7 +206,7 @@ console.log(name);
 
 全局作用域中的变量都是全局变量，在页面的任意的部分都可以访问到。
 
-**变量的声明提前：**
+**变量的声明提前：**（变量提升）
 
 
 使用var关键字声明的变量（ 比如 `var a = 1`），**会在所有的代码执行之前被声明**（但是不会赋值），但是如果声明变量时不是用var关键字（比如直接写`a = 1`），则变量不会被声明提前。
@@ -247,8 +247,6 @@ console.log(name);
 所以说，下面的例子，会报错：
 
 
-
-
 ![](http://img.smyhvae.com/20180314_2145.png)
 
 ### 函数作用域
@@ -266,7 +264,7 @@ console.log(name);
 
 在函数作用域也有声明提前的特性：
 
-- 使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
+- 使用var关键字声明的变量，是在函数作用域内有效，而且会在函数中所有的代码执行之前被声明
 
 - 函数声明也会在函数中所有的代码执行之前执行
 

04-前端基本功：CSS和DOM练习/others/11-00.JavaScript高级面试：前言.md

@@ -0,0 +1,61 @@
+
+
+## 前言
+
+
+一、基础知识：
+
+- ES 6常用语法：class 、module、Promise等
+
+- 原型高级应用：结合 jQuery 和 zepto 源码
+
+- 异步全面讲解：从原理到 jQuery 再到 Promise
+
+二、框架原理：
+
+- 虚拟DOM：存在价值、如何使用、diff算法
+
+- MVVM  vue：MVVM、vue响应式、模板解析、渲染
+
+- 组件化 React：组件化、JSX、vdom、setState
+
+三、混合开发：
+
+- hybrid
+
+- H5
+
+- 前端客户端通讯
+
+
+内容优势
+
+- 面试官爱问“源码”、“实现”。
+
+- 介绍常用框架实现原理
+
+- 介绍hybrid原理和应用
+
+
+
+
+## ES6
+
+
+- 模块化的使用和编译环境
+
+- Class与JS构造函数的区别
+
+- Promise的用法
+
+- ES6其他常用功能
+
+## 异步
+
+
+- 什么是单线程，和异步有什么关系
+
+
+
+
+

04-前端基本功：CSS和DOM练习/others/11-01.ES6：模块化的使用和编译环境.md

@@ -0,0 +1,86 @@
+
+
+## 前言
+
+
+### ES6的主要内容
+
+- 模块化的使用和编译环境
+
+- Class与JS构造函数的区别
+
+- Promise的用法
+
+- ES6其他常用功能
+
+本文来讲“模块化的使用和编译环境”。
+
+### 面试常见问题
+
+- ES6 模块化如何使用，开发环境如何打包
+
+- Class 和普通构造函数有何区别
+
+- Promise 的基本使用和原理
+
+- 总结一下 ES6 其他常用功能
+
+
+### ES6的现状
+
+- 开发环境已经普及使用
+
+- 浏览器环境却支持不好（需要开发环境编译）
+
+- 内容很多，重点了解常用语法
+
+- 面试：开发环境的使用 + 重点语法的掌握
+
+
+##  模块化的基本语法
+
+
+（1）util1.js：
+
+```javascript
+export default var a = 100;
+
+export function foo {
+  console.log('util1-foo');
+}
+```
+
+`export default`命令用于指定模块的默认输出。显然，一个模块只能有一个默认输出。
+
+有了默认输出之后，其他模块加载该模块时，import命令可以为该匿名变量/函数，起**任意的名字**。
+
+上面的代码中，默认输出是一个变量。当然，我们也可以换成**默认输出一个匿名函数**：
+
+```javascript
+export default function() {
+  console.log('util1-function');
+}
+```
+
+
+（2）util2.js：
+
+```javascript
+
+export var myUtil2 = 'this is util2';
+
+export function fn1() {
+  console.log('util2-fn1');
+}
+
+export function fn2() {
+  console.log('util2-fn2');
+}
+```
+
+
+上方代码中，我把一个变量和两个函数作为了导出。
+
+
+（3）index.js：
+

04-前端基本功：CSS和DOM练习/others/11-02.ES6.md

@@ -0,0 +1,39 @@
+
+
+## Class和普通构造函数有何区别
+
+> 我们经常会用ES6中的Class来代替JS中的构造函数做开发。
+
+
+- Class 在语法上更加贴合面向对象的写法
+
+-  Class 实现继承更加易读、易理解
+
+
+
+- 更易于写 java 等后端语言的使用
+
+
+- 本质还是语法糖，使用 prototype
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

04-前端基本功：CSS和DOM练习/others/15-虚拟DOM.md

@@ -0,0 +1,56 @@
+
+
+## 前言
+
+
+
+vdom 是 vue 和 React 的**核心**，先讲哪个都绕不开它。
+
+vdom 比较独立，使用也比较简单。
+
+如果面试问到 vue 和 React 和实现，免不了问 vdom：
+
+- vdom 是什么？为何会存在 vdom？
+
+- vdom 的如何应用，核心 API 是什么
+
+- 介绍一下 diff 算法
+
+
+## 什么是 vdom
+
+
+### 什么是 vdom
+
+DOM操作是昂贵的。
+
+步骤一：用JS对象模拟DOM树
+
+步骤二：比较两棵虚拟DOM树的差异
+
+步骤三：把差异应用到真正的DOM树上
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

04-前端基本功：CSS和DOM练习/others/16-01.MVVM.md

@@ -0,0 +1,94 @@
+
+
+## 前言
+
+MVVM的常见问题：
+
+- 如何理解MVVM
+
+- 如何实现MVVM
+
+- 是否解读过Vue的源码
+
+
+题目：
+
+- 说一下使用 jQuery 和使用框架的区别
+
+
+- 说一下对 MVVM 的理解
+
+
+- vue 中如何实现响应式
+
+
+- vue 中如何解析模板
+
+- vue 的整个实现流程
+
+
+
+## 说一下使用 jQuery 和使用框架的区别
+
+
+
+
+## MVVM / Vue
+
+
+## MVVM模式
+
+- Model：负责数据存储
+
+- View：负责页面展示
+
+- View Model：负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示
+
+数据驱动视图，只关心数据变化，DOM操作被封装。
+
+### MVVM / Vue的三要素
+
+- **响应式**：vue 如何监听到 data 的每个属性变化？
+
+- **模板引擎**：vue 的模板如何被解析，指令如何处理？
+
+
+- **渲染**：vue 的模板如何被渲染成 html ？以及渲染过程
+
+
+
+### 什么是虚拟 DOM
+
+传统的web开发，是利用 jQuery操作DOM，这是非常耗资源的。
+
+我们可以在 JS 的内存里构建类似于DOM的对象，去拼装数据，拼装完整后，把数据整体解析，一次性插入到html里去。这就形成了虚拟 DOM。
+
+
+Vue1.0没有虚拟DOM，Vue2.0改成了基于虚拟DOM。
+
+
+### 如何理解MVC
+
+C指的是Controller。控制器能够控制视图的变化，也能控制数据的变化。
+
+单项通信。一般情况下是：view 发出命令给控制器，控制器处理业务逻辑后控制 Model，Model再去改 view。
+
+
+## hybrid
+
+### 使用场景
+
+不是所有的场景都适合用 hybrid：
+
+- 使用原生应用：体验要求极致，变化不频繁（如头条的首页）
+
+- 使用 hybrid：体验要求高，变化频繁（如新闻详情页）
+
+- 使用H5：体验无要求、不常用（比举报、反馈等）
+
+
+
+
+
+
+

04-前端基本功：CSS和DOM练习/others/21-面试题整理 by smyhvae.md

@@ -2,12 +2,14 @@
 
 
 
+
+
 ## JavaScript
 
-### 存储相关：请描述以下cookie、localStorage、sessionStorage的区别。
+### 存储相关：请描述以下cookie、localStorage、sessionStorage的区别
 
 
-在H5之前，cookie一直都是本地存储的一个重要的方法。直到后面的两个出现了， 就开始用后面的两个做本地存储。
+> 在H5之前，cookie一直都是本地存储的一个重要的方法。直到后面的两个出现了， 就开始用后面的两个做本地存储。
 
 
 **1、cookie**：
@@ -29,9 +31,31 @@ cookie用于存储时的缺点：
 
 
 
+## HTML5
+
+### HTML5新增了哪些内容或API？使用过哪些？
+
+新元素：
+
+- `<section>`、`<footer>` 和 `<header>`等
+
+
+新的api：
+
+- 网络存储: sessionStorage 和 localStorage
 
 
 
+参考链接：
+
+- [笔记：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html)
+
+
+## CSS
+
+### 如何让一个div元素隐藏？你能想到的方式有几种？
+
+-
 
 
 
@@ -47,6 +71,43 @@ cookie用于存储时的缺点：
 
 
 
+## 网络相关
+
+### 浏览器输入url到显示内容，有哪些过程
+
+
+（1）浏览器解析url。包括：协议、域名、端口号、资源路径、参数查询
+
+（2）DNS解析
+
+（3）TCP握手
+
+（4）HTTP请求
+
+（5）服务器处理请求
+
+（6）浏览器渲染：DOM tree、CSS rule tree、render tree。
+
+（7）display
+
+
+参考链接：
+
+
+- [笔记：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html)
+
+- [what-happens-when-zh_CN](https://github.com/skyline75489/what-happens-when-zh_CN#dns)
+
+
+- [码农翻身 | 小白科普：从输入网址到最后浏览器呈现页面内容，中间发生了什么？](https://mp.weixin.qq.com/s/3_DZKSP492uq9RfQ3eW4_A)
+
+- 从输入URL到页面加载发生了什么：<https://segmentfault.com/a/1190000006879700>
+
+
+
+
+
+
 
 
 ## GitHub
@@ -67,11 +128,6 @@ cookie用于存储时的缺点：
 
 
 
-## 浏览器输入hrl，有哪些过程
-
-- [码农翻身 | 小白科普：从输入网址到最后浏览器呈现页面内容，中间发生了什么？](https://mp.weixin.qq.com/s/3_DZKSP492uq9RfQ3eW4_A)
-
-- 从输入URL到页面加载发生了什么：<https://segmentfault.com/a/1190000006879700>
 
 
 

04-前端基本功：CSS和DOM练习/others/22-网友面经.md

@@ -28,4 +28,15 @@
 
 - [2017年BAT面试题大全集](http://www.bijishequ.com/detail/421600?p=)
 
-- [bat前端面试内容记录](https://www.jianshu.com/p/d94d5290328c)
+- [bat前端面试内容记录](https://www.jianshu.com/p/d94d5290328c)
+
+
+
+### 2018-03-18
+
+- [笔记：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/06/07/interview-answers.html)
+
+- [笔记补充：阿里、网易、滴滴共十次前端面试碰到的问题](https://zhoukekestar.github.io/notes/2017/07/06/interview-answers.html)
+
+
+

09-Node.js/01-Node.js入门.md

@@ -398,7 +398,7 @@ NPM 默认安装到当前正在使用 Node 版本所在目录下。我们建议
 
 ![](http://img.smyhvae.com/20180302_1210.png)
 
-### NRM的安装
+### NRM的安装（windows环境）
 
 由于 NPM 的资源都在国外，有时候会被墙，导致无法下载或者很慢。此时可以用到NRM。
 

10-ES6/01-ES6的介绍和常用语法.md

@@ -29,6 +29,16 @@ ES6中增加了很多功能上的不足。比如：**常量、作用域、对象
 
 ES6 的目标是：让 JS 语言可以编写复杂的大型应用程序，成为企业级开发语言。
 
+### ECMAScript 的各大版本
+
+- ECMAScript 2015年6月：ES6
+
+- ECMAScript 2016：ES7
+
+- ECMAScript 2017：ES8
+
+
+
 
 ### ES6 的其他优势
 

10-ES6/02-ES6的常用语法.md

@@ -19,23 +19,29 @@ Promise对象: 代表了未来某个将要发生的事件(通常是一个异步
 ES6中的promise对象, 可以**将异步操作以同步的流程表达出来，**很好地解决了**回调地狱**的问题（避免了层层嵌套的回调函数）。在使用ES5的时候，在多层嵌套回调时，写完的代码层次过多，很难进行维护和二次开发。
 
 
+### 回调地狱的举例
+
+假设买菜、做饭、洗碗都是异步的。
+
+现在的流程是：买菜成功之后，才能开始做饭。做饭成功后，才能开始洗碗。这里面就涉及到了回调的嵌套。
+
 
 ES6的Promise是一个构造函数, 用来生成promise实例。
 
 
 ### promise对象的3个状态
 
-- pending: 初始化状态
+- 初始化状态（等待状态）：pending
 
-- fullfilled: 成功状态
+- 成功状态：fullfilled
 
-- rejected: 失败状态
+- 失败状态：rejected
 
 ### 使用promise的基本步骤
 
 （1）创建promise对象
 
-（2）调用promise的then()
+（2）调用promise的**回调函数**then()
 
 
 代码格式如下：
@@ -76,11 +82,11 @@ ES6的Promise是一个构造函数, 用来生成promise实例。
 
 - 如果请求失败了，请写reject()，此时，promise的状态会被自动修改为rejected
 
-（2）promise.then()方法，括号里面有两个参数，分别代表function1和function2：
+（2）promise.then()方法，括号里面有两个参数，分别代表两个函数 function1 和 function2：
 
-- 如果promise的状态为fullfilled，则执行function1里的内容
+- 如果promise的状态为fullfilled（意思是：如果请求成功），则执行function1里的内容
 
-- 如果promise的状态为rejected，则执行function2里的内容
+- 如果promise的状态为rejected（意思是，如果请求失败），则执行function2里的内容
 
 另外，resolve()和reject()这两个方法，是可以给promise.then()传递参数的。如下：
 
@@ -164,6 +170,14 @@ ES6的Promise是一个构造函数, 用来生成promise实例。
 
 
 
+### 参考链接
+
+- [当面试官问你Promise的时候，他究竟想听到什么？](https://zhuanlan.zhihu.com/p/29235579)
+
+
+
+
+
 
 
 ## Symbol
@@ -275,7 +289,6 @@ Symbol是函数，但并不是构造函数。创建一个Symbol数据类型：
 
 
 
-
 ```javascript
     //在括号里加入参数，来标识不同的Symbol
     let mySymbol1 = Symbol('one');
@@ -304,7 +317,6 @@ Symbol 可以用来定义常量：
 
 
 
-
 ### 内置的 Symbol 值
 
 除了定义自己使用的 Symbol 值以外，ES6 还提供了 11 个内置的 Symbol 值，指向语言内部使用的方法。
@@ -315,9 +327,40 @@ Symbol 可以用来定义常量：
 
 
 
-### async函数
+## async函数（异步函数）
-
+
-
+### 概述
+
+> async 函数是在 ES2017 引入的。
+
+概念：真正意义上去解决异步回调的问题，同步流程表达异步操作。
+
+本质： Generator 的语法糖。
+
+async比之前的 Promise、Generator要好用一些。
+
+
+语法：
+
+```javascript
+    async function foo() {
+        await 异步操作;
+        await 异步操作；
+    }
+```
+
+我们在普通的函数前面加上 async 关键字，就成了 async 函数。
+
+
+###  async、Promise、Generator的对比（async的特点）
+
+1、不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行。
+
+2、async返回的总是Promise对象，可以用then方法进行下一步操作。
+
+3、async取代Generator函数的星号*，await取代Generator的yield。
+
+4、语意上更为明确，使用简单，经临床验证，暂时没有任何副作用。
 
 
 

17-前端进阶/01-前端的几道题目.md

@@ -51,7 +51,7 @@
 
 
 
-### 变量提升
+## 变量提升
 
 
 **问题**：说一下你对JavaScript变量提升的理解。

20-题目/01-变量提升.md

@@ -0,0 +1,360 @@
+
+
+## 变量提升
+
+先说三句总结性的话：
+
+- let 的「创建」过程被提升了，但是初始化没有提升。
+
+- var 的「创建」和「初始化」都被提升了。
+
+- function 的「创建」「初始化」和「赋值」都被提升了。
+
+### 变量提升的规律
+
+在进入一个执行上下文后，先把 var 和 function 声明的变量前置，再去顺序执行代码。
+
+PS：作用域分为全局作用域和函数作用域，用var声明的变量，只在自己所在的所用域有效。
+
+我们举例来看看下面的代码。
+
+**代码 1：**
+
+```javascript
+    console.log(fn);
+    var fn = 1;
+
+    function fn() {
+    }
+
+    console.log(fn);
+```
+
+
+相当于：
+
+```javascript
+    var fn = undefined;
+
+    function fn() {
+    }
+
+    console.log(fn);
+    fn = 1;
+    console.log(fn);
+```
+
+
+打印结果：
+
+![](http://img.smyhvae.com/20180321_1810.png)
+
+**代码 2：**
+
+```javascript
+    console.log(i);
+    for (var i = 0; i < 3; i++) {
+        console.log(i)
+    }
+```
+
+相当于：
+
+```javascript
+    var i = undefined;
+
+    console.log(i);
+    for (i = 0; i < 3; i++) {
+        console.log(i);
+    }
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180321_1817.png)
+
+
+
+**代码 3：**
+
+```javascript
+    var a = 1;
+
+    function fn() {
+        a = 2;
+        console.log(a)
+        var a = 3;
+        console.log(a)
+    }
+
+    fn();
+    console.log(a);
+```
+
+相当于：
+
+```javascript
+    var a = undefined;
+
+    function fn() {
+        var a
+
+        a = 2
+        console.log(a)
+        a = 3
+        console.log(a)
+    };
+
+    a = 1;
+    fn();
+    console.log(a);
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180321_1827.png)
+
+参考链接：<https://github.com/jirengu/javascript-tutorial>
+
+
+### 声明时的重名问题
+
+假设`a`被声明为变量，紧接着`a`又被声明为函数，原则是：声明会被覆盖（先来后到，就近原则）。
+
+PS：
+
+- 如果`a`已经有值，再用 var 声明是无效的。
+
+- 如果`a`已经有值，紧接着又被赋值，则**赋值会被覆盖**。
+
+
+举例1：
+
+```javascript
+    var fn;  //fn被声明为变量
+    function fn() {// fn被声明为function，就近原则
+
+    }
+
+    console.log(fn); //打印结果：function fn(){}
+
+```
+
+举例2：
+
+```javascript
+    function fn() {}  //fn被声明为function，且此时fn已经被赋值，这个值就是function的对象
+
+    var fn;   //fn已经在上一行被声明且已经有值， 再 var 无效，并不会重置为 undefined
+
+    console.log(fn)  //打印结果：function fn(){}
+```
+
+
+既然再var无效，但是再function，是有效的：
+
+
+```javascript
+    function fn() {}  //fn被声明为function，且此时fn已经有值，这个值就是function的对象
+
+    function fn() {   //此时fn被重复赋值，会覆盖上一行的值
+        console.log('smyhvae');
+    }
+    console.log(fn)
+
+```
+
+打印结果：
+
+![](http://img.smyhvae.com/20180321_1845.png)
+
+### 函数作用域中的变量提升（两点提醒）
+
+
+**提醒1：**
+
+在函数作用域也有声明提前的特性：
+
+- 使用var关键字声明的变量，是在函数作用域内有效，而且会在函数中所有的代码执行之前被声明
+
+- 函数声明也会在函数中所有的代码执行之前执行
+
+
+因此，在函数中，没有var声明的变量都会成为**全局变量**，而且并不会提前声明。
+
+举例1：
+
+```javascript
+        var a = 1;
+
+        function foo() {
+            console.log(a);
+            a = 2;     // 此处的a相当于window.a
+        }
+
+        foo();
+        console.log(a);   //打印结果是2
+
+```
+
+上方代码中，foo()的打印结果是`1`。如果去掉第一行代码，打印结果是`Uncaught ReferenceError: a is not defined`
+
+
+**提醒2：**定义形参就相当于在函数作用域中声明了变量。
+
+```
+
+        function fun6(e) {
+            console.log(e);
+        }
+
+        fun6();  //打印结果为 undefined
+        fun6(123);//打印结果为123
+```
+
+
+
+### 其他题目
+
+**20180321面试题：**
+
+```javascript
+    var a = 1;
+    if (a > 0) {
+        console.log(a);
+        var a = 2;
+    }
+    console.log(a);
+
+```
+
+打印结果：
+
+```
+1
+
+2
+```
+
+上方代码中，不存在块级作用域的概念。if语句中用var定义的变量，让然是全局变量。
+
+顺便延伸一下，用let定义的变量，是在块级作用域内有效。
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```javascript
+
+
+```
+
+
+
+
+
+
+
+
+
+

20-题目/链接推荐.md

@@ -5,4 +5,14 @@
 
 长期写博客的人，最少能证明他是一个善于思考和总结的人。
 
-这句话的来源：[我依然坚持建议你开始写博客 | 写给我的 2017](https://www.cnblogs.com/plokmju/p/8108846.html)
+这句话的来源：[我依然坚持建议你开始写博客 | 写给我的 2017](https://www.cnblogs.com/plokmju/p/8108846.html)
+
+
+
+### 2018-03-21
+
+- [不谈面试题，谈谈招聘时我喜欢见到的特质](https://www.cnblogs.com/dino623/p/8583514.html)
+
+
+
+

21-Vue基础/01-Vue基础语法：系统指令.md

@@ -40,9 +40,9 @@
 如果我们在控制台输入`myVue.data+='123'`，页面会**自动更新**name的值。
 
 
-## Vue的系统指令
+下面来讲一下Vue的系统指令
 
-### v-on：注册事件
+## v-on：注册事件
 
 ```html
 <!DOCTYPE html>
@@ -89,7 +89,7 @@
 
 
 
-### 插值表达式 {{}}
+## 插值表达式 {{}}
 
 数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：
 
@@ -124,7 +124,7 @@ Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在
 ```
 
 
-### v-text
+## v-text
 
 v-text可以将一个变量的值渲染到指定的元素中。例如：
 
@@ -162,7 +162,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
 
 20180313_1645.png
 
-### v-html
+## v-html
 
 
 `v-text`是纯文本，而`v-html`会被解析成html元素。
@@ -170,7 +170,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
 注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
 
 
-### v-cloak
+## v-cloak
 
 `v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。
 
@@ -184,12 +184,13 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
 <head>
   <meta charset="UTF-8">
   <title>Title</title>
+  <script src="vue.js"></script>
   <style>
 
     /*网络很慢时，在span上加上 v-cloak和css样式控制以后，浏览器在加载时会先把span隐藏起来。
     直到 Vue实例化完毕以后，v-cloak 会自动消失，那么对应的css样式就会失去作用，最终将span中的内容呈现给用户 */
     [v-cloak] {
-      display: block;
+      display: none;
     }
   </style>
 </head>
@@ -217,8 +218,7 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
 
 
 
-
+## v-bind
-### v-bind
 
 `v-bind`：给html元素或者组件**动态绑定**一个或多个特性，例如动态绑定style和class。
 
@@ -288,6 +288,61 @@ v-text可以将一个变量的值渲染到指定的元素中。例如：
 
 
 
+## v-model：双向数据绑定
+
+上面的一段中，我们通过v-bind，给`<input>`标签绑定了`data`对象里的`name`属性。当`data -> name`的值发生改变时，`<input>`标签里的内容会自动更新。
+
+可我现在要做的是：我在`<input>`标签里修改内容，要求`data -> name`的值自动更新。从而实现双向数据绑定。该怎么做呢？这就可以利用`v-model`这个属性。
+
+代码举例如下：
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Document</title>
+    <script src="vue.js"></script>
+</head>
+<body>
+<div id="app">
+
+    <form action="#">
+        <input type="text" id="username" v-model="myAccount.username">
+        <input type="password" id="pwd" v-model="myAccount.userpwd">
+
+        <input type="submit" v-on:click="submit1" value="注册">
+
+    </form>
+</div>
+</body>
+
+<script>
+    var vm = new Vue({
+        el: '#app',
+        //采用v-model进行双向数据绑定，数据会自动更新到data里面来
+        data: {
+            name: 'smyhvae',
+            myAccount: {username: '', userpwd: ''}
+        },
+        //绑定方法，根据业务需要进行操作
+        methods: {
+            submit1: function () {
+                alert(this.myAccount.username + "  pwd=" + this.myAccount.userpwd);
+            }
+        }
+    });
+</script>
+
+</html>
+```
+
+
+
+
+
+
+
 
 
 

21-Vue基础/02-Vue.md

@@ -0,0 +1,8 @@
+
+
+
+## axios
+
+axios是在Vue中专门用来发送ajax请求的。
+
+但是，axios并不依赖于Vue.js库，而是基于promise的。

22-Vue框架-组件化思维/01-项目介绍.md

@@ -70,7 +70,7 @@
 
 ## 项目的开发环境及版本
 
-> 前端行业里，最常用的技术栈是：vue/react + Webpack + ES6 + CSS3 + Sass。
+> 前端行业里，最常用的技术栈是：HTML5/CSS3 +  ES6 + vue/react + Webpack + Sass。
 
 
 ### 运行环境

推荐链接.md

@@ -138,4 +138,10 @@
 - [开发人员的奋斗目标](https://www.cnblogs.com/1si2/p/devroad.html)
 
 
+### 2018-03-21
+
+- [十倍效能提升——Web 基础研发体系的建立](https://www.cnblogs.com/sskyy/p/8613393.html)
+
+
+