Vue.js 指令
VUEJS 属于 MVVM 模式，是封一个组件，然后根据场景使用不同的组件；
VUE 中分为三个结构；
M- model –>数据
V- view ->HTML
VM- viewModel ->HTML和数据之间的管道，起到粘合剂的作用；
而渲染 view 层的 HTML，就需要了解指令，如果你以前接触过 angular，那么你可以非常容易的上手他，因为你会发现和 angular 的指令原理差不多的；
为了方便记忆，把指令为几种形式；
一、页面渲染指令
v-text
v-html
v-if
v-show
v-else
v-for
v-bind (简写为:)
二、事件绑定指令
v-on(简写为@)
三、动态修改双向值指令
v-model
一、页面渲染指令详解；
v-text
这个指令可以更新元素的 textContent，{{}}插值也被编译为 textNode 的一个 v-text 指令；两者相似，可以看作等价的；
v-html
这个指令可以更新元素的 htmlContent, 等价于{{{}}}这种的写法；v-text 和 v-html 在 vue 初识的时候已经了解了，就不再附属
v-if
这个指令可以完全根据表达式的值在 DOM 中生成或者不生成一个元素 / 元素块；
原理：
表达式值为 true，对应元素的 clone 值会被重新插入到 DOM 中（FOCUS）；
表达式值为 false，对应的元素在 DOM 中 s 输出后再删除；
为了更好的组件化，if 可以用作大段的 HTML 判断 (template、style、script 这三个标签分别包裹 HTML/JS/CSS 的代码），如下；
v-if
注意：template 在虚拟 DOM 中仅仅是一个包装元素，作为一个判断作用，我个人感觉类似代码块的{}这种的意思，在真实的 DOM 输出时，template 这个标签并不会会被输出的；
v-show
字面理解，就是显示，这个指令就像他的名字一样，只是控制元素的 display，无论里面的表达式结果为 true 还是 false，都会渲染出来，然后再根据表达式为真还是假来切 display；
亲测 v-show 不支持 template 标签，通过上面的例子可以看出，v-show 是通过 display 来判断，上面的 isMan 和 isWoman 一个 true 一个为 false，通过看 elements，为 false 的有一个行内样式 display 为 none 的属性；
v-if 和 v-show 的区别；
1、if是虚拟DOM中运算后，为false值的不输出在页面，属于真实渲染，show是全部输出；亲测输出的时候，show和if都有FOCUS现象；一闪而过,哈哈懵逼了！
2、if切换的时候是真实的销毁和重建条件块内的事件监听器和子组件，代价较高，但是更彻底；show切换时候更加效率，因为他只控制了css
3、if支持template标签，show不支持template标签
4、一般show用于频繁切换的场景（因为DOM全部输出了，切换的成本低）；if用于几乎不切换的场景（因为真实渲染，渲染的更干净，不像show的页面初始输出成本高）；
v-else
这个指令是对 if 和 show 指令的补充，写的一个 else 块；
v-else
- v-else 元素必须立即跟在 v-if 或 v-show 元素的后面——否则它不能被识别；
- v-else 元素是否渲染在 HTML 中，取决于前面使用的是 v-if 还是 v-show 指令。
v-for
渲染列表等数组对象；用法如下
v-bind:
可以在其名称后面带一个参数，中间放一个冒号隔开，这个参数通常是写 HTML 元素的特性（attribute），图片的 src 等；
用法 v-bind:argument=”expression”
例如 v-bind:class=”expression ? trueValue : falseValue”
缩写为冒号
例如 :class=”expression ? trueValue : falseValue”
v-bind
渲染指令
