Introduction to Vue JS

When developing modern web applications today much of the application is implemented using javaScript on the browser.If there is a lot of JavaScript code then to manage the complexity of the application JavaScript frameworks are required.Some of the common JavaScript frameworks are:

AngularJS
React
Vue.JS
Knockout.js
Meteor.js
Ember.js

Vue.JS is a javascript framework which is used for developing the user interfaces.

The main features of vue.js are:

It is very light weight(size is around 20KB).Vue is basically for developing user interfaces but if required you can use other available libraries such as for routing.In terms of size(about 20KB) Vue is better than AngularJS and React

You can develop application quickly
Flexible application structure ,you can structure the application anyway you require unlike other frameworks which forces you to follow specific structure.If required you can usethe webpack template for quickly setting up your Vue.js application.
Easy to scale up.Can be used for both simple as well as complex applications.
Less learning curve as you use just HTML and JavaScript rather than learning any new language such as JSX or TypeScript.
Data Binding for manipulating the values of HTML controls.

Environment Setup

Vue JS has very less setup required for getting started.it is as simple as creating an object Vue object and displaying the data in HTML.To implement a simple application in Vue JS you typically follow below three steps:

Add a reference to CDN from Vue.js in your HTML page
Create an object of Vue.Pass the properties you want to display in the HTML as values to this Vue object.
Display the data in HTML.

Add a reference to Vue CDN as:

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

Create an object of Vue using the Vue function as:

new Vue({
el: '#SELECTOR-ID',
data: {
name: 'THIS IS SIMPLE PROPERTY'
}
});

By calling the Vue function we are creating an object of Vue.In this Vue function we are doing the following:

We pass options object to the Vue function.This options object consists of:

“el” property which defines the id which we need to apply to HTML element.We are setting the el selector as ‘#ELECTOR-ID’.
“data” property This data property defines a property called property name which is accessible in the HTML.In this Vue object we are setting the name property inside data object.

We can access the name property in the data object in HTML as:

<div id="SELECTOR-ID">
{{ name }}
</div>

You can create Vue JS application using HTML editor or using the Vue CLI.

Creating the application manually

Include the Vue JS from CDN or :

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>

Create a Vue object using the Vue function.You need to include this in script tag:

<script>
  new Vue({
//option object
el: '#helloWorld',
data: {
name: 'This is a Vue JS application'
}
});

</script>

In the above script we are passing option object to the Vue function.In the option object we are passing the two properties

el this acts as a selector for attaching the Vue object to HTML
data this defines the properties for attaching to HTML

In the html attach view object to DOM using the id selector as:

<div id = "helloWorld">
<h1>{{ name }}</h1>
</div>

If you render the above HTML page you will get the following HTML page:

If you are creating the application using CLI

Another option is to use cli for working with vue application

npm install --global vue-cli

while cli is installing you will get the following screen

once it is installed you will get the following screen

Now open the command prompt and change the current directory to where you want to create new Vue JS application.Note you don’t need to install node command prompt but normal windows command prompt.Once the command prompt opens enter the following command:

vue init webpack helloworld

Vue CLI will start executing the above command.It will ask for some options as it is creating the new application.You need to select the appropriate value: