Что такое Vue.js?

introduction

Vue.js — это прогрессивный JavaScript-фреймворк для создания пользовательских интерфейсов. Он сочетает в себе:

Гибкость — можно использовать как для небольших виджетов, так и для сложных SPA-приложений
Реактивность — автоматическое обновление DOM при изменении данных
Простота — интуитивный синтаксис и легкая интеграция в проекты

Ключевые особенности:

Компонентный подход — переиспользуемые блоки кода
Двустороннее связывание (v-model) — синхронизация данных и формы
Экосистема — Vue Router, Pinia, Vue DevTools и др

Установка Vue.js

Способ 1: CDN (быстрый старт)

Подходит для простых проектов или изучения основ. Добавьте в HTML:

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

Способ 2: Vite (рекомендуется для разработки)

Создаем проект через командную строку:

npm create vue@latest
# или
yarn create vue

Выберите настройки (для начала хватит Vue Router и Pinia)

Затем запустите проект:

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

Откройте http://localhost:5173 — ваше приложение готово

Первое Vue-приложение

Вариант 1: Через CDN

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Мое первое Vue-приложение</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">Перевернуть текст</button>
  </div>

  <script>
    const { createApp } = Vue;

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

Разбор кода

message — интерполяция данных из data()
click — директива для обработки клика
methods — методы компонента

Вариант 2: Через Vite (Composition API)

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="reverseMessage">Перевернуть текст</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>