Vue.js

Introduction

Vue.js is a progressive JavaScript framework used for building frontend development. It was developed by Evan You in Feb 2014 and is becoming popular day by day among web developers due to its simplicity and ease of use.

Features

The main features of vue.js are provided below:

  1. Reactive data binding: Vue.js uses a reactive data binding system that allows changes in data to automatically update the user interface. This means that when data changes, the corresponding part of the UI is automatically updated.
  2. Component-based architecture: Vue.js is built around a component-based architecture that allows developers to create reusable and modular components. Components can be composed together to create complex UIs.
  3. Templating syntax: Vue.js provides a powerful templating syntax that allows developers to declaratively render data into the UI. This makes it easy to create dynamic and interactive web applications with minimal code.
  4. Directives: Vue.js comes with a set of built-in directives that can be used to manipulate the DOM, handle events, and more.
  5. Reactive computed properties: Vue.js allows developers to define computed properties that are automatically updated when their dependencies change. This makes it easy to create complex data transformations and calculations.
  6. Watchers: Vue.js provides a way to watch for changes in data and trigger custom logic in response. This is useful for performing side effects or updating external state.
  7. Vue Router: Vue.js includes a powerful routing library called Vue Router that allows developers to create client-side routes for their application.
  8. Vuex: Vue.js includes a state management library called Vuex that allows developers to manage complex application state in a predictable and centralized way.
  9. 9. High run time performance

Setup

Vue.js can be set up in three different ways which are:

  • Using CDN (Content Delivery Network) package
  • Install Vue.js using NPM (Node Packet Manager)
  • Using CLI (Command-line Interface)

We will install now using NPM

step1: Download Nodejs from here and install accordingly.

step 2: create a folder in desktop or any location. Then go to the folder and start command prompt.

step 3: write the below command 

npm init vue@latest

step 4: Then you will be asked to create a project name name just “vue-app“. after press Enter Button for passing every asking question.

Now go to the vue-app folder 

cdd vue-app

step 5: now run the below commands

npm install
npm run dev

start the Journey

Component

conditions

loops

Form Handling

Routing

Learning by Project

API Integration