What is Vue

Introduction

Vue is a tool that helps you build websites easily by organizing your code into small, reusable parts called components.

You want to create a website that updates parts of the page without reloading.

You want to build interactive user interfaces like buttons, forms, or lists.

You want to organize your website code so it is easier to manage and understand.

You want to quickly prototype or build small to medium web projects.

You want a simple way to learn modern web development with clear structure.

Syntax

Vue

<template>
  <!-- HTML structure here -->
</template>

<script setup>
// JavaScript logic here
</script>

<style scoped>
/* CSS styles here */
</style>

Vue files use a special format called Single File Components (SFC) that combine HTML, JavaScript, and CSS in one file.

The <script setup> tag is a simple way to write component logic using Vue's Composition API.

Examples

A simple Vue component that shows a heading.

Vue

<template>
  <h1>Hello, Vue!</h1>
</template>

<script setup>
// No JavaScript needed here
</script>

A button that counts how many times you click it using Vue's reactive state.

Vue

<template>
  <button @click="count++">Clicked {{ count }} times</button>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
</script>

Sample Program

This Vue component shows a heading, a message, and a button. When you click the button, the number updates. It uses Vue's reactive ref to track clicks and updates the page automatically.

Vue

<template>
  <main>
    <h2>Welcome to Vue!</h2>
    <p>Click the button:</p>
    <button @click="increment">Clicked {{ count }} times</button>
  </main>
</template>

<script setup>
import { ref } from 'vue'
const count = ref(0)
function increment() {
  count.value++
}
</script>

<style scoped>
main {
  font-family: Arial, sans-serif;
  padding: 1rem;
  max-width: 300px;
  margin: auto;
  text-align: center;
}
button {
  background-color: #42b983;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}
button:hover {
  background-color: #369870;
}
</style>

Important Notes

Vue uses a virtual DOM to update only the parts of the page that change, making it fast.

Vue components are reusable, so you can build complex apps by combining small pieces.

Vue has great tools and a friendly community to help you learn and build projects.

Summary

Vue helps build interactive websites by organizing code into components.

It uses simple files that combine HTML, JavaScript, and CSS.

Vue updates the page automatically when data changes, making your site feel smooth and fast.