# 2.模板语法和反应性的一瞥

> 原文： [https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/](https://javabeginnerstutorial.com/js/vue-js/2-template-syntax-reactivity/)

嘿! 欢迎阅读关于 Vue 的另一篇有趣的文章！ 我们不仅要了解模板语法，还可以了解 Vue 的反应性。 这似乎就像我们之前的文章“ [Hello World with Vue.js](https://javabeginnerstutorial.com/js/vue-js/1-hello-world-with-vue-js/) ”的继续。 因此，请确保您快速浏览一下，以了解我们到目前为止讨论的内容。 请参阅 [GitHub 存储库](https://github.com/JBTAdmin/vuejs)中的代码。

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

来自“ index.html”的摘录，

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

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

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

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

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

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

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

![Vue.js output](data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20983%20480'%3E%3C/svg%3E)

<noscript><img alt="Vue.js output" class="alignnone size-full wp-image-13685" height="480" src="img/6db1fd39a9ccc23d42cc746ed9c95ad8.png" width="983"/><h2><strong>一窥 Vue 的反应性</strong></h2><p><span class="ezoic-adpicker-ad" id="ezoic-pub-ad-placeholder-124"> </span> <span class="ezoic-ad box-4 adtester-container adtester-container-124" data-ez-name="javabeginnerstutorial_com-box-4" style="display:block !important;float:none;margin-bottom:2px !important;margin-left:0px !important;margin-right:0px !important;margin-top:2px !important;min-height:110px;min-width:728px;text-align:center !important;"> <span class="ezoic-ad" ezah="90" ezaw="728" id="div-gpt-ad-javabeginnerstutorial_com-box-4-0" style="position:relative;z-index:0;display:inline-block;min-height:90px;min-width:728px;"> </span> </span>如果您认为使用模板语法进行渲染本身很棒，那么就准备惊讶吧！ 因为 Vue 是<strong>反应性</strong>。</p><p><em>反应性</em>实际是什么意思？ 我们知道，在 Vue 实例中指定的数据链接到 HTML 代码中“ el”范围内所引用的任何位置。 Vue 不仅<strong>会在被引用的 DOM 中呈现</strong>数据，而且<strong>每当在数据对象中更改其值时也会更新</strong>。</p><p>很难缠住头吗？ 然后，让我们看到所有这些实时发生的反应。</p><li>在 Chrome 浏览器中打开 DevTools（快捷方式：F12）。</li><li>点击“控制台”。</li><li>记住，我们将整个 Vue 实例分配给变量“ app”。 因此，要从数据对象访问“消息”，只需键入<code data-enlighter-language="js">app.message = "Hey Vue, what's up?"</code></li><li>并且不要忘记单击“控制台”部分中的“ <strong>输入</strong>”以查看其运行情况。</li><p><img alt="reactivity in action" class="alignnone size-full wp-image-13732" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/08/3_ReactivityInAction-1.jpg" height="363" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20356%20363'%3E%3C/svg%3E" width="356"/></p><noscript><img alt="reactivity in action" class="alignnone size-full wp-image-13732" height="363" src="img/a5f2cebad59f4377dc2a4483d01e4f09.png" width="356"/><h3><strong> <em>注意：</em> </strong></h3><p><em>您也可以这样做<code data-enlighter-language="js">app.$data.message = "Hey Vue, what's up?"</code> </em></p><p><em>，然后单击“ Enter”。 它将正常工作。 在即将发布的系列文章中，我们将回答您在太阳下遇到的每个“为什么”和“如何”问题。 现在，只知道这是访问<code>message</code>属性的另一种方法。 </em></p><p>请记住，可以在多个位置引用数据，并且可以在每个位置自动更新数据。 让我们也尝试一下！</p><p>将<code>index.html</code>文件的<code>&lt;div&gt;</code>部分的代码更新为</p><pre><code class="language-html">&lt;div id="app"&gt; &lt;h1&gt;Hey {{ message }}!&lt;/h1&gt; &lt;hr/&gt; &lt;p&gt;This is my first {{ message }} app.&lt;/p&gt; &lt;p&gt;I successfully understood {{ message }}'s reactivity.&lt;/p&gt; &lt;/div&gt; </code></pre><p>另外，让我们将<code>index.js</code>文件中<code>message</code>属性的值更改为“ Vue”，而不是“ Hello World !!!”。 只是为了使这些句子更有意义。</p><pre><code class="language-javascript">var app = new Vue({ el: "#app", data: { message: "Vue" } });</code></pre><p>现在，让我们看一下输出。</p><p><img alt="Template syntax output" class="alignnone size-full wp-image-13730" data-lazy-sizes="(max-width: 919px) 100vw, 919px" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/08/1_MultipleRendering-1.jpg" data-lazy-srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/08/1_MultipleRendering-1.jpg 919w, https://javabeginnerstutorial.com/wp-content/uploads/2018/08/1_MultipleRendering-1-300x173.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/08/1_MultipleRendering-1-768x443.jpg 768w" height="530" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20919%20530'%3E%3C/svg%3E" width="919"/></p><noscript><img alt="Template syntax output" class="alignnone size-full wp-image-13730" height="530" sizes="(max-width: 919px) 100vw, 919px" src="img/f0ca1d3ada6af3aff784a475696db25b.png" srcset="https://javabeginnerstutorial.com/wp-content/uploads/2018/08/1_MultipleRendering-1.jpg 919w, https://javabeginnerstutorial.com/wp-content/uploads/2018/08/1_MultipleRendering-1-300x173.jpg 300w, https://javabeginnerstutorial.com/wp-content/uploads/2018/08/1_MultipleRendering-1-768x443.jpg 768w" width="919"/><p>是时候在多个地方看到一些反应发生了。 和以前一样，让我们​​在 Chrome 浏览器的 DevTools 控制台中更改<code>message</code>属性的值。</p><p><img alt="Reactivity at multiple places" class="alignnone size-full wp-image-13731" data-lazy-src="https://javabeginnerstutorial.com/wp-content/uploads/2018/08/2_MultipleReactivity-1.jpg" height="390" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20421%20390'%3E%3C/svg%3E" width="421"/></p><noscript><img alt="Reactivity at multiple places" class="alignnone size-full wp-image-13731" height="390" src="img/ad819e5f91d3748a6b02ab6da1e50ab5.png" width="421"/><p>当您按下<code>Enter</code>时，在我们的 HTML 代码中引用<code>message</code>的每个位置都将立即更新为新值“ vue.js”，这就是您现在在 DOM 中看到的内容。</p><p>这不仅令人惊讶吗？ 是的，这就是我们忙于玩 Candy Crush 时 Vue 团队或 Evan You 所要做的！ 在本系列教程中，我们将看到更多示例，以各种其他方式展示了反应性。</p><p>试想一下，如果您使用香草 JavaScript 或 jQuery 实现类似这样的功能，将需要多少编码！</p><p>话虽如此，我请假。 祝您有美好的一天！</p><p> </p><div class="sticky-nav" style="font-size: 15px;"><div class="sticky-nav-image"></div><div class="sticky-nav-holder"><div class="sticky-nav_item"><h6 class="heading-sm">下一篇文章</h6></div><h5 class="sticky-nav_heading " style="font-size: 15px;"><a href="https://javabeginnerstutorial.com/vue-js/3-vue-directives/" title="3\. Introduction to Vue directives"> 3\. Vue 指令简介</a></h5></div></div> </body> </html></noscript>