Introduction to VueJs

596
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:

npm install vue

CLI

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

# install vue-cli
$ npm install --global vue-cli
# create a new project using the "webpack" template
$ vue init webpack my-project
# install dependencies and go!
$ cd my-project
$ npm run dev

Bower

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

bower install vue

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.

var app = new Vue({
   el: //element
   data: {
        //data
    }
    //options
})

A basic example about usage of Vue is shown below:

    VueJS Tutorial
    
    



    
{{ message }}

Output:

Hello Vue!

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:

    VueJS Tutorial
    
    



    

Dynamic Class with javascript

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.

    VueJS Tutorial
    



    
I am visible now

Output:

I am visible now

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:

Now you see me
Now you don't
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:

    VueJS Tutorial


    

    

Adding Recored

Typing: {{ newName }}

Lists

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

Read More Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.