这节课我们来了解 mustache 语法、v-html 指令和模板语法的用途。

mustache 语法

Vue.js 允许我们以与编写标准 HTML 相同的方式编写文本。

它支持所有 HTML 元素，例如 <h1>、<p> 和 <div>。

Vue.js 的文本更进一步，通过提供动态文本绑定到 data，然后根据引用变量的值解析为简单的文本。

这是使用mustache 语法来实现的，即 {{ variable }} 双花括号。

Vue 中简单文本和动态文本绑定的示例如下面的应用程序所示：

new Vue({
  el: '#app',
  template:
  `<div>
    <h1>Vue.js Application</h1>
    <div>我是一段静态文本</div>
    <p><b>{{ dynamicText }}</b> </p>
  </div>
  `,
  data: {
      dynamicText: '我是一段动态文本'
  }
})

v-html 指令

Vue.js 还允许我们编写标准 HTML 并将其用作将由 Vue 本身编译的表达式。

{{}} 符号将数据解释为纯文本而不是 HTML。

因此，要解析 HTML 表达式，需要使用 v-html 指令。

下面提供了原始 HTML 解析的示例：

new Vue({
  el: '#app',
  template:
  `<div>
    <p>使用模板语法: {{ myHtml }}</p>
    <p>使用 v-html 指令： <span v-html="myHTML"></span></p>
  </div>
  `,
  data: {
      myHTML: `<span style="color: green; font-family: monospace; font-size: 40px;">
                    我是要被渲染的原始 HTML。
               </span>`
  }
})

获取用户输入并动态渲染它可能会有危险，因为它可能导致XSS 漏洞！

请记住只对受信任的内容使用 v-html，而不要对用户提供的内容使用。

模板语法

Vue.js 使用基于 HTML 的模板语法，允许您以声明方式将呈现的 DOM 绑定到底层 Vue 实例的数据。所有 Vue.js 模板都是可以被浏览器解析的有效 HTML。

在底层，Vue 将模板编译为虚拟 DOM 渲染函数。结合响应式系统，Vue 能够智能地解决最少数量的组件以在虚拟 DOM 更改时重新渲染和使用最少数量的 DOM 操作。