Getting started with Vue.js

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

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…

20 Best New Websites, April 2023

In April’s edition, there’s a whole heap of large-scale, and even full-screen, video. Drone footage is back with a veng…

Exciting New Tools For Designers, April 2023

The AI revolution is having a huge impact on the types of products that are hitting the market, with almost every app b…

3 Essential Design Trends, March 2023

One thing that we often think about design trends is that they are probably good to make a list. That’s not always true…