3.指令

1. 什么是指令？

用来扩展html标签的功能
angular中常用的指令：
    ng-model
    ng-repeat
    ng-click
    ng-show/ng-hide
    ng-if

2. vue中常用的指令

• v-text
  预期：string

详细：

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

示例：

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

• v-html
  预期：string

详细：

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。
在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被 Vue 的模板编译器处理。如果你希望针对 v-html 的内容设置带作用域的 CSS，你可以替换为 CSS Modules 或用一个额外的全局

• v-model
  双向数据绑定，一般用于表单元素

• v-for
  对数组或对象进行循环操作，使用的是v-for，不是v-repeat
  注：在vue1.0中提供了隐式变量，如$index、$key
  在vue2.0中去除了隐式变量，已被废除
  可以直接循环包含重复数据的集合，可以通过指定:key属性绑定唯一key，当更新元素时可重用元素，提高效率，类似于vue1.0中track-by

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

• v-on
  用来绑定事件，用法：v-on:事件=“函数”

• v-show/v-if
  用来显示或隐藏元素，v-show是通过display实现，v-if是每次删除后再重新创建，与angular中类似

v-show
预期：any

用法：

根据表达式之真假值，切换元素的 display CSS property。

当条件变化时该指令触发过渡效果。

v-if
预期：any

用法：

根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 ，将提出它的内容作为条件块。

当条件变化时该指令触发过渡效果。

当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程

v-else
不需要表达式

限制：前一兄弟元素必须有 v-if 或 v-else-if。

用法：

为 v-if 或者 v-else-if 添加“else 块”。

<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

• v-else-if

类型：any

限制：前一兄弟元素必须有 v-if 或 v-else-if。

用法：

表示 v-if 的“else if 块”。可以链式调用。

<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>