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>