Базовый курс Vue.js

Более подробно про вопросы подключения и установки Vue.js можно посмотреть в этом курсе.

Если вам нужно разработать или доработать проект на Vue.js, можете воспользоваться моими услугами.

Vue.js: фреймворк на JavaScript с компонентным подходом, его назначение и невысокий порог входа.

Важная инструкция перед прохождением базового курса по Vue

Подготовительный этап курса по основам Vue.js: знакомство с понятием компонентов, способы создания Vue-приложений с помощью Vite или Vue CLI, работа с Single File Components и обзор базовых файлов сборки проекта.

Расширение для Google Chrome для отладки Vue.js приложений

Шаблон Vue. Его нахождения в разных вариантах подключения.

Обзор понятия шаблона (template) во Vue: где располагается разметка в однофайловых компонентах (SFC) и в компонентах-объектах, как Vue обрабатывает шаблон и монтирует его в DOM.

Уровень данных (data) Vue приложений

Уровень данных (data) Vue-компонента: функция, возвращающая объект с данными, и понятие состояния компонента.

Задачи на работу с data в Vue.js

Задачи на работу с уровнем данных (data) во фреймворке Vue.js.

Директивы Vue.js

Директивы Vue: v-if, v-show и v-for для условий и циклов, v-bind и v-on для привязок и событий.

Vue. Директива v-if. Условный рендеринг.

Условный рендеринг во Vue: директивы v-if, v-else-if и v-else, а также отличие v-if от v-show.

Задачи v-if.

Задачи на директиву v-if во Vue: показ элемента по условию, скрытие блока вместе с содержимым и выбор между вариантами.

Vue. Директива v-show

Директива v-show во Vue.js — условное отображение элементов через CSS (display:none) без удаления из DOM. Отличия v-show от v-if, ограничения и практические сценарии использования, включая SEO-оптимизацию.

Vue. Цикл for (директива v-for)

Директива v-for во Vue: перебор массива, массива объектов и ключей объекта внутри шаблона компонента.

Задачи на работу с циклами Vue.js

Задачи на циклы во Vue.js: вывод списков, фильтрация и сортировка данных, сочетание цикла с условием.

Про совместное использование v-if и v-for

Подробнее о том зачем нужен атрибут key для директивы v-for на примере

Vue элемент-призрак template.

Элемент template во Vue — это псевдоэлемент, который не создаёт узлов в DOM, но позволяет применять директивы v-if и v-for для группировки элементов без добавления лишней обёртки в разметку.

События Vue.js и их обработка

События во Vue.js: отслеживание действий пользователя в шаблоне и директива для подписки на событие.

Понятие методов (methods) Vue.js

Методы (methods) Vue-компонента: как объявить метод, что он описывает и чем отличается от уровня данных.

Событие ввода и изменения для полей ввода

Событие отправки формы

Задачи на работу с событиями Vue.js.

События во Vue.js: создание и обработка событий, передача данных между компонентами.

v-bind Vue. Связь шаблона с данными.

Директива v-bind во Vue: связь атрибутов элемента шаблона со значениями из уровня данных компонента.

Как менять данные при изменении поля ввода

v-model Vue. Связь данных и представления.

Узнайте, как организовать двухстороннюю связь между компонентами во Vue.js с помощью `v-model`. Этот синтаксический сахар заменяет конструкцию `value + @input`, упрощая синхронизацию данных. На примере компонента `input` разбираем, как `v-model` управляет состоянием и сокращает код.

Модификаторы v-model

v-model для элемента select

Использование v-model с массивом объектов

Как добавить стили в шаблон с помощью атрибута style

Задачи на работу со стилями CSS

Задачи на работу со стилями CSS во фреймворке Vue.js.

Использование встроенных Javascript методов в шаблоне

Знакомство с computed свойствами

Отличие computed от methods

Когда использовать methods, а когда computed

Диаграмма жизненного цикла и хуки

Vue watch. Слежка за уровнем данных.

Опция watch во Vue.js позволяет отслеживать изменения данных компонента и выполнять действия при их обновлении, предоставляя доступ к новому и старому значению отслеживаемого ключа.

Объектный способ записи Vue watch

Watch. Слежка в глубину объектов.

Watch. Получение старого значение при deep.

watch. Запуск при загрузке страницы.

Задачи. Разное.

Моменты, когда срабатывают методы, а когда computed. Ограничение моментов срабатывания методов

Механизм сохранения данных форм с помощью события change и watch. Разница между подходами

Как вывести html код в template Vue

Директива v-html во Vue: вывод HTML-разметки, пришедшей из API, вместо экранированного текста.

Что еще добавить в этот курс? Каких уроков вам не хватило?