Introduction Tutorial

Vue Introduction

Learn what Vue.js is, how its reactivity works, and why developers use it for modern applications.

Overview

Vue.js is a modern open-source JavaScript framework created by Evan You in 2014. It builds interactive user interfaces with readable syntax, reactive data, and reusable components. Vue is approachable for beginners while remaining suitable for large-scale applications.

Key concepts

Vue focuses on the user-interface view layer
Reactive data updates the page automatically
Components make applications modular
Vue Router and Pinia support complete Single Page Applications

Why do we need Vue.js?

Traditional JavaScript often requires developers to find HTML elements and update them manually.

HTML

<p id="message">Hello</p>

<script>
  document.getElementById("message").textContent = "Welcome to Vue.js";
</script>

That approach works for small pages, but becomes difficult when an application contains many forms, products, buttons, and interactions. Vue connects data to HTML so a data change automatically updates the correct part of the page. This behavior is called reactivity.

What can you build with Vue.js?

Interactive forms
Admin dashboards
Shopping carts
Portfolio websites
Booking systems
Single-page applications
Online learning platforms
Real-time data interfaces

Vue is progressive: it can power one interactive feature or an entire website.

How Vue.js works

A basic Vue application contains a template, JavaScript logic, and a mounting step.

1. Template

The template contains the HTML shown on the page. Double curly braces are interpolation syntax; Vue replaces the expression with the current data value.

HTML

<h1>{{ title }}</h1>

2. JavaScript Logic

The application logic defines reactive data and behavior.

JavaScript

const app = Vue.createApp({
  data() {
    return {
      title: "Learning Vue.js"
    };
  }
});

3. Mounting the Application

Mounting tells Vue which HTML element it should control.

JavaScript

app.mount("#app");

Your first Vue.js example

This standalone HTML page loads Vue 3 from a CDN, making it useful for learning without a build setup.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First Vue App</title>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">Change Message</button>
  </div>

  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          message: "Hello, Vue.js!"
        };
      },
      methods: {
        changeMessage() {
          this.message = "The message has changed!";
        }
      }
    });

    app.mount("#app");
  </script>
</body>
</html>

The page initially displays Hello, Vue.js! Clicking the button changes the message state, and Vue updates the heading without reloading the page.

Understanding Vue Directives

Directives are special template attributes that add reactive behavior. Most directive names begin with v-.

Conditional rendering with v-if

HTML

<p v-if="isLoggedIn">Welcome back!</p>

Two-way form binding with v-model

HTML

<input v-model="name" placeholder="Enter your name">
<p>Hello, {{ name }}</p>

Event handling with @click

HTML

<button @click="showMessage">Click Me</button>

The @click syntax is shorthand for v-on:click.

Components in Vue.js

Components are reusable sections of an interface. A component can represent a navigation bar, product card, login form, footer, or modal. Reusing components reduces repetition and makes applications easier to organize, test, and maintain.

Advantages of Vue.js

Beginner-friendly learning curve
Clear template syntax
Reactive interface updates
Reusable components
Lightweight adoption for small features
Scalable tools for larger applications
Vue Router for navigation
Pinia for shared state

Vue.js applications

Business dashboards
E-commerce websites
Blogging platforms
Portfolio websites
Admin panels
Task management applications
Real-time chat applications
Progressive Web Apps

Vue.js vs Traditional JavaScript

Traditional JavaScript often requires manually finding and updating DOM elements. With Vue, developers update application data and Vue synchronizes the interface. This reduces repetitive code and makes complex interactions easier to maintain.

Prerequisites for learning Vue.js

HTML
CSS
JavaScript variables, functions, objects, and arrays
ES6 let and const
Arrow functions
JavaScript modules

Limitations of Vue.js

Large applications require thoughtful project organization
Advanced concepts take time to learn
Some third-party libraries have smaller communities than React alternatives

Real-life example

When a customer adds a product to an online cart, Vue can update the item count and total immediately without refreshing the page. Dashboards, chat applications, and live notifications use the same reactive principle.

Tips for beginners

Strengthen HTML, CSS, and JavaScript fundamentals
Practice creating small components
Understand how data changes update the UI
Build a todo list or calculator
Focus on core concepts before advanced features

Key takeaways

Vue is an open-source framework for interactive interfaces
Component architecture makes applications modular
Reactivity keeps the UI synchronized with data
Vue is lightweight and beginner-friendly
It supports dashboards, stores, admin panels, and SPAs
HTML, CSS, and JavaScript fundamentals are recommended
Vue enables scalable and maintainable web applications