What is it Vue.js ?

introduction

Vue.js is a progressive JavaScript framework for creating user interfaces. It combines:

Flexibility — can be used for both small widgets and complex SPA applications
Reactivity — automatic DOM update when data changes
Simplicity — intuitive syntax and easy integration into projects

Key Features:

Component approach — reusable code blocks
Two-way binding (v-model) — synchronization of data and form
Ecosystem — Vue Router, Pinia, Vue DevTools, etc

Installation Vue.js

Method 1: CDN (Quick Start)

Suitable for simple projects or learning the basics. Add to HTML:

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

Method 2: White (recommended for development)

Creating a project via the command line:

npm create vue@latest
# or
yarn create vue

Select the settings (Vue Router and Pinia are enough to start with)

Then run the project:

cd ваш-проект
npm install
npm run dev

Open up http://localhost:5173 — Your app is ready

The first Vue app

Option 1: Via CDN

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>My First Vue app</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">Flip the text</button>
  </div>

  <script>
    const { createApp } = Vue;

    createApp({
      data() {
        return {
          message: 'Hello, Vue!'
        }
      },
      methods: {
        reverseMessage() {
          this.message = this.message.split('').reverse().join('');
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

Code analysis

message — data interpolation from data()
click — click processing directive
methods — component methods

Option 2: Via Vite (Composition API)

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">Flip the text</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const message = ref('Привет, Vue!');

const reverseMessage = () => {
  message.value = message.value.split('').reverse().join('');
};
</script>

<style scoped>
button {
  padding: 8px 16px;
  background: #42b983;
  color: white;
  border: none;
  border-radius: 4px;
}
</style>