Vue Js is a popular javascript framework for building modern web application. Vue Js focuses mostly on building the front end, unlike traditional javascript, the framework relies on state variables that trigger the DOM to render each time they change. This simplifies develloping considerably by allowing devellopers to focus more on the logic and leaving Vue handle the DOM.

In this tutorial we will only explore the basics of vue, mastering those fundementals will give you the requirements to start with Vue Js. Vue Js being a javascript framework, having some basics understanding of javascript, html and css may be required to follow along.

Single-File Component (SFC)

A single file component is the building block of any vue project, the file can be broken down in 3 parts :

• Script Tag that handles the logic, the way the component will behave.
• Template Tag describes the html structure of the component, and can include dynamic data defines in the script tag.
• Style Tag handles the styling of the component.

Vue Js supports two Api Styles, Composition Api and Options Api, both may differ in terms of code structuring, but the end result is still the same. For the sake of having a friendly and familiar javascript code, all the examples in this tutorial will only use Options Api.

Component Logic

The whole component logic is exported as an object from the script tag. Vue supports a variety of predefined methods and objects we need to implement in order to expose the component logic to the template. The most important are :

• data : is a method that returns all the state variables in one single object, all the variable defined inside that object are exposed as properties of the exported object and can be accessed from that object reference by using the keyword this.
• methods : is an object inside which, you implement all the function your logic is relying on.

Below is a simple example on how a single file component is structured.

Text interpolation

Text interpolation is a way to bind html content to a data. The component holding the data will render each time the data is changed. Vue uses double mustache syntax inside the template to hold the data.

In the example above, data method returns a variable named "text" which is used to populate the template.

Vue extends html attributes by providing directives to better integrate data to your template. In this tutorial we will explore some of them.

v-bind

v-bind directive is used to bind an html attribute to your data. The attribute becoming dynamic, responds to any change in the data it's bound to.

In this example, the class attribute is bound to "colorClass".

A more simpler syntax consist on removing the "v-bind" keyword and keeping only the colon.

v-model

v-model allows for two way binding on an input tag, this means data can be updated not only from within your code logic, but also each time the input value is changed by the user.

v-on

This directive is meant to handle events. In this case the directive binds the event callback to a function defined inside the "methods" object.

This directive also allows for a shorter syntax by replacing v-on by "@" and removing the colon.

v-if, v-else-if, v-else

v-if, v-else-if, v-else are conditional statement, they behave the same way we use them in any programing language, they allow us to render the html based on whether or not the condition is true.

v-for

v-for as you can guess is no different than our usual loop statement, each iteration in the loop create a html block with custom data, representing each item from our list.

This wraps up our short introduction of the vue js. This tutorial was primary meant to get familiar with vue and the way vue application is structured. Further understanding of this framework is still required to build a complete project.