mustache 语法、原始 HTML 和模板语法
浏览 475
课文
这节课我们来了解 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 操作。
评论
暂无评论