Introduction of VUE.JS 2.0

It’s a Javascript framework that focuses in building web based applications. As it’s a front end development language can be easily integrated or used with other libraries or projects. It only works in “View Layer” and the advantage of view layer is that it adds functionality and used for building single web apps.

It’s a better alternative to all the previous frameworks. Better knowledge of HTML, CSS and JS you should getting up and running with VUE.

Features of VUE JS include:-

1.Flexible System
2.Faster than other frameworks
3.Event Handling
4.It’s library is very small in size approx 17 KB, this ensures overhead is minimal and site is loading faster.

How to Install VUE.JS

There are many different ways to add VUE in your website:-

1.By using script tag in HTML
2.Use of CDN
3.Using NPM and Bower
4.Vue-Cli

Above all ways VUE Cli offers the configuration tool with a zero figure. It is one of the fastest way to get your application running.

Vue-cli Method

In this method first you have to install Vue-cli. NPM package is available as command line interface. Also note Nods js is available with NPM on your system. Hence the command to install Vue-cli on your system is :

$ npm install -g vue-cli

When installed above command, Vue is successfully available on your computer. Initiate new project by the following command with VUE :-

$ vue init webpack vueapp01

Whenever you start a new project using VUE always use the web pack template. Name the project to a particular name like we give in below image. When you begin to execute the following command you can see the following questions . Please refer to the image below:-

The project created in folder vueapp01 as you seen above. You can also the change the directory with following command.

$ cd vueapp01

Using NPM:-

$ npm install

When the installation is completed you can commence the server in development mode using following command:

 $ npm run dev

Port 8080 is selected and output is displayed on browser.

Use of Standard Directives

In this learn about the standard directives that are used in VUE.js.

v-for

The use of this directive to render multiple lines based on data. It can be used to iterate an array See below.

 Users:
[   { Name:  ‘ Diigispot’, Age:’24’},
    { Name: ‘John’, Age:’23’},
],

Then V-for used to printout the Name and Age of the given array.

 
     /

v-model

V-model having two way binding option to a component.Like defined below:-

input_val: ‘'

For binding use this directive.

Effects of two way binding:-

1. input_val is updated accordingly when users enters a value in field.
2. changing the value of input_val automatically updates the input value in program.
v-text

The v-text is used for setting the text content.Like example we can use the v-text directive to output the input_val by following:-

Input Value: span v-text=“input_val"