Things you need to know about Vue JS

Vue is pronounced like a view. It is an open-source front-end Javascript framework that is used to build interactive web interfaces. It focuses mainly on the view layer only. We can easily integrate with other libraries or existing projects without any issues. Vue.js is also capable of building a single page application.

Overview

Vue is called progressive framework because it adapts to the need of developer. It can be easily placed in our app by starting with script tag, and it can expand more according to our needs, spreading from 3 lines to managing entire view layer.

Features:

The features available with Vue.js are

Virtual DOM:-

  • Vue.js uses virtual DOM like other frameworks such as React, Timber.

Changes are made in the replica of DOM which is in the form of Javascript data structures and then it is compared with original data structure, the final changes are then updated in original data structures.

Data Binding:-

It manipulate or assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind.

Templates:-

  • VueJS provides HTML-based templates that bind the DOM with the Vue instance data. Vue compiles the templates into Virtual DOM Render functions.

Components:-

  • It is an important feature which helps in creating custom elements that can be reused in HTML.

Event Handling:-

  • The attribute named v-on is added to the DOM elements to listen to the events in VueJS.

Computed Properties:-

  • This one of the important feature of VueJS listen to the changes made to the UI elements and performs the necessary calculations.

Transition & Animation:-

  • This transition system allows you to automatically apply transition effects when elements are inserted into or removed from the DOM.

Directives:-

  • VueJS provides built-in and user defined directives. It uses double braces {{ }} as place- holders for data. It has built-in directives to perform various actions on frontend such as v-if, v-else, v-show, v-on, v-bind, and v-model.

Watch Property:-

  • It handles the data that changes making the code simple and fast example form input elements.

Routing:-

  • With the help of vue-router we can navigate between the pages.

Lightweight:-

  • VueJS script is very lightweight and the performance is also very fast.

Vue-CLI:-

  • VueJS can be installed at the command line using the vue-cli command-line interface.

Example :-

Here we create simple HELLO WORLD with Vue. 

<!DOCTYPE html>
<html>
	<head>
		<title>Hello World Tutorial</title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="hello">
			{{ message }}
		</div>

		<script>
		new Vue({
		  el: '#hello',
		  data: {
		message: 'Hello World!'
		}
		});
		</script>
	</body>
</html>

The data render here is

Output:-

Hello World!