1. Введение и установка Vue.js
2. Создание приложения
3. Синтаксис шаблонов
4. Основы реактивности
5. Вычисляемые свойства
6. Привязка классов и стилей
7. Условное отображение
8. Отображение списков
9. Обработка событий
10. Привязка полей формы
11. TODO

Этот цикл статей будет посвящен Vue.js. За отправную точку будет взята официальная документация. Но это будет не перевод или пересказ, а описание реального опыта работы с фреймворком. Все примеры будут выполняться в локальной среде разработки.

Vue.js – это фреймворк для создания пользовательских интерфейсов. Один из способов использовать vue это однофайловый компонент Single File Component (SFC). Он включает в себя логику, шаблон и стили.

Vue компоненты могут быть подключены двумя способами: Options API и Compositions API.

Options API

В этом случае мы подключаем логику компонентов, используя объекты опций (data, methods, mounted). Свойства, определенные в опциях, доступны внутри функций через $this, это экземпляр компонента.

Compositions API

В этом случае мы определяем логику, используя подключение функций. В SFC это обычно <script setup>

Быстрый старт

На компьютере был установлен старые nodejs и npm. Обновить не получалось из-за слишком старой версии, поэтому было принято решение удалить и установить по новой

Удаление nodejs

sudo apt-get purge --auto-remove nodejs

Установка nodejs

sudo apt update

sudo apt install nodejs

node -v

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

npm create vue@latest

Придет запрос ввести название проекта, это же будет и название папки. Далее будет несколько вопросов с подтверждением установки линтера, Type Script и т.д. Везде выбирал No, потому что это выходит за рамки поставленной цели и в документации написано, что все это можно будет установить потом. После выбора появится подсказка, что делать дальше

cd vue-project

npm install

npm run dev

Запустится vite, проект станет доступным в браузере на адресе localhost:5173

Команда

npm run build

сделает сборку проекта для продакшена, которая будет в папке dist.

Также можно подключать vue.js через cdn. Здесь описано как это сделать

В следующей статье мы рассмотрим создание приложения