VueJS for Dummies — From Vanilla JS to ES6

Sebastian Camacho
Dec 18, 2018 · 5 min read

If you have been in the world of programming for years, you will agree with me that the way of doing things on the web has evolved a lot in a relatively short time.

Since the appearance of Ajax and libraries like jQuery, the web pages or web applications offer a better user experience.

Nowadays, if we think about creating a web application, in most cases we think about creating a Single Page Application. If you are not familiar with the concept, a Single Page Application or SPA, is basically a website that is accessed by a single entry point, usually an index.html. We can navigate through the application, change the route and see how our page or how our view is updated without having to reload all the content again.

As mentioned above, this allows us to offer a nice user experience, and best of all, we have several tools to create our own SPA such as Angular, React and Vue, about last, we will be talking in this article.

So, what is Vue then?

The first thing we must take in consideration, is that Vue is not a new programming language. Vue is a framework for programming web and mobile applications using Javascript. With Vue we can do the same things that we can do with Angular or React. We don’t need to know use Angular or React to learn to use Vue, just Javascript.

A progressive and reactive framework

Vue is defined as a progressive framework, because we don’t need to have the whole framework to do simple things. We can add more functionalities if we need to do more complex things.

For example, if we have a list of data in a simple html page, and we want to show, sort or filter by a certain value, we can use Vue in its simplest form. As we would do with jQuery, we only need to import the core library.

But, if we want to show an element’s details in another page, we need to add the vue-router library which allows us to define routes in our application.

And what if we want to share data between our components? If we want to share data between our application’s components, we can add the Vuex library, which allows us to manage the global state of our application.

Another Vue characteristic is that it’s reactive, it reacts to the changes on the data model. This means that Vue is always observing changes in our model to update the view if would be required.

Let’s write our first application with Vue!

What are we going to do now? We are going to create a web page that shows the top 100 of cryptocurrencies, obtaining data from the CoinMarketCap API. We will create an HTML page and import Vue from a CDN, in addition we will import three more libraries: Axios, Numeral.js and Bootstrap.

The first step is to create our html code adding the script with the Vue instance.

In this first piece of code, we are creating a new vue instance that it’s receiving a JSON parameter. This JSON will be defining the our application behavior. In the attribute , we must define where we want the vue instance works. On other hand, we must also define an attribute to contain our data model.

We have defined two data properties, and . The first property will be a flag to show or hide a simple label with a loading message. And the second one, will contain a list of cryptocurrencies.

Consider that we are using the directive, this one will allow us to render html blocks conditionally.

Now, we have to add a function to load the currencies from the CoinMarketCap API.

We can see here new properties in our JSON parameter, and . The property allow us to define the methods to build the application logic. In our case, we have defined one only method named to load the list of currencies into our data model, in the attribute.

, is a life cycle method which allow us to add behavior to our application once the instance or component has been added to the DOM.

Now, we have to add the html code to show the list of cryptocurrencies.

We can see new things here. The use of the directiveallow us to indicate an “else block” for an . On other hand, the element, serves as an invisible wrapper. The final rendered result will not include the <template> element. Also, the v-for directive allow us to render multiple times an specific block.

Something important to consider is the use of the v-bind directive or their shorthand “:”, it allow us to use an expression to specify a value. For example, we are using v-bind to assign an expression to the src attribute in the images.

Now, we have to add these two methods to our JSON object.

At this point, we have our application almost ready. The last thing that we are going to add, is a filter to format the numbers that we are going to show in the list.

Awesome! We already have our first application created with VueJS!

For this demo we have used only some of the features of this framework. If you liked it and want to learn more, I recommend you visit the official Vue website.

You can see the demo working here, and the whole code in the 1950labs Github page.

This has been the first part of a set of 2 articles. Follow our blog at 1950Labs to keep updated and not miss the the next part, in which we will be building a SPA with Vue, using the Vue CLI user interface. See you in the next post!

At we believe in distributed teams for building high-quality software. If you are looking for an alternative to contractors, freelancers or US vendors, write us to to start talking. — We work on your time zone.

(Published in the Montevideo VueJS Meetup)

1950Labs | Working Remote

Boutique Software Development Shop from Montevideo, Uruguay.

Sebastian Camacho

Written by

Senior Full Stack Developer

1950Labs | Working Remote

Boutique Software Development Shop from Montevideo, Uruguay.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade