• 具有特殊含义、拥有特殊功能的特性
  • 指令带有v-前缀，表示它们是Vue提供的特殊特性

  • 指令可以直接使用data中的数据

    v-pre

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

    1. <!-- 不会被编译 -->
    2. <span v-pre>{{ msg }}</span>

    v-cloak

  • 这个指令保持在元素上直到关联实例结束编译

  • 可以解决闪烁的问题 (当使用mdn的方式引入时，由于网络原因可能会延迟vue编译，当未编译的代码呈现在用户面前过几秒恢复正常，这就是闪烁)

  • 和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕

    1. [v-cloak] {
    2. display: none;
    3. }
    1. <!-- {{ message }}不会显示，直到编译结束 -->
    2. <div v-cloak>
    3. {{ message }}
    4. </div>

    v-once

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

    1. <!-- 单个元素 -->
    2. <span v-once>{{msg}}</span>
    3. <!-- 有子元素 -->
    4. <div v-once>
    5. <h1>comment</h1>
    6. <p>{{msg}}</p>
    7. </div>

    v-text

  • 更新元素的 textContent

    1. <span v-text="msg"></span>
    2. <!-- 和下面的一样 -->
    3. <span>{{msg}}</span>

    vue中的{{ }} 这种写法叫做Mustache 语法

    v-text 与 Mustache 的区别

  • v-text替换元素中所有的文本，Mustache只替换自己，不清空元素内容

    1. <!-- 渲染为：<span>3333</span> -->
    2. <span v-text="msg">----</span>
    3. <!-- 渲染为：<span>----333----</span> -->
    4. <span>----{{msg}}----</span>

  • v-text 优先级高于 {{ }}

    textContent VS innerText

  1. 设置文本替换时，两者都会把指定节点下的所有子节点也一并替换掉。
  2. textContent 会获取所有元素的内容，包括 <script> 和 <style>元素，然而 innerText 不会。
  3. innerText 受 CSS 样式的影响，并且不会返回隐藏元素的文本，而textContent会。
  4. 由于 innerText 受 CSS 样式的影响，它会触发重排（reflow），但textContent 不会。
  5. innerText 不是标准制定出来的 api，而是IE引入的，所以对IE支持更友好。textContent虽然作为标准方法但是只支持IE8+以上的浏览器，在最新的浏览器中，两个都可以使用。
  6. 综上，Vue这里使用textContent是从性能的角度考虑的。

    v-html

  • 更新元素的innerHTML
  • 注意：内容按普通 HTML 插入，不会作为 Vue 模板进行编译
  • 在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。只在可信内容上使用 v-html，永不用在用户提交的内容上
    1. <div id="app">
    2. <div v-html="msg"></div>
    3. </div>