Vuejs Introduction

In this tutorial, we will discuss about VueJS, features of VueJS and example of NodeJS.

1. VueJS Introduction
2. VueJS Features
3. Example of VueJS

VueJS Introduction

1. VueJS was created by google employee Evan You in february 2014.
2. The current latest stable version of Vue is v3.2.45 on 7th February 2022..
3. VueJS (pronounced like view) is an open source JavaScript framework for building user interfaces or browser side web application.
4. It builds on top of standard HTML, CSS, and JavaScript and provides a declarative and component-based programming model to develop user interface.
5. VueJS use language HTML and JavaScript.
6. The size of the Vue library is 60 kilobytes (approx.).
7. Vue supports both one-way and two-way data binding. That means binding from view to model and viceversa.
8. Its performance is fast as library is small in size.
9. VueJS makes the use of virtual DOM, which is also used by other frameworks such as React, Ember etc

Features of VueJS

The following are the available features of VueJs.

1. Virtual DOM - VueJS uses Virtual DOM, Virtual DOM is a copy of the site original DOM. VueJS uses this copy to see what parts of the actual DOM need to change when an event happens like you are clicking a button.Virtual DOM can help you see what changed after a user action and selectively updates that section of the actual DOM only. This will enhance the performance of apps.
2. Data Binding - The data binding feature is used to manipulate or assign values to HTML attributes, change the style, assign classes with the help of binding directive called v-bind available with VueJS.
3. Components - Components are one of the important features of VueJS that helps create custom elements, which can be reused in HTML.
4. Template - VueJS provides HTML-based templates that bind the DOM with the Vue instance data.
5. Directives - VueJs has the directive as angular. VueJS has built-in directives such as v-if, v-else, v-show, v-on, v-bind, and v-model, which are used to perform various actions on the frontend.
6. LightWeight - The size of the Vue library is 60 kilobytes (approx.). VueJS script is very lightweight and the performance is also very fast.
7. Routing - Navigation between pages is performed with the help of vue-router.
8. Event Handling - v-on is the attribute added to the DOM elements to listen to the events in VueJS.

Example

import { createApp } from 'vue'

createApp({
data() {
return {
count: 0
}
}
}).mount('#startapp')

<div id="startapp">
<button @click="count++">
Count is: {{ count }}
</button>
</div>

Output

Count is: 0

The above example demonstrates the two core features of VueJS:

• Declarative - VueJS extends standard HTML with a template syntax that allows us to declaratively describe HTML output based on JavaScript state.
  
  <div id="startapp">
<button @click="count++">
Count is: {{ count }}
</button>
</div>

• Reactivity -VueJS automatically tracks JavaScript state changes and efficiently updates the DOM when changes happen. That means your app will react to user input. Update the screen dynamically. For Example - To show overlays or input validation errors