Serving Industries Worldwide

Innovative Ways - Satisfied Clientele

Vue.js – a JavaScript framework for robust web applications

alt text

Vue.js is revolutionary framework in an era of lightweight and faster loading interface development by frontend developer. It is younger than many popular front-end development frameworks like Angular, backbone etc. also become popular in the vuejs software development companies in India in short period of time.

Evan You is founder and creator of Vue.js who an ex-employee of Google and notable contributor for Angular JS. He worked on many AngularJS Projects. With this knowledge of AngularJS, he thought of creating a light-weight framework that is easy to understand and simple to implement.

Below are some of the key points that will start our tour of leaning Vue.js at a beginning level which is serving by leading Vue.js application development company in India.

  • Installation
  • The Vue Instance
  • Data & Methods
  • Data Binding 
  • Events
  • Event Modifier

Introduction

Vue.js is a progressive JavaScript framework used by many vue.js software companies to develop collective web applications. Vue focus is on front view part. The installation of VueJs is simple, and new learner can easily understand and start developing their own user apps. Vue.js is divided into many chapters that contain interesting topics with an example.

Let us start with the installation of VueJs.

Installation:

 You can install VueJs by following way:

  • CDN
  • NPM
  • CLI

CDN:

As per our recommendation download VueJs development version file from Download and simply include or use CDN link in your webpage:

CDN

For production version of your published site, replace vue.js with vue.min.js for faster loading and speed optimization compare to development environment. It is smaller build for optimized speed experience.

NPM:

We can us NPM method when developing large scale or complex application with Vue.js . For installing using NPM follow below steps:

  • Open CMD from your project folder
  • Run below command: npm install Vue

This will install node library with Vue packages.

CLI:

When you are going to develop a one-page web application using Vue.js then this method of installation gives you the standard structure of modern front application development.  Run below command to get Vue.js project fresh setup. For the same you need to open CMD from your project folder and execute command step by step:

  • npm install  - -global  vue-cli
  • vue init webpack my-project (write your project name instead of my-project)
  • cd my-project
  • npm install
  • npm run dev

The Vue Instance:

Every VueJs application starts with the new Vue instance. We can create Vue instance using Vue function:

vue

Here Vue instance assign to vm variable. Now we can often use vm to access Vue instance in application.

VueJS

vm

Output: Hello Vue!

For Vue there is one parameter named el. The value of this parameter will be id of div which is defined in body tag of your file. 

Data & Methods

Any application instance is to render data or view as per their requirement. In the above example, you can see the message variable is a part of the data attribute of vue instance. Now we check method with the following example:

data

VueJS

{{a}}

Output: 4

As above example gives you 4 as output. Here you can check that methodsquare() method is called by instance vm and it will update the value of  a variable to 4 which is the square of 2. You can define method in VueJs in methods attribute.   

Here created hook is executed after Vue instance is created. There is more Vue life cycle hooks named mounted, update and destroy. 

Life Cycle of VueJs is as follow:

Data Binding

Data Binding is another interesting topic when we are working on an advanced JavaScript framework like Vue. In Vue, we can use v-model for two-way data binding on form inputs and other elements like text area.

v-modal has correctively updated the element based on the entered value in inputs like textbox or text area.

data-binding

Here msg string update at a same time when you will have typed in input box. it is two-way data binding. 

We can bind Class and CSS using v-bind: class in VueJs. Let we check it with example:

data-binding css

Events

Vue.js use v-on directive for performing DOM element event based on event fired run some JavaScript code to achieve objective to perform this event. Let me explain it by the small example of a button click will increases counter.

Example:

event-counter

Event Modifier

We are familiar with JavaScript event.preventDefault() or event.stopPropagation() event modifier. We need to write this code inside the function when we are using basic JavaScript but in VueJs the thing differs, Vue.js approach is that the logic code only placed in function so for addressing this issue Vue use dot. 

There is following type of event modifier available:

  • .stop
  • .prevent
  • .capture
  • .self

For Example:

event-modifier

Source of this example is VueJs.org