Vue 使用一种基于 HTML 的模板语法，声明式将其组件实例的数据绑定到DOM。所有Vue模板都是语法层合法的 HTML，可被符合规范的浏览器和 HTML 解析器解析。
底层机制中，Vue 会将模板编译成高度优化的 JavaScript 代码。结合响应式系统，当应用状态变更时，Vue 能够智能地推导出需要重新渲染的组件的最少数量，并应用最少的 DOM 操作。
若你对虚拟 DOM熟悉，并偏好直接使用 JavaScript，你也可以结合可选的 JSX 支持直接手写渲染函数而不采用模板，但这将不会享受到和模板同等级别的编译时优化。
1 文本插值
最基本的数据绑定形式，“Mustache”语法 (即双大括号)：
<span>Message: {{ msg }}</span>双大括号标签会被替换为[相应组件实例中] msg 属性的值。同时每次 msg 属性更改时它也会同步更新。
1.1 v-text
更新元素的文本内容。
- 期望的绑定值类型：
string
v-text 通过设置元素的 [textContent] 属性来工作，因此它将覆盖元素中所有现有的内容。如果你需要更新 textContent 的部分，应该使用 [mustache interpolations]代替。
- 示例
<span v-text="msg"></span>
<!-- 等同于 -->
<span>{{msg}}</span>2 原始 HTML
双大括号会将数据解释为纯文本，而不是 HTML。若想插入 HTML，你需要使用 v-html 指令：
<p>Using text interpolation: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>Using text interpolation: This should be red.
Using v-html directive: This should be red.
这的 v-html attribute 被称为一个指令。指令由 v- 作为前缀，表明它们是一些由 Vue 提供的特殊 attribute，你可能已经猜到了，它们将为渲染的 DOM 应用特殊的响应式行为。这里我们做的事情简单来说就是：在当前组件实例上，将此元素的 innerHTML 与 rawHtml 属性保持同步。
span 的内容将会被替换为 rawHtml 属性的值，插值为纯 HTML——数据绑定将会被忽略。注意，你不能使用 v-html 来拼接组合模板，因为 Vue 不是一个基于字符串的模板引擎。在使用 Vue 时，应当使用组件作为 UI 重用和组合的基本单元。
标签：Vue,HTML,05,text,html,Using,模板 From： https://blog.51cto.com/JavaEdge/6456004在网站上动态渲染任意 HTML 是非常危险的，因为这非常容易造成 XSS 漏洞。请仅在内容安全可信时再使用
v-html，并且永远不要使用用户提供的 HTML 内容。