Vue 3 и TypeScript – Фундаментальный курс 2023

• Видео посвящено созданию простых приложений на Vue и TypeScript.  

• Рассматривается приложение "Список задач", состоящее из статичной шапки, секции с фильтрами, списка задач и кнопки добавления задачи.  

• Приложение позволяет переключаться между активными и выполненными задачами, удалять задачи и добавлять новые.  

• Для работы понадобится установленный Vue CLI.  

• Создается новый проект с помощью команды `vue create`.  

• Выбирается пресет Vue 3 и TypeScript, сохраняются конфликты в отдельных файлах.  

• После добавления TypeScript в проект, в папке `src` появляются новые файлы.  

• В файле `index.html` добавляется атрибут `lang` для использования TypeScript.  

• Экспортируемый объект оборачивается функцией `defineComponent`.  

• Верстка переносится из рабочего стола в проект.  

• В папке `public` подключается стиль, и проект запускается командой `npm run dev`.  

• Приложение открывается в браузере, но верстка не работает.  

• Приложение разбивается на компоненты: хедер, фильтры, список задач, секция добавления задачи и футер.  

• Создаются компоненты для каждого элемента, включая хедер, фильтры и список задач.  

• Компоненты регистрируются и подключаются в проекте.  

• Компоненты проверяются на корректность.  

• В компоненте списка задач выделяются повторяющиеся элементы для создания отдельного компонента задачи.  

• Описывается первый прототип для компонента задачи, который будет принимать объект задачи.  

• Задача состоит из полей: описание, состояние, уникальный идентификатор.  

• Описание задачи: текст, состояние выполнено или не выполнено.  

• Уникальный идентификатор необходим для идентификации задачи в списке.  

• Использование объекта для описания полей задачи.  

• Импорт помощника для работы с типами данных.  

• Описание полей: ID, текст, состояние.  

• Использование классов для стилизации задач.  

• Интерполяция текста задачи.  

• Подведение итогов: описание полей и использование подсказок.  

• Импорт компонента и его использование.  

• Описание полей задачи в компоненте.  

• Создание массива задач и его наполнение.  

• Проблемы с передачей неправильных типов данных.  

• Описание интерфейса для возвращаемого значения метода.  

• Исправление ошибок с помощью TypeScript.  

• Улучшение кода путем создания отдельного типа для задачи.  

• Экспорт интерфейса задачи в отдельный файл.  

• Импорт и использование интерфейса в разных местах кода.  

• Реализация функций для задачи: изменение состояния и удаление.  

• Начало работы над реализацией этих функций.  

• Добавление слушателя клика на задачу.  

• Вызов метода toogleTodo для изменения состояния задачи.  

• Вывод задачи в консоль для проверки.  

• Обсуждение проблемы мутации данных.  

• Рекомендация использовать компонент для изменения состояния задачи.  

• Описание метода для изменения состояния задачи.  

• Введение в типизацию событий.  

• Описание секции events для типизации событий.  

• Пример типизации события toogleTodo.  

• Обсуждение необходимости валидации данных.  

• Пример валидации числа в JavaScript.  

• Подведение итогов типизации событий.  

• Подписка на событие toogleTodo.  

• Описание метода toogleTodo.  

• Проверка работы метода в консоли.  

• Добавление клика на корзину для удаления задачи.  

• Описание метода removeTodo.  

• Решение проблемы двойного клика.  

• Описание логики удаления задачи.  

• Фильтрация массива задач для удаления задачи по клику.  

• Проверка работы удаления задачи.  

• Форма задач будет скрыта по умолчанию, кнопка "плюс" будет показывать форму.  

• Кнопка "крестик" будет скрывать форму.  

• Создаем флаг для управления состоянием формы.  

• Форма отображается, если флаг "из форм виза" равен true.  

• Кнопка "плюс" скрыта, если форма показана.  

• Создаем метод для отображения формы.  

• Клик по кнопке "крестик" закрывает форму.  

• Метод для закрытия формы меняет флаг на false.  

• Пользователь может изменять текст задачи, но не ID или флаг комплекта.  

• Создаем поле для текста задачи и связываем его с полем ввода.  

• По нажатию кнопки "эд таск" отправляем объект задачи в родительский компонент.  

• Вешаем слушатель на форму для предотвращения перезагрузки страницы.  

• Описываем объект задачи и проверяем его валидацию.  

• Заполняем поля ID, текст и комплект.  

• Очищаем поле ввода текста задачи после отправки.  

• Переносим логику работы с задачами в компонент "эп".  

• Компонент "эптудулист" теперь только отрисовывает задачи.  

• Переносим методы и стейт в компонент "эп".  

• Компонент "эптудулист" принимает массив задач и отрисовывает их.  

• Логика добавления, удаления и перевода задач сосредоточена в компоненте "эп".  

• Метод для добавления задачи в массив задач.  

• Компоненты перерисовываются при добавлении задачи.  

• Пример добавления и удаления задачи.  

• Оживление списка задач и формы добавления задачи.  

• Реализация фильтрации и статистики.  

• Компонент фильтров как набор кнопок.  

• Передача названия фильтра и типа фильтра.  

• Пример добавления класса к кнопке в зависимости от типа фильтра.  

• Описание объекта для фильтрации.  

• Уточнение типа фильтра как строка.  

• Пример типизации для фильтрации по значениям "о", "актив", "дан".  

• Обязательный фильтр в компоненте.  

• Пример передачи значений фильтра вручную.  

• Создание поля для активного фильтра.  

• Создание нового типа фильтра.  

• Экспорт типа фильтра.  

• Применение типа фильтра в компоненте фильтров и веб-компоненте.  

• Создание массива фильтров.  

• Отрисовка кнопок фильтров в цикле.  

• Пример заполнения массива фильтров.  

• Добавление слушателей событий клика.  

• Метод для установки фильтра.  

• Пример вызова метода для изменения активного фильтра.  

• Описание метода для проверки наличия фильтра.  

• Запись нового значения фильтра в поле активного фильтра.  

• Проверка работы фильтрации через инструмент разработчика.  

• Использование вычисляемых свойств для фильтрации задач.  

• Создание вычисляемого свойства "фильтр тудос" для возврата массива задач.  

• Логика фильтрации задач по флагу комплекта.  

• Применение вычисляемых свойств в компоненте "тудулист".  

• Фильтрация задач по активным и выполненным задачам.  

• Проверка работы фильтрации при изменении статуса задачи.  

• Описание секции со статистикой, выводящей количество активных и выполненных задач.  

• Создание интерфейса для статистики и его импорт.  

• Использование вычисляемых свойств для обновления статистики в реальном времени.  

• Вынесение повторяющегося кода в отдельные вычисляемые свойства.  

• Оптимизация кода для улучшения читаемости и удобства сопровождения.  

• Подведение итогов: создание тудулиста и использование TypeScript.  

• Преимущества TypeScript: типизация, подсказки, удобство разработки.  

• Планы на дальнейшее использование TypeScript в проектах и видео.