# 其他指令

# 介绍

前面已经介绍了比较重要且常用的指令，剩下的指令在这里简单的介绍一下。

正常使用模板插值时，使用{{}}的方式：

<span> {{msg}} </span>

使用v-text的写法：

<span v-text="msg"></span>

这俩种方式最终的效果是一样的。

假设在 data 有如下变量:

msg: `<span style="fontSize: 20px;">Hello V-html</span>`

在使用{ { msg } }或v-text="msg"的时候，会原封不动的渲染出来:

<span style="fontSize: 20px;">Hello V-html</span>

但是我们的本意是渲染出一个<span>标签。所以 vue 提供了v-html，可以识别出 html 标签。

<span v-html="msg"></span>

Hello V-html

在加载页面的时候，页面会经过编译，然后渲染 dom。所以，如果加载过程比较慢的话，会看到模板语法的表达式，比如:

<div>{{ msg }}</div>

然后页面加载完之后，才能看到实际的值：

<div>Hello Vue!</div>

这样用户体验很不好。所以，vue 提供了v-clock，我们可以使用 css 规则来隐藏未编译的模板标签。

<div v-clock>{{msg}}</div>

<style>
  [v-clock] {
    display: none;
  }
</style>

这样设置后，用户便不会看到未经过编译的模板标签，而是一片空白，然后页面渲染完成后，便会恢复回来。

顾名思义，v-once，使用在标签上，这个元素渲染一次后，就会变成静态内容，并被缓存起来。

<div v-once>Hello Vue</div>

警告

再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签，跳过大量没有指令的节点会加快编译。

<span v-pre>{{ this will not be compiled }}</span>