When building web pages with JavaScript, you often need to manually select elements, listen for events, and update the page content.

const button = document.querySelector(".btn");
const title = document.querySelector("h1");

button.addEventListener("click", () => {
  title.textContent = "Clicked!";
});

This approach works for small features, but as applications grow, the code becomes harder to manage and maintain.

Vue.js is a JavaScript framework that simplifies this process. Instead of manually updating the page, you describe how the interface should look based on data, and Vue automatically keeps it in sync.

// JS
const message = "Hello Vue";

// HTML
<h1>{{ message }}</h1>

When the data changes, the UI updates automatically.

Vue is built around a few core ideas:

• Reactive data: the UI updates when data changes;
• Components: the interface is split into reusable parts;
• Declarative rendering: you describe what the UI should look like.

Vue helps you build interactive applications in a more structured and scalable way compared to plain JavaScript.