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

浏览 23

课文

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