vue常用指令

1 v-text 和 v-html
都是用于渲染页面。
v-html可以识别html标签并渲染到页面中；而v-text不能识别标签，只可以渲染文本。

<p v-html="html">123</p>
<p v-text="text">123</p>

data() {
    return {
      html: "<h1>我是v-html<h1>",
      text: "<h1>我是v-text<h1>",
    };
  }

我们可以发现 p 标签中原有文本均被覆盖掉，不同的是使用v-html 指令 的 p 标签 有了标题效果，也就是说浏览器识别了 data 中 html对象中的h1标签，而使用了v-text指令的p标签却不能，只是把数据当做字符串来解析。

2 v-if 和 v-show
v-if 是真正的条件渲染，也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。
v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行样式切换。
v-if 适用于很少改变条件，不需要频繁切换的场景；v-show 则适用于需要非常频繁切换的场景。

4 v-for 遍历data中存放的数据，实现列表的渲染。

v-for 和 v-if 不建议用在一起
当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，所以v-if 将重复运行于每个v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费。
这种场景建议使用 computed，先对数据进行过滤。

5 v-cloak
当网络较慢，Vue 来不及渲染，这时页面就会显示出 Vue 源代码，我们可以使用 v-cloak 指令来解决这一问题：

<div id="app" v-cloak>
    {{context}}
</div>

[v-cloak]{
    display: none;
}

在简单项目中，使用 v-cloak 是解决屏幕闪动的好方法。但在大型、工程化的项目中（webpack、vue-router）只有一个空的 div 元素，元素中的内容是通过路由挂载来实现的，这时我们就不需要用到 v-cloak 指令。

6 v-bind 用于动态绑定DOM元素的属性。当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM：
v-bind:title="msg" 可简写为 :title="msg"

7 v-on 绑定事件 v-on:click="say" 简写 @click="say" 绑定的事件从methods中获取。

8 v-model 用于表单输入，实现表单控件和数据的双向绑定。

9 v-once 只渲染一次。

10 v-pre 可以用来显示原始 Mustache 标签代码