Getting started with Vue.js

Vue.js is a micro JavaScript framework for creating reusable and reactive components on your site.

Front-end frameworks vary widely in both size and scope, where Vue.js stands out is in its minimal design and focus on adaptability. You have the choice of building your entire site using Vue.js, just a making a single element of your site reactive, or anything inbetween. Because of this, it is very approachable with a shallow learning curve.

In this article we are going to take a look at the core components of Vue.js and how to get setup and started, but first let’s take a look at when you would want to use a front-end framework like Vue.js and why.

Why Use a Front-End Framework

Front-end frameworks, like most frameworks come to abstract common tasks, the common denominator you find between projects. Vue.js specifically comes to abstract the process of creating HTML components which are dynamically updated through JavaScript.

A few of the pain-points that Vue.js solves for you, is generating the dynamic HTML, binding the HTML elements actions to your data keeping scope and context, and keeping track of when the HTML needs to be re-rendered automatically.

For example let’s say you have a page where you have a dynamic list of names. You may have written code that looks something like this:

When you build up the HTML manually—besides the fact that the code quickly becomes hard to manage in larger examples—there is no real connection between the data and the generated HTML. If the array of names changes you have to be aware of that and re-render the list. All this is also for just displaying dynamic data, if you want to add event handlers like an on click handler, in-order to save scope you will keep nesting your code further and further in:

With Vue.js you separate the HTML as a template which depicts what to generate based on the data given, and Vue.js will render it automatically.

This same example in Vue.js would look like the following:

We have full separation between the HTML aspects of the JavaScript code to the logic of the JavaScript code making everything self-contained and a lot more manageable. We are getting a bit ahead of ourselves though, let’s take a step back and look at how the core of Vue.js achieves this…

Data Driven DOM

At the core of Vue.js you define a correlation between your HTML and some data, and any time the data changes the HTML will be updated. The way this works is when instantiating a Vue.js component you pass it some data in the form of a JavaScript object, this object is then modified replacing its properties with trackable getter and setter methods.

Vue.js analyzes the data object while constructing the HTML and sees what data you used in-order to render the different HTML elements inside. Using this it monitors for changes made to the data object and knows exactly what to update and when.

Having such a tight binding between the data and the view drastically simplifies the development of front-end applications and minimizes errors due to misrepresentation. This separation of concerns allows you to focus on the logic of your application without needing to deal with updating the view at all.

Creating your first Vue.js app

Installation for Vue.js is as simple as including the library:

Now like I mentioned a Vue.js app is composed of a data object and an HTML template in which to embed the data. So for our first app to see Vue.js in action lets add to the body:

First we define a div which will be our HTML template for our Vue.js app. Inside we use the double braces for data interpolation into the HTML.

Inside the actual Vue.js app we simply define the data and connect the div as the element for the app to both render to and use as the template. Next, for added flare, we increment the count variable on our app once per second.

That’s all there is to creating a Vue.js application, opening this in your browser, you will see the page automatically updates every-time we update the data property.

Events and Methods

Now in most applications having the DOM react to the data being changed is only half the story, you also need a way to update the data, Vue.js takes care of this with events and methods. Methods are stored functions run in the context of your Vue.js app.

Let’s update our counter example to add the ability to start and stop the timer instead of it simply running:

In the HTML template, we added a button to start and stop the counter, to accomplish this we need the text on the button to be dynamic and we need an event handler for when the button is clicked.

To declare an event in Vue.js on an element, you prefix the name of any standard HTML DOM events with v-on:, so the mouseover event becomes v-on:mouseover or the keyup event becomes v-on:keyup. In our example we are using the v-on:click attribute to handle the click event.

Something you may have noticed is that for button’s text we are calling a method as opposed to just referencing a stored property. In many situations the data you store is not necessarily in the format you want to display it on the page. Methods can be used here to process the data, and all the reactivity you get from properties applies when using methods, if the underlying data changes the template will update accordingly.

In the Vue.js app, we now have a new property holding the timer variable, and some methods. The toggle method which is bound to the button’s click event checks whether or not the timer property is set, starting or stoping the timer respectively and the counterAction method is used to display the correct action in the button, again based on the timer variable.

Since the toggle method changes the timer property, and the counterAction method—which is in the Vue.js template—uses the timer property, any time toggle is called the template will re-render the button’s text.

It is worth noting that even though we don’t have an initial value for the timer property, it still needs to be declared when creating the Vue.js app. If you don’t declare the property from the beginning the property won’t be reactive and won’t cause the HTML to re-render when changed.

In our example, the view gets updated once a second while the timer is running, and so once a second our counterAction method will also be called when the button is redrawn. Vue.js lets us optimize this by caching the result of a method and only recalling the method if the underlying data specifically used in the method are changed. This is also useful if you use the same computed property in multiple places on the page, instead of processing the value multiple times, by caching the value, you can reduce a lot of overhead.

Let’s update the example to include cached properties:

The main difference besides for the caching, is that methods under computed are referenced as properties as opposed to methods, so in the HTML template we had to remove the brackets from counterAction.

Gabriel Manricks

Gabriel is a software engineer and consultant, you can check out his site here.