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?
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 el, we must define where we want the vue instance works. On other hand, we must also define an attribute data to contain our data model.
We have defined two data properties, loading and currencies. 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 v-if 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, methods and mounted. The methods property allow us to define the methods to build the application logic. In our case, we have defined one only method named loadCurrencies to load the list of currencies into our data model, in the currencies attribute.
Mounted, 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 v-else directive allow us to indicate an “else block” for an v-if. On other hand, the template 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.
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!