Урок 02

Основы Vue

Что такое приложение Vue

Приложение Vue — корневой объект, который управляет DOM.

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

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

Что здесь:

createApp() — создать приложение
App — корневой компонент
.mount('#app') — привязать к элементу в HTML

Корневой компонент

App.vue — корень всего.

<template>
    <h1>{{ title }}</h1>
</template>

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

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

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

createApp создаёт приложение с App
ref создаёт реактивное значение
{{ title }} — вывод в шаблоне
Меняешь title — обновляется UI

Реактивность — главное

Реактивность = Vue следит за данными и обновляет UI при изменениях.

Без реактивности:

let count = 0;
count++;
// UI не обновится, надо вручную

С реактивностью:

const count = ref(0);
count.value++;
// UI обновится сам

ref — реактивное значение

ref() — обёртка для реактивного значения.

import { ref } from 'vue';

const count = ref(0);
const name = ref('Иван');
const isActive = ref(false);
const items = ref([]);

Доступ в JS:

count.value;       // 0
count.value = 5;   // изменить

Доступ в шаблоне — без .value:

<p>{{ count }}</p>

Правило:

В JS — .value
В шаблоне — без .value

reactive — реактивный объект

Для объектов и массивов:

import { reactive } from 'vue';

const user = reactive({
    name: 'Иван',
    age: 25,
});

user.name;          // 'Иван' — без .value
user.name = 'Петр';

reactive vs ref:

	ref	reactive
Для	любых	объектов/массивов
Доступ	`.value`	напрямую
Переприсвоить	`x.value = ...`	нельзя

Правило: используй ref — он универсальнее.

Реактивные массивы

const items = ref(['a', 'b']);

items.value.push('c');       // работает
items.value[0] = 'x';        // работает в Vue 3
items.value = ['new'];       // работает

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

src/App.vue:

<template>
    <div>
        <h1>{{ title }}</h1>
        <p>Счётчик: {{ count }}</p>
        <button @click="count++">+1</button>
        <button @click="count = 0">Сброс</button>
    </div>
</template>

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

const title = ref('Мой счётчик');
const count = ref(0);
</script>

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

ref создаёт реактивные title, count
@click вызывает изменение
UI обновляется автоматически

script setup — современный синтаксис

Структура .vue файла:

<template>
    <!-- разметка -->
</template>

<script setup>
// логика
</script>

<style scoped>
/* стили */
</style>

<script setup> — Composition API. Всё что объявлено — доступно в template напрямую (без return).

Пример:

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

const name = ref('Иван');
const age = ref(25);

function greet() {
    alert('Привет, ' + name.value);
}
</script>

<template>
    <p>{{ name }}, {{ age }}</p>
    <button @click="greet">Поздороваться</button>
</template>

Функции

const count = ref(0);

function increment() {
    count.value++;
}

function reset() {
    count.value = 0;
}

В шаблоне:

<button @click="increment">+1</button>
<button @click="reset">Сброс</button>

Импорт компонентов

<script setup>
import MyButton from './components/MyButton.vue';
</script>

<template>
    <MyButton>Нажми</MyButton>
</template>

Не нужно регистрировать — script setup делает это автоматически.

Итог

createApp — создать приложение
ref — реактивное значение (.value в JS)
reactive — реактивный объект
<script setup> — современный синтаксис
Реактивность — Vue обновляет UI при изменениях

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