Vue——内置指令

1.vue内置指令——vue-html

作用：更新元素的 innerHTML。

        注意：在你的站点上动态渲染任意的 HTML 是非常危险的，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要将用户提供的内容作为插值。

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

实例代码解释 

2.vue内置指令——vue-cloak 

作用：用于隐藏尚未完成编译的 DOM 模板。 

        当使用直接在 DOM 中书写的模板时，可能会出现一种叫做“未编译模板闪现”的情况：用户可能先看到的是还没编译完成的双大括号标签，直到挂载的组件将它们替换为实际渲染的内容。

        v-cloak 会保留在所绑定的元素上，直到相关组件实例被挂载后才移除。配合像 [v-cloak] { display: none } 这样的 CSS 规则，它可以在组件编译完毕前隐藏原始模板。

[v-cloak] {
  display: none;
}

<div v-cloak>
  {{ message }}
</div>

这样情况之下，在网络速度不佳时，就可以先暂时不加载出没有编译完成的插值语法部分内容。

        [v-cloak]{}  是代表所有的v-cloak语句，执行不可见操作，当编译执行完成时，vue对其进行渲染，然后v-cloak才会消失。 我们才可以看到最终的部分。

 3.vue内置指令——vue-once

 作用：仅渲染元素和组件一次，并跳过之后的更新

        在随后的重新渲染，元素/组件及其所有子项将被当作静态内容并跳过渲染。这可以用来优化更新时的性能。

<!-- 单个元素 -->
<span v-once>This will never change: {{msg}}</span>
<!-- 带有子元素的元素 -->
<div v-once>
  <h1>comment</h1>
  <p>{{msg}}</p>
</div>
<!-- 组件 -->
<MyComponent v-once :comment="msg" />
<!-- `v-for` 指令 -->
<ul>
  <li v-for="i in list" v-once>{{i}}</li>
</ul>

 4.vue内置指令——vue-pre

作用：跳过该元素及其所有子元素的编译，可以加快编译速度。

• 元素内具有 v-pre，所有 Vue 模板语法都会被保留并按原样渲染。最常见的用例就是显示原始双大括号标签及内容。：

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