2. Template syntax and a glimpse into Reactivity

Hey! Welcome to yet another interesting article on Vue!! We are not just going to see about template syntax but also take a glimpse into Vue’s reactivity. This will seem just like a continuation of our previous article, “Hello World with Vue.js”. So make sure you give a quick glance to refresh your memory with whatever we discussed so far. Refer to the code in the GitHub repo.

Remember how we rendered data to the DOM using two curly braces in our HTML code? Let us dive deep into it to understand how Vue works under the hood.

A snippet from “index.html”,

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

This “two curly braces” thingy has a fancier name called the “template syntax”, using which we can declaratively render data to the DOM. This is possible because of a system that is at the core of Vue.js. Template syntax is also called as “mustache syntax”.

Below is the code from “index.js” file,

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

Whenever a template syntax is encountered, Vue will automatically look into its data property’s object and render the corresponding value to the DOM.

Did you notice that I have assigned the Vue instance to a variable, “app”? This will be used in the following section to demonstrate some reactivity that Vue ships with!

The output thus far is (just as we saw in our previous article),

A glimpse into Vue’s reactivity

If you had thought that rendering with template syntax was great in itself, then get ready to be astonished! Because Vue is reactive.

What does reactive actually mean? The data specified in the Vue instance as we know is linked to wherever it is being referenced in the HTML code that falls within the scope of the “el”. Vue not only renders the data in the DOM where it is being referenced but also updates it whenever its value is changed in the data object.

Finding it tough to wrap your heads around? Then, let us see all this reactivity happening in live.

• Open DevTools in Chrome browser (shortcut: F12).
• Click on “Console”.
• Remember, we assigned our entire Vue instance to a variable, “app”. So, to access “message” from the data object, just type,  app.message = "Hey Vue, what's up?"
• And don’t forget to click “Enter” in the Console section to see it in action.

Sticky note:

You can also do,  app.$data.message = "Hey Vue, what's up?" 

and click “Enter”. It will work just as fine. We will answer your every “why” and “how” question under the Sun in our series upcoming articles. For now, just know that this is an alternate way to access message property.

Remember, data can be referenced at multiple places and it will be automagically updated at every single place. Let us try that too!

Update the index.html file’s <div> section’s code as,

<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>

Also, let us change the value of message property in the index.js file to “Vue” instead of “Hello World!!!”. Just to make it more meaningful with these sentences.

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

Now, let us see the output.

Time to see some reactivity happening in multiple places. Just like before, let us change the value of message property in the Chrome browser’s DevTools’ Console.

Immediately when you press Enter, every single place where message is referenced in our HTML code, gets updated to the new value, “vue.js” and that is what you are now seeing in the DOM.

Isn’t all that just amazing? Yes, that’s what Vue team or Evan You was up to while we were busy playing Candy Crush! We will see a lot more examples going forward in this tutorial series demonstrating reactivity in various other ways.

Just imagine how much coding would have required if you had used vanilla JavaScript or jQuery for achieving something like this!!

That being said, I take my leave. Have a great day ahead!