v-text, v-html, v-pre, v-cloak, v-once 几个Vue内置指令

v-text

使用绑定的数据，覆盖标签内的所有内容

<h1 v-text="name">
  <button>我是v-text</button>
</h1>

data: {
  text:  panda 
}

结果如下，可见h1里不管有啥，都被字符串panda替代了。

v-html

使用绑定的数据，覆盖标签内的所有内容，但是会解析绑定数据里面的HTML标签

<h1 v-html="html">
  <button>我是v-text</button>
</h1>

data: {
  text:  panda ,
  html:  <a href="http://www.baidu.com">百度一下</a> 
}

结果如下，可见h1里不管有啥，都被字符串html替代了。但是同时解析出里面的a标签。但但是，有点危险，可以百度查看XSS危险。

v-pre

单独的属性，没有值。表明Vue不去解析该HTML标签。

<div v-pre>
  <h1 v-text="text">
    <button>{{text}}</button>
  </h1>
  <h1 v-html="html">
    <button>{{html}}</button>
  </h1>
</div>

结果如下，尽管div标签里面有许多Vue的语法，但是都没解析。

那就奇怪了，又用Vue的语法，又用v-pre不去解析Vue的语法，这不是xx吗。

由于这里只是演示一下v-pre指令的效果。

该指令实则是告知Vue解析到有该属性标识的元素时，就不要解析该标签以及其内部子元素了。原来是啥，就是啥。可以提高解析的效率。

v-cloak

单独的属性，没有值。暂时隐藏某元素，直到Vue成功加载了某个数据。

列如网速不行，vue.js文件加载了半天，但是页面使用了Vue语法的地方，显示了半天原始内容，并没有加载data属性中的数据显示出来，这就不太友善了。

如下，为了演示效果，我们引用在线vue.js文件

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

同时调慢浏览器的网速·

然后写一段演示代码

<h1>不在双大括号语法中的内容</h1>
<h1>{{cloak}}</h1>

data: {
  text:  panda ,
    html:  <a href="http://www.baidu.com">百度一下</a> ,
    cloak:  v-cloak指令 
}

gif 结果如下，可以看到一开始用到Vue的地方都是显示的原样，过一会vue,js加载完，把data中的内容解析完。就显示出我们最终希望看到的页面。

那实则这是很影响用户体验的，实际上没加载出来，那就不要显示出来呗。

为了演示简单，我们给下面的h1标签加上v-cloak标签。

<h1>不在双大括号语法中的内容</h1>
<h1 v-cloak>{{cloak}}</h1>

配合css

[v-cloak] {
  display: none;
}

gif 结果如下，可以看到，带有v-cloak属性的h1一开始没有显示，等 Vue 解析完就显示出来了。

v-once

单独的属性，没有值。只显初始化时绑定的内容，后面data怎么变，我都不变

<h1 v-once>带有v-once属性：{{once}}</h1>
<h1>不带有v-once属性：{{once}}</h1>
<button @click="once++">增加1</button>

data: {
  text:  panda ,
  html:  <a href="http://www.baidu.com">百度一下</a> ,
  cloak:  v-cloak指令 ,
  once: 1
}

点击按钮，实现once属性的自增。但是带有v-once属性的h1标签，里面的{{once}}并没有变化，由于只是绑定了初始化时的once值，后面再也不变。