14个 Vue 指令介绍 十个常用指令

Vue 指令一共有14个 常用 的在10个左右

优点 ：
省略 获取标签的（dom节点）的js事件 。
将逻辑直接写在 所需要的标签上 。
便于维护和阅读。再也不用去js文件里去寻找方法了。提高工作效率
缺点
美中不足 会使html部分的代码变的 很长 ，但是不妨碍vue 的强大

1. v-text

插入文本

相当于原生的innHTML

<span v-text="msg"></span>
<!-- 和下面的一样 指令的优点是当值没有返回时不再页面显示 不会有一闪 的效果-->
<span>{
   {
   msg}}</span>

2. v-html
   插入标签

相当于原生的 appendcild()

更新元素的 innerHTML。注意：内容按普通 HTML 插入 - 不会作为 Vue 模板进行编译。

在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上。

<div v-html="html"></div>

3. v-if
   组件/标签 /变量/tabs页 显示与否 （再次打开有刷新的效果）
   当和 v-if 一起使用时，v-for 的优先级比 v-if 更高。详见列表渲染教程

4. v-else

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

5. v-else-if

前一兄弟元素必须有 v-if 或 v-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>

6. v-show 根据表达式之真假值，切换元素的 display CSS property。（显示或者隐藏）
7. v-for 预期：Array | Object | number | string | Iterable (2.6 新增)
   v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

<div v-for="item in items" :key="item.id">
  {
   {
    item.text }}
</div>

当和 v-if 一起使用时