v-html 指令
v-html 指令用于更新元素的 innerHTML，该部分内容作为普通的 HTML 代码插入，不会作为 vue 模板进行编译
代码演示：
<template><divid="app"><divv-html="message"></div></div></template><script>exportdefault { 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}一起使用就可以解决这个问题了
