vue中一些特殊情况下用到的指令v-once、v-text、v-html、v-pre、v-cloak

一. v-once指令

用于指定元素或者组件只渲染一次：
1）当数据发生变化的时候，元素或者组件以及其所有的子元素将视为静态内容并且跳过；
2）这个指令可以用于性能优化。

<!-- 这个counter只会渲染一次，即便再怎么按button都不会改变 -->
<h2 v-once>当前计数：{{counter}}</h2>
<button @click="increment">+1</button>

就算是子组件也只会渲染一次：

<div v-once>
  <h2>当前计数：{{counter}}</h2>
  <h2>{{message}}</h2>
</div>

但是一般情况下用的也比较少。

二.v-text指令

用于更新元素的textContent:

<span v-text='msg'></span>
<!-- 有一种等价写法，等价于 -->
<span>{{msg}}</span>

一般情况下用下边的等价写法比较多，因为这样写比较灵活，后边还可以加其他的内容组成表达式。

三.v-html指令

默认情况下，如果我们想要展示在页面上的内容是html的，那么Vue并不能对其进行特殊的解析。如果希望将这些内容被Vue解析出来，就需要使用这个v-html指令将这些内容解析之后展示出来。

<template id="my-app">
  <div>{{info}}</div>
<!--   如果上面不加v-html，那么在页面中只会展示出一行文字 <span style='color:red;'>哈哈哈</span>-->
<!-- 加上v-html -->
  <div v-html='info'></div>
</template>
<script>
  const App={
    template:'#my-app',
    data(){
      return{
        info:`<span style='color:red;'>哈哈哈</span>`
      }
    }
  }
</script>

四.v-pre指令

用于跳过元素和它的子元素的编译过程，显示原始的Mustche标签：
这样可以跳过不需要编译的节点，加快编译的速度。

<div>{{msg}}</div>
<!-- 如果不想要上面的内容随随便便就解析出来，就加上v-pre，就会显示{{msg}} -->
<div v-pre>{{msg}</div>

六.v-cloak指令

这个指令会保持在元素上直到关联组件实例结束编译，它的出现是为了防止在模板为解析的时候，页面上会出现 {{msg}} 这样的状况。
它和CSS规则 [v-cloak] {display:none;} 一起使用时，可以隐藏未编译的Mustche标签直到组件实例准备完毕，会自动将div中的v-cloak去掉。

<style>
  [v-cloak]{
    display:none;
  }
</style>
<body>
  <template id="my-app">
    <div v-cloak>{{msg}</div>
  </template>
</body>

这个div中的内容不会显示，直到编译结束。

秒客网