Getting started with Vue.js

Default avatar.
May 10, 2017
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.

Read Next

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…