0
点赞
收藏
分享

微信扫一扫

09Vue - 模板语法(插值-文本)

Gaaidou 2022-03-25 阅读 62


Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。

在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

如果你熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,你也可以不用模板,​直接写渲染(render)函数​,使用可选的 JSX 语法。

数据绑定最常见的形式就是使用 “Mustache” 语法(双大括号)的文本插值:

<span>Message: {{ msg }}</span>

Mustache 标签将会被替代为对应数据对象上 ​msg​ 属性的值。无论何时,绑定的数据对象上 ​msg​ 属性发生了改变,插值处的内容都会更新。

通过使用 ​v-once​ 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新。但请留心这会影响到该节点上所有的数据绑定:

<span v-once>This will never change: {{ msg }}</span>



举报

相关推荐

0 条评论