2 模板语法和反应式的初探
- 初探 Vue 的反应式
  - 注意：

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

原文： https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/

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

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

来自“index.html”的摘录，

<div id="app">
    <h1>{{ message }}</h1>
</div>

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

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

var app = new Vue({
  el: "#app",
  data: {
    message: "Hello World!!!"
  }
});

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

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

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

初探 Vue 的反应式

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

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

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

在 Chrome 浏览器中打开 DevTools（快捷方式：F12）。
点击“控制台”。
记住，我们将整个 Vue 实例分配给变量“app”。因此，要从数据对象访问“消息”，只需键入app.message = "Hey Vue, what's up?"
并且不要忘记单击“控制台”部分中的“输入”以查看其运行情况。

注意：

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

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

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

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

<div id="app">
    <h1>Hey {{ message }}!</h1>
    <hr/>
    <p>This is my first {{ message }} app.</p>
    <p>I successfully understood {{ message }}'s reactivity.</p>
</div>

另外，让我们将index.js文件中message属性的值更改为“Vue”，而不是“Hello World !!!”。只是为了使这些句子更有意义。

var app = new Vue({
  el: "#app",
  data: {
    message: "Vue"
  }
});

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

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

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

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

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

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