Interacting with the Vue Instance

So you’ve dabbled a bit with Vue.js, and you keep hearing about the Vue Instance. Sure, it allows us to interact with Vue.js on our page, but how?

Initializing The Vue Instance

Whether you add Vue.js using the CDN or the CLI tool, you still need to initialize the Vue instance in some way. By initializing this instance, you are then able to start interacting with Vue.js’ core library.

Clearly there’s not much going on in our instance at the moment. new Vue({}) is just our starting point. Below you’ll find some basic options that the Vue instance accepts.

Common Vue Instance Options

el:

In order for our Vue instance to be accessible in our view, we need to first mount it to an existing DOM element. For single page applications (SPAs) this will likely be the element id  attribute that directly follows the body tag.

It’s important to note that the value for el is a plain string, and we do not need to attach the HTML id symbol, #, to the string. Vue.js already expects this value to be an id.

Vue.js takes this element and it’s containing HTML and regenerates the DOM into a Vue template. Since the generation of the DOM occurs only once when the page loads, the only time el is needed as an option is when we initialize a new Vue instance.

data:

One of the benefits to using a Javascript framework like Vue.js is the ability to to make the DOM reactive, and one of the simplest ways to dynamically render data on your page, is to add a data object to the Vue instance. Below is an example of how you would set up your data properties:

The above example is a basic javascript object which contains three properties: namelocation, and interests.  These data properties are now available to be used within our Vue template generated by the el option.

Take a look at the template example below, we can now bind these data properties to our page using text interpolation; using the mustache syntax {{ }}.

Useful side notes when using data:

  • Vue will convert data properties into getters and setters. This allows the page to be reactive.
  • Once the instance initializes, you can no longer add reactive data to the instance this way. There are other ways to add new data with Vue.js, but not using this method.
  • Vue.js proxies all properties found in the data object, so you can reference properties within the instance using this.location. This is helpful in the following options.

methods:

Methods are event driven functions. Say we have a button on our page, which when clicked, changes our location property to San Fransisco. Our template may look like this:

@click= may look new to you, but it’s Vue.js’ way of saying: “When this element is clicked, run this method”. So changeLocation is the name of our method, and we can now define it within our instance.

As mentioned in the data section, since Vue.js proxies all our data properties, we have them available to use in other areas of our instance. In this case we can use this within the Vue instance and we can then reference our data property location. We reset the value, which will then bind to our template.

An important note is that Vue.js is not smart enough to know if it needs to re-run a method if the data dependencies do not change. If location is already set to “San Fransisco” and your method’s task is to change location to “San Fransisco”, the method will run every time.

computed:

Computed properties work just like methods, however they are cached and only re-computed when a dependency changes. These functions are smart, unlike methods, when it comes to knowing if it needs to run or not when the DOM updates.

Computed functions also don’t need to include the parentheses when called in the template.

An important note with computed functions is that they can only run synchronously. If you want to make asynchronous calls out to an API, you can use methods or the watch option.

watch:

Just as the name suggests, this option accepts properties that align with data properties. When a data property changes, you can add a callback function to run. This function is independent from a method or computed function. For instance, if name changes, we can run other functions.

As mentioned above, watch functions are GREAT for asynchronous calls!

By default watch functions automatically pass a value argument, which is the current value of the data property. You can reference this within your function like so:

Other Useful Vue.js Instance Options:

Below you’ll find a few more helpful options. You can find a longer list of options on the Vue API docs here.

props:

Since this post does not cover components, I wont go into too much detail about props, but this option is an array or object which contains data from a parent component to be used in the child component. As well as the properties being passed, you can specify the data types, validators, and required options.

 

Lifecycle Hook:

In addition to all the options mentioned so far, there are special options that execute during the life of the Vue instance. These hooks fire just as their names suggest so no need to go into individual details. These lifecycle hooks are:

  • beforeCreate
  • created
  • beforeMount
  • mounted
  • beforeUpdate
  • updated
  • activated
  • deactivated
  • beforeDestroy
  • destroyed
  • errorCaptured

So with those stated, here is just a small example how you might want to use these Vue Instance lifecycle hooks:

Wrapping Up with The Vue Instance:

We’ve only covered the tip of the iceberg when it comes to the Vue instance function and it’s available options. With the introduction of components that list of options grows tenfold! However, Vue.js is such a welcoming framework that you could build simple single page apps with just the options mentioned above!

Learning Vue.js, and want to follow along with my learning path? Check here for more posts about Vue!

(Visited 28 times, 1 visits today)