Introduction to VueJs

why is vue so popular

So you want to learn VueJs? Great! In this article, we will cover the basic introduction of VueJs. So, what is Vue? Vue is a progressive framework for building user interfaces. Vue is basically a frontend framework focused on View layer of MVC architecture structure. Vue is incrementally adoptable.

Vue has been consistently on the rise over the past year. It was first released in February 2014 by ex-Google employee Evan You. You can read why is Vue so popular in short period of time?.

Let’s get started integrating Vue in our system

Integrate Vue

Standalone

Using Vue in our system is easy. All you need to do is just import a vue.js file like you used to reference other javascript file.

NPM

Another option to install Vue is using NPM. NPM is a node package manager. Using this method, It pairs nicely with module bundlers such as Webpack or Browserify. Simply run the command:

CLI

Vue comes with its own CLI. It provides batteries-included build setups for a modern frontend workflow.

Bower

You can also install Vue using Bower. Simply run the command:

Vue Workflow

A simple workflow of Vue component is show below:
Vuejs Workflow

Vue Syntax

A basic syntax of Vue is to create a new Vue instance.

A basic example about usage of Vue is shown below:

Output:

Declarative Rendering

Declarative rendering is the process of writing code and hiding the implementation details and focusing on the outcome. Vue supports declarative rendering. Example:

Conditional Rendering

Conditional Statements helps to run block of code when the required condition is met. Vue supports v-if, v-else, v-else-if, and v-show.

v-if

It’s a simple if statement. If conditional statement is true, it executes statement.

Output:

If you change the attribute seen to false, then the text message will not be desplayed.

v-else directive is used to indicate else block of v-if directive. Simple example of v-else is shown below:

A v-else element must immediately follow a v-if or a v-else-if element – otherwise it will not be recognized.

Directives

Directives are special attributes with the v- prefix. Directives in Vue are v-bind, v-model, v-for, v-on, and many more.

A simple of v-on click directive is shown below:

Shorthands

Vue.js provides special shorthands for two of the most often used directives, v-bind and v-on.

v-bind Shorthand

v-on Shorthand

Hope you have gained some basic knowledge of Vue and started learning. I will cover more advanced topic with practical learning about Vue in coming article