2 模板语法和反应式的初探

嘿! 欢迎阅读关于 Vue 的另一篇有趣的文章！我们不仅要了解模板语法，还可以了解 Vue 的反应式。这似乎就像我们之前的文章“ ”的继续。因此，请确保您快速浏览一下，以了解我们到目前为止讨论的内容。请参阅 GitHub 仓库中的代码。

还记得我们如何在 HTML 代码中使用两个花括号将数据呈现到 DOM 吗？让我们深入了解它，以了解 Vue 如何在引擎盖下工作。

来自“”的摘录，

这个“两个大括号”的意思是“模板语法”，可以用它声明性地将数据渲染到 DOM。由于系统是 Vue.js 的核心，因此这是可能的。模板语法也称为“胡子语法”。

以下是“index.js”文件中的代码，

每当遇到模板语法时，Vue 都会自动查看其数据属性的对象，并将相应的值呈现给 DOM。

您是否注意到我已将 Vue 实例分配给变量“app”？下一节将使用它来演示 Vue 附带的一些反应式！

到目前为止的输出是（就像我们在上一篇文章中看到的那样），

如果您认为使用模板语法进行渲染本身很棒，那么就准备惊讶吧！因为 Vue 是反应式。

反应式实际是什么意思？我们知道，在 Vue 实例中指定的数据链接到 HTML 代码中“el”范围内所引用的任何位置。 Vue 不仅会在被引用的 DOM 中呈现数据，而且每当在数据对象中更改其值时也会更新。

很难缠住头吗？然后，让我们看到所有这些实时发生的反应。

您也可以这样做app.$data.message = "Hey Vue, what's up?"

然后单击“Enter”。它将正常工作。在即将发布的系列文章中，我们将回答您在太阳下遇到的每个“为什么”和“如何”问题。现在，只知道这是访问message属性的另一种方法。

请记住，可以在多个位置引用数据，并且可以在每个位置自动更新数据。让我们也尝试一下！

将index.html文件的<div>部分的代码更新为

现在，让我们看一下输出。

是时候在多个地方看到一些反应发生了。和以前一样，让我们在 Chrome 浏览器的 DevTools 控制台中更改message属性的值。

当您按下Enter时，在我们的 HTML 代码中引用的每个位置都将立即更新为新值“Vue”，这就是您现在在 DOM 中看到的内容。

这不仅令人惊讶吗？是的，这就是我们忙于玩 Candy Crush 时 Vue 团队或 Evan You 所要做的！在本系列教程中，我们将看到更多示例，以各种其他方式展示了反应式。

试想一下，如果您使用香草 JavaScript 或 jQuery 实现类似这样的功能，将需要多少编码！

话虽如此，我请假。祝您有美好的一天！