7x4 精读Vue官方文档 - API -指令

478 阅读1分钟

精读 Vue 官方文档系列 🎉


这里列出一些不在基础建教程中提到的指令。

v-text

使用 textContent 来更新元素的内容。 与插值表达式同样的效果,通常不会单独使用指令的方式。

v-html

使用 innerHTML 来更新元素的内容。 插入的内容会被浏览器当做普通的 HTML 代码进行解析与渲染。

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

v-pre

跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 表达式。

跳过大量的模板节点会加快编译速度。

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

v-cloak

这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 直到实例准备完毕。

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。

v-pre 的区别就是 v-pre 完全不会编译,直接跳过。