30 Days of Vue

The Vue Instance - Data Driven Applications

 

This post is part of the series 30 Days of Vue.

In this series, we're starting from the very basics and walk through everything you need to know to get started with Vue. If you've ever wanted to learn Vue, this is the place to start!

The Vue Instance - Data Driven Applications

In yesterday’s article, we’ve come to understand how data behaves reactively in Vue. Today, we’re going to spend a little more time discussing this behavior since it plays an especially important role in how we build applications in Vue.

Reactive Data

Data in Vue is treated as reactive since modifying data often directly causes the view to update. For every key-value pair we declare in the data property of an instance, the Vue library creates getters and setters pertaining to that property. These setters and getters work under the hood to track the data properties and cause the template to re-render when a change has been made.

For a more detailed explanation of data reactivity - be sure to read through the Reactivity in Depth section of the core Vue documentation.

For those who may be coming from a React background, you might notice reactive state (i.e. data) is different to how data is handled in React. In React, state should often be treated as immutable. Reactive state is one of the key differences that make Vue unique. State (i.e. data) management is often intuitive and easy to understand since modifying state directly causes the view to update.

Data Driven Applications

The reactive nature of data in Vue help facilitates the possibility of building applications in a data-driven manner. To get a better understanding of this, we’ll take a look at the simple application we built in yesterday’s article.

Live version - https://30dofv-simpledatachange.surge.sh

Let’s assume we wanted to scale the application and introduce capabilities like:

  • Displaying the current date and time.
  • Toggling the user and city information from a list of options.
  • Toggling the background color with the click of a button.
  • etc...

With all these capabilities, we would adopt the reactive nature of Vue and introduce new data properties like date that’s given a value of the current date ( new Date()) or cities which could be an array that contains a series of cities like ['Lagos', 'New York', 'Tokyo', 'Toronto'].

The Mustache Syntax and certain directives (which we’ll start to see in the next article), will help us in binding all or some of this information to the template. With the help of methods and other inline capabilities, we can trigger changes to the instance data which would update the template to the situations we intend to see. This sort of explains the data-driven mindset of how we build our UI.

If you've used React, Angular, or other modern-day front end frameworks/libraries; you might be used to a similar pattern on how modifying data/state drives the changes in an application UI.

In contrast, let’s aim to reproduce the functionality of the application in the last article (i.e. toggling the greeting message with the click of a button) with the use of only standard (i.e. vanilla) JavaScript. Though there are a few ways to achieve this, we might come up with something like this:

HTML

<html>
  <head>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <div id="app">
      <h2>Hello World!</h2>
      <p>by Hassan Djirdeh who lives in Toronto</p>
      <button onclick="changeGreeting()">
        Change Greeting
      </button>
    </div>
    <script src="./main.js"></script>
  </body>
</html>

JS

// Vanilla JS implementation

let greetingTag = document.getElementsByTagName("h2")[0];

changeGreeting = () => {
  if (greetingTag.textContent === 'Hello World!') {
    greetingTag.textContent = 'What is up!';
  } else {
    greetingTag.textContent = 'Hello World!';
  }
}

The functionality that achieves the direct toggle between the different text content is inherently similar to what we had before:

The entire source code for this tutorial series can be found in the GitHub repo, which includes all the styles and code samples.

If at any point you feel stuck, have further questions, feel free to reach out to us by:

Get started now

Join us on our 30-day journey in Vue. Join thousands of other professional Vue developers and learn one of the most powerful web application development frameworks available today.

No spam ever. Easy to unsubscribe.