+ {{name}}
+
+
+
+
+
+```
+
+
+显示效果：
+
+20180313_0955.png
+
+如果我们在控制台输入`myVue.data+='123'`，页面会**自动更新**name的值。
+
+
+## Vue的系统指令
+
+### v-on：注册事件
+
+```html
+
+
+
+
+
+
+
+ {{name}}
+
+
+
+
+
+
+
+
+
+```
+
+
+上方代码中，我们给button按钮绑定了点击事件。注意，这个button标签要写在div区域里（否则点击事件不生效），因为下方的View module接管的是div区域。
+
+
+
+### 插值表达式 {{}}
+
+数据绑定最常见的形式就是使用 “Mustache” 语法（双大括号）的文本插值。例如：
+
+```html
+Message: {{ msg }}
+```
+
+Mustache 标签将会被替代为对应数据对象上 msg 属性（msg定义在data对象中）的值。
+无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会**自动更新**。
+
+`{{}}`对JavaScript 表达式支持，例如：
+
+```javascript
+{{ number + 1 }}
+
+{{ ok ? 'YES' : 'NO' }}
+
+{{ name == 'smyhvae' ? 'true' : 'false' }}
+
+{{ message.split('').reverse().join('') }}
+```
+
+
+但是有个限制就是，每个绑定都**只能包含单个表达式**，如下表达式无效：
+
+```html
+
+{{ var a = 1 }}
+
+
+{{ if (ok) { return message } }}
+```
+
+
+### v-text
+
+v-text可以将一个变量的值渲染到指定的元素中。例如：
+
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+结果：
+
+
+20180313_1645.png
+
+### v-html
+
+
+`v-text`是纯文本，而`v-html`会被解析成html元素。
+
+注意：使用v-html渲染数据可能会非常危险，因为它很容易导致 XSS（跨站脚本） 攻击，使用的时候请谨慎，能够使用{{}}或者v-text实现的不要使用v-html。
+
+
+### v-cloak
+
+`v-cloak`：保持和元素实例的关联，直到结束编译后自动消失。
+
+
+这个指令和CSS 规则一起用的时候，可以隐藏未编译的标签直到实例准备完毕。比如说，在网络很慢的情况下，通过`v-cloak`隐藏元素，当加载完毕后，再显示出来。
+
+```html
+
+
+
+
+
+
+ {{name}}
+
+
+
+
+
+
+
+
+
+```
+
+
+
+
+### v-bind
+
+`v-bind`：给html元素或者组件**动态绑定**一个或多个特性，例如动态绑定style和class。
+
+比如说：
+
+```html
+
+
+
+
+
+
+ 超链接
+
+
+
+
+
+
+
+
+
+```
+
+
+效果：
+
+20180313_1745.png
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/21-Vue基础/Vue-router路由.md b/21-Vue基础/Vue-router路由.md
new file mode 100644
index 0000000..72738c5
--- /dev/null
+++ b/21-Vue基础/Vue-router路由.md
@@ -0,0 +1,6 @@
+
+
+## 前言
+
+路由：就是SPA（单页应用）的**路径管理器**。
+