vuejs

What is Vue.js?

Vu.js is a open source JavaScript framework which is used for developing dynamic views or interfaces of web applications.It is usually used for creating the views of Single Page Applications. Though Vuejs is used for building the UIs but it can be easily integrated with other JavaScript libraries for creating Single Page Applications.
It uses virtual DOM just like React which is a slimmed down version of DOM.

How do you include Vue JS library in your web page?

You can include Vue in your web page in any of the following ways:

Referring the Vue from the following CDN

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

Intall using NPM
Using the Vue CLI tool with WebPack

What is Vue CLI tool?

It is a npm pacakge npm package and allows using the vue command in terminal or command line.It allows to quickly create a Vue project using project scaffolding.To create a new project using the CLI use the following command vue create projectName

How do you include Vue in your web page?

To use Vue functionality in your application we need to create a vue instance.In the following example we are creating a vue instance and assigning setting the el and data properties.

new Vue({ el: '#appName', data: { 'Hello Vue' } });

What are filters in VUE.js?

Vue.js allows us to create filters which can be used for applying text formatting.They are used to make the data presentable to the user.
To use a filter we use the pipe character before the filter name.In the following example we are applying the filter filterName to the Expression expression.

{{Expression | filterName}}

We register a filter globally or locally.To create filter locally assign the filter method to filter property:

filters: {
boolean: booleanFilter
},

You can create a global filter as:

Vue.filter('filterName', function(value) {
return//data
});

What are components?

Vue application consists of collection of components.
We can create a component as:

Vue.component('componentName', {
template: `
<h1>First Component</h1>
`
});

We can use it in HTML as:

<component-name></component-name>

How Vue js handles routes?

Vue js handles routes using vue-router library.This is the official router for Vue.js

ashish

Follow on:

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:

Once the project dependencies are installed execute the following command:

npm run dev