v-html指令

v-html指令用于更新元素的innerHTML，该部分内容作为普通的HTML代码插入，不会作为vue模板进行编译

代码演示：

<template>
  <div id="app">
    <div v-html="message"></div>

  </div>

</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      message: '<h1>hello world</h1>'
    }
  }
}
</script>

运行结果：

可以看出运行结果渲染出了个h1标签

注意:网站上动态渲染任意的HTML是非常危险的，因为很容易导致XSS攻击。切记只有可信的内容上使用v-html指令，不要在用户提交的内容上使用

v-once

v-once指令可以让标签或组件只渲染一次，该指令不需要表达式，之后再次渲染时，标签、组件及其所有的子节点将视为静态内容并跳过，这可以用于优化更新性能

代码演示：

<template>
  <div id="app">
    <h1>{{title}}</h1>
    <a v-for="nav in navs" :href="nav.url" v-once>{{nav.name}}</a>
  </div>

</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'v-once指令的用法',
      navs: [
        { name: '首页', url: '/home' },
        { name: '新闻', url: '/news' },
        { name: '新闻2', url: '/news2' }
      ]
    }
  }
}
</script>

运行结果：

v-once指令渲染时看不出有什么不同，在看看下面代码：

<template>
  <div id="app">
    <h1>{{title}}</h1>
    <a v-for="nav in navs" :href="nav.url" v-once>{{nav.name}}</a>
    <button @click="adds">添加</button>

  </div>

</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'v-once指令的用法',
      navs: [
        { name: '首页', url: '/home' },
        { name: '新闻', url: '/news' },
        { name: '新闻2', url: '/news2' }
      ]
    }
  },
  methods: {
    adds() {
      this.navs.push({ name: '新闻3', url: '/news3' })
    }
  }
}
</script>

运行结果：

点添加是没有任何变化的，这就是v-once指令的作用，只渲染一次，渲染结果在之后将作为静态内容而存在

注意：v-once只对a标签里的起作用，对a标签兄弟、父级是没有影响的，如果要对a标签兄弟、父级渲染一次需要再次添加v-once

v-pre指令

v-pre指令也需要表达式，用于跳过这个元素和他的子元素的编译过程。v-pre指令可以用来显示原始Mustache标签。对于大量没有指令的节点使用v-pre指令可以加快·编译速度

代码演示：

<template>
  <div id="app">
    <h1 v-pre>{{title}}</h1>

  </div>

</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'v-pre指令的用法'
    }
  }
}
</script>

运行结果

v-pre不会渲染出插值，而是直接渲染出h1标签的内容

v-cloak指令

v-cloak指令也不需要表达式，这个指令保持在元素上直到关联实例编译结束，编译结束后该指令被移除。当和CSS规则如[v-cloak]{display:none}一起使用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕

代码演示：

<template>
  <div id="app">
    <h1 v-cloak>{{title}}</h1>

  </div>

</template>
<script>
export default {
  name: 'App',
  data() {
    return {
      title: 'v-pre指令的用法'
    }
  }
}
</script>
<style>
[v-cloak] {
  display: none;
}
</style>

运行结果

浏览器在加载页面时，如果网速比较慢或者页面较大，那么浏览器在构造完DOM树后会在页面中直接显示{{title}}字样，直到vue的js文件加载完毕，vue实例创建模板编译后{{title}}才会被替换为数据对象中的内容。这个过程中，页面是会有闪烁的，这给用户的体验不好，如果加上CSS规则如[v-cloak]{display:none}一起使用就可以解决这个问题了

vue指令6

点击查看上篇

v-html指令

v-once

v-pre指令

v-cloak指令