Урок 01

Введение в Vue.js

Что такое Vue.js

Vue.js — прогрессивный JavaScript-фреймворк для интерфейсов. Создан Эваном Ю в 2014 году. Бывший разработчик Google.

Прогрессивный значит: можно подключить на одну страницу, а можно строить большое SPA.

Почему Vue

  • Простой старт. Один <script> — работает.
  • Понятный синтаксис. HTML + JS, никакого JSX.
  • Реактивность из коробки. Меняешь данные — обновляется UI.
  • Экосистема. Vue Router, Pinia, Nuxt.
  • Большое сообщество. Много вакансий, документация на русском.

Vue 3 vs Vue 2

Vue 3 — актуальная версия (2020+). Ключевые изменения:

  • Composition API — новый способ писать логику
  • Faster — быстрее в 1.3-2 раза
  • Smaller — меньше размер
  • TypeScript — поддержка из коробки

Vue 2 — EOL с 2024 года. Новые проекты — только Vue 3.

Установка через CDN

Самый быстрый способ попробовать:

<!DOCTYPE html>
<html>
<head>
    <title>Vue</title>
</head>
<body>
    <div id="app">
        <h1>{{ message }}</h1>
    </div>

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script>
        const { createApp } = Vue;
        createApp({
            data() {
                return { message: 'Привет, Vue!' };
            },
        }).mount('#app');
    </script>
</body>
</html>

Открой в браузере — увидишь «Привет, Vue!».

Установка через Vite

Для реальных проектов:

npm create vue@latest my-app
cd my-app
npm install
npm run dev

Что установится:

  • Vue 3
  • Vite — сборщик (быстрее Webpack)
  • Vue Router — опционально
  • Pinia — опционально

Структура проекта

my-app/
├── src/
│   ├── App.vue           # корневой компонент
│   ├── main.js           # точка входа
│   ├── components/       # переиспользуемые компоненты
│   └── assets/           # стили, картинки
├── index.html
├── package.json
└── vite.config.js

main.js

import { createApp } from 'vue';
import App from './App.vue';

createApp(App).mount('#app');

App.vue

<template>
    <h1>{{ message }}</h1>
</template>

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

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

<style scoped>
h1 {
    color: #42b983;
}
</style>

Файл .vue = SFC (Single File Component). Три блока: template, script, style.

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

src/App.vue:

<template>
    <div>
        <h1>{{ title }}</h1>
        <button @click="count++">Кликов: {{ count }}</button>
    </div>
</template>

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

const title = ref('Моё приложение');
const count = ref(0);
</script>

Что происходит:

  • ref() создаёт реактивное значение
  • {{ count }} — вывод
  • @click — обработчик
  • Меняешь count — UI обновляется сам

Инструменты

Vue DevTools — расширение для Chrome/Firefox:

  • Смотреть компоненты
  • Реактивные данные
  • Vuex/Pinia
  • Производительность

VS Code:

  • Volar — официальное расширение (замена Vetur)
  • Подсветка, автодополнение

Что дальше

  1. Шаблоны и интерполяция
  2. Директивы: v-if, v-for, v-bind
  3. Обработка событий
  4. Формы и v-model
  5. Компоненты
  6. Пропсы и события
  7. Слоты
  8. Computed и watch
  9. Жизненный цикл

Итог

Vue — простой, реактивный, с понятным синтаксисом. Стартовать можно через CDN или Vite.

Дальше — шаблоны и интерполяция.