mustache 语法、原始 HTML 和模板语法

浏览 193

课文

这节课我们来了解 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 操作。

评论

登录参与讨论

暂无评论

共 0 条
  • 1
前往
  • 1