18 January 2018
by Mike Vezzani

Understanding Beginnings: How to Instantiate a New Vue on Life

In the previous article of this Vue series, feet got wet and basics were covered
that would enable a user to get started with exploring what Vue.js could do. That
was a simpler time, when you were allowed to enjoy such innocent pleasures. But
that kind of innocence only lasts so long before you find yourself scraping to
understand why the code on line 27 is throwing a Uncaught TypeError: Cannot
read property of undefined. And you know what is really scary?
StackOverflow may not be there to hold your hand through it all.

So today we are going to dive deeper into how a new instance of Vue.js gets
bootstrapped into the DOM and what lifecycle hooks are available to you during
that instantiation process. Then we will dig in to the template syntax that
Vue.js leverages. At the end of this article you should have a pretty good
understanding of how Vue.js attaches itself to the DOM and how it renders content
within the HTML document of your project.

An Instance with a Vue

The previous article demonstrated several very simple apps, in each of which I
instantiated a new Vue.js instance to handle the functionality I wanted to
create. Within a production sized application, it likely doesn’t make
sense to instantiate new Vue.js objects all over the page, instead favoring
composing the app of several Vue components. We will explore how to accomplish
this composability within Vue.js at a later point. For now we will favor
understanding what arguments are necessary to create our shiny new Vue
instance.
Keeping it simple, a new Vue.js instance really only requires a JSON object
with two key-value pairs; el and data. The value assigned to el could really
be any element within your HTML document (excepting the html, head, and body tags), including a class name, but it is
important to know that the Vue app you instantiate will only attach itself to
the first element in your document whose class name matches what you provided
to your Vue instance. Best practice is to provide
the el key in the instantiation JSON object with an id from the DOM, like so:

The value provided to the data key is itself another object with key-value pairs.
These are the custom properties defined by you on your Vue instance and they are
Reactive according to the Vue.js documentation. This simply means that if these
properties are being used by the DOM, as the values to these properties dynamically
change within the Vue.js instance as a result of an AJAX call or a user interaction,
the DOM will reflect those changes, rerendering the view with the new values. For
example:

When the page renders, the text “This is some truly amazing text!” will display
on the screen. However, if you open the web inspector console, type app.amazingText =
'not really great text', you will see the view immediately rerender and the message
on the page will instead read “This is some not really great text”.

So properties within the data attribute of my Vue instance are tied to the DOM. Cool
beans.

Lifecycle Hooks: They’ll Hook You Too

At the risk of explaining a concept that is likely very familiar to many of you, lifecycle
hooks provide a way to trigger custom code execution at various points of the Vue.js
instance’s lifecycle. What’s a practical example of this?
Well let’s say that your Vue.js instance requires some data from an external server
and you want to make an AJAX call to retrieve that data so that it can be displayed
on the page. It would be possible to figure out a way to trigger that call outside
of the Vue.js framework, but it would be inconvenient and likely pretty hacky, just
like an axe in your leg.
Instead you could tap into the beforeCreate or beforeMount lifecycle hooks to go get
that data and assign it to your instance’s properties, saving you the hassle of figuring
out how to trigger that behavior yourself. The lifecycle hooks that Vue.js provides are
as follows:

beforeCreate

created

beforeMount

mounted

beforeUpdate

updated

beforeDestroy

destroyed

It is pretty easy to intuit what each of these does, save the beforeMount and mounted
hooks, so they probably deserve a bit of explanation.
beforeMount gets called just before the Vue object gets bootstrapped to its assigned
element. If you intend to mount to an element with an id of foobar then the beforeMount
code will get called before the Vue object attaches itself to the foobar element
on your page.
mounted gets called after the Vue object has attached itself to the designated HTML
DOM element.
These lifecycle hooks get defined as methods on the Vue instance, but they are defined
outside of the custom defined methods that you may need to use within your project.

Here you can see that I created a custom method on the Vue object called
changeMessage(). However, I also defined a created function on the Vue instance
which, when the Vue framework reads, will call that function and execute the code
I provide in its definition.

Lifecycle Hooks, huh? Welp, see ya later!

Template Syntax

Now that we have a better idea of what is going on when a new Vue instance is
created, and what we can do at the different points of the instance’s lifecycle,
it is time to pivot a bit and talk about Vue.js’s template syntax.

Interpolations

As you get more and more familiar with the Vue.js framework, you will see that much
has been borrowed from other frameworks, and template syntax is no exception. Data
that gets exposed to the DOM can be interpolated through the use of double curly
braces {{ }}, a pattern very common in other JS frameworks as well. So if I have
a custom property on my view instance named userName, and in my template I include
<p>Welcome back, {{ userName }}, I could expect to see something like “Welcome back,
Kotter” rendered on my screen.
So that is great for presenting data to end users, but what about attaching data
to HTML element attributes? That is where the v-bind directive provided by the
Vue.js framework comes in to play. Perhaps you would like to dynamically assign an
ID to an element on the page. You could accomplish that like so:

Of note is how Vue.js treats boolean attributes. Vue.js operates with a sense of
truthy and falsy values. null, undefined, false, '', and [] all are interpreted as
false when determining a boolean value. Most anything else gets treated as a truthy
value. So here:
<input v-bind:disabled="isInputDisabled"></input>
would result in the input field being disabled if isInputDisabled is a truthy
value. If isInputDisabled is a falsy value, the input field would work as normal.

Directives

Vue.js comes with several template directives built in, but the two most common
have got to be v-if and v-on.
v-if="booleanValue" allows for a DOM element to be conditionally displayed based
on the value of booleanValue. Once again, it is important to note that as long as the
value of booleanValue isn’t null, undefined, or false, it will be interpreted as
a truthy value.
v-on allows you to attach a DOM element to an event and run a custom method as a result
of that interaction. For example:

would result in displaying an alert box with the text “12 o’clock and all is well!”
in it. A much more practical application of this directive would to be execute a
POST request to a backend API for saving data.

Directives. They’re pretty direct!

Summary 3.25 hrs in

So now you have a better idea of what is going on when a Vue.js application bootstraps
its root instance, how you can, and why you might want to, tap into the power of lifecycle
hooks, and how to begin leveraging template syntax to create dynamic experiences for
your end users.

There is still so much left to learn, like event handling, form input bindings, and
components, but that will all be in good time. Up next! Computed Properties and
You.
For now, play around, do something stupid, and bask in the joy of your honeymoon phase with Vue.js!

Mike ·
Software Developer

Mike graduated from Brigham Young University with a BA in Interdisciplinary Humanities. He was introduced to the Ruby programming language 5 years ago. Since then, he has pursued solving problems in JavaScript, C#, and Elixir. When not programming, he enjoys cooking, carpentry, and playing piano. He hates his computer mouse.