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

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

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

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

来自“index.html”的摘录,

  1. <div id="app">
  2. <h1>{{ message }}</h1>
  3. </div>

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

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

  1. var app = new Vue({
  2. el: "#app",
  3. data: {
  4. message: "Hello World!!!"
  5. }
  6. });

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

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

到目前为止的输出是(就像我们在上一篇文章中看到的那样),

Vue.js output

初探 Vue 的反应式

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

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

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

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

reactivity in action

注意:

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

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

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

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

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

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

  1. var app = new Vue({
  2. el: "#app",
  3. data: {
  4. message: "Vue"
  5. }
  6. });

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

Template syntax output

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

Reactivity at multiple places

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

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

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

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