Introduction to Vue.js

Vue.js is a progressive JavaScript framework for building user interfaces. It’s known for its simplicity, flexibility, and ease of integration with existing projects.

Key Features

• Reactive Data Binding: Automatically updates the DOM when data changes.
• Component-Based Architecture: Encapsulates UI logic into reusable components.
• Directives: Simplifies DOM manipulation.
• Vue CLI: Streamlines project setup.

Setting Up Vue.js

1. Installation

Option 1: Use a CDN (For quick testing)

Include the Vue.js library in your HTML:

Option 2: Install with npm (Recommended for projects)

Option 3: Use Vue CLI (For full-featured projects)

Install Vue CLI globally:

Create a new Vue project:

Navigate to the project folder:

Basic Vue.js Application

Here’s a simple Vue.js app to understand the basics:

1. Basic HTML Setup

Core Concepts

1. Reactive Data

Vue’s data() function provides reactive properties:

2. Directives

• v-bind: Dynamically bind attributes.
  html

  Copy code

  <a v-bind:href="url">Visit</a>
• v-if and v-else Conditional rendering.
  html

  Copy code

  <p v-if="isLoggedIn">Welcome back!</p> <p v-else>Please log in.</p>
• v-for Loop through arrays or objects.
  html

  Copy code

  <ul> <li v-for="item in items" :key="item.id">{{ item.name }}</li> </ul>

3. Event Handling

Use v-on or @ to listen for events:

4. Two-Way Binding

Use v-model for form inputs:

Components

Vue apps are built with reusable components.

Example Component

1. Define a Component:

2. Use the Component:

Vue CLI Structure

When using Vue CLI, the structure looks like this:

Example (App.vue):

State Management with Vuex

For managing global state, use Vuex (official state management library).

Deploying Vue.js Apps

• Use npm run build to bundle the app for production.
• Deploy the output dist folder to any web server or hosting platform (e.g., Netlify, Vercel).