Getting Started With Vue.js: The Vue Instance

In my last blog post, I gave an introduction of how to get started learning Vue. I talked about how it is similar to React, the framework I’ve used most often, and I gave some instructions for one of the ways to get a project set-up to try out Vue on your own computer. I ended my post by talking about the Vue instance and how to show data from it on a webpage. The instance is what Vue is all about, and I’ll go into some of the things it can do and how to use it in this blog post.

As a reminder from last time, a basic Vue instance looks like this:

new Vue({
  data: {
    // put properties you will use here
  }
})

The data part of the Vue instance is arguably the most important. Any properties that you put into the data object are automatically tracked by Vue, and any changes you make to any of these properties will cause a re-render to your page so it will always show the updated values. Any sort of data that you want to use and keep track of should go in here. The data you keep in your data object can be of most any type; numbers, a String, a boolean value (true or false), an array, or even a function. It can also be something evaluated like this:

new Vue({
  data: {
    date: new Date().toLocaleString()
  }
})

This example uses JavaScript’s built in Date class to get the exact date and time when it is called, then uses a method to turn the date object into a human readable String. As another refresher, the way to use this property in a webpage is by wrapping it in double brackets in your HTML and adding the el property to the instance with a reference to the HTML element:

<div id="name">
  {{ date }}
</div>

Now we can see the date String with the date and time on the page like this:

This date will be the exact date and time from when you loaded the page, and it will not update unless you refresh the page. When interpolating data inside these double brackets, you are not just limited to referencing a predefined piece of data, you can also use a piece of code to change what shows up on the page. For example, if you wanted to only show the date without the time, you could split the date property at the comma and only display the first part, like so:

{{ date.split(',')[0] }}

One thing to note: you can only put one expression in each of the pairs of brackets, so you can’t do anything too complicated to the data in your HTML. But there are things you can add to your Vue instance to write longer or more complicated code.

Another property you can add to the Vue instance besides el and data is methods. Up till now, I’ve only talked about opening the console to manually change the data in your instance, but you’ll often want to use functions to do this. Here’s an example of an instance with the method property:

new Vue({
  el: "#counter",
  data: {
    count: 0
  },
  methods: {
    add: function () {
      this.count++
    }
  }
})

Now, using a directive, something I’ll talk more about in my next blog post, you can attach this function to a button on the DOM:

<div id="counter">
  <p>Count: {{ count }}</p>
  <button v-on:click="add">Add</button>
</div>

This example uses the v-on directive to create an event listener when you click the button, and it attaches the add function to the listener. Now, if you click the Add button you can see the count go up on the screen.

The last property for Vue instances that I’ll talk about is the computed property. It is very similar to the methods property, in that it also uses functions. For example:

new Vue({
  data: {
    firstName: "Jane",
    lastName: "Doe"
  },
  computed: {
    fullName: function () {
      return `${this.firstName} ${this.lastName}`
    }
  }
})

This computed property will always return the firstName and lastName properties with a space between, and it will update whenever one of the other properties changes. You might think it would be the same thing to have this function in the methods property or to make this function a part of data, but it is slightly different. For one thing, if you use a computed property, you can reference it in the DOM the same as you would any piece of data, instead of using parentheses to call it like a function. Also, a computed property only updates when some of the data it uses updates, as opposed to functions that re-compute the result any time it’s referenced in the DOM. So, if you are doing a complicated and time consuming evaluation, it will be more expensive time-wise not to use a computed property.

Ultimately, Vue instances are designed to help you reference and change data on your webpages by making it easy to keep track of updates and giving you a variety of ways to change the data in any way you might need. So far, I’ve only talked a little about all the cool ways Vue gives you to render that data to the DOM. That will be the focus of my next blog post, where I’ll talk about Vue directives.