5 数据绑定第 1 部分（文本，原始 HTML，JavaScript 表达式）

今天，我非常激动，因为我们将要讨论 Vue.js 中一些最有趣的数据绑定技术。 有必要了解，我们提供了多种将 DOM 与基础 Vue 实例的数据对象绑定的方法。

还记得我们在先前文章之一中讨论的胡须/模板语法吗？ 这是数据绑定的基本形式，称为“文本插值”。 可以使用伪指令v-once执行一次插值，尽管稍后会更新该属性的初始值。 单击，以获取有关v-once的详细说明以及代码示例和屏幕截图。

默认情况下，Vue 始终将模板语法中的数据视为纯文本。 在大多数情况下，这正是我们想要的。 但是，编码完全是旅途中意外的转折。 如果有一天我们想传递原始 HTML 并相应地在 DOM 中呈现该怎么办？ 当然，您不能使用那些双花括号，因为如果这样做，您将得到。

使用v-html指令会将标记的内容替换为vueLink数据属性的值，并将其解释为纯 HTML。 因此，超链接以指定的绿色显示。

双花括号以及显示纯文本还可以求值单个 JavaScript 表达式。

请记住，仅是单个表达式。 不是语句，不是流控件，不是任何用户定义的全局变量！ 让我们来看一些示例

1. js 允许访问模板表达式中的几个全局对象，即Math和。 小心，不允许访问用户定义的全局变量。

1. 流控制语句（如if-else，for，while，do-while等）将不起作用，因此剩下的唯一选择是使用三元表达式。 始终建议将复杂的逻辑放入我们将在以后的文章中详细讨论的方法中。

完整的代码如下，

Index.js

输出如下，

上面讨论的所有代码都可以在 GitHub 仓库中找到。

祝你今天愉快 ？