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

Что такое Vue.js

В этом видео рассматривается, что такое Vue.js и для чего он используется. Vue.js - это современный прогрессивный фреймворк на языке программирования Javascript, который упрощает разработку веб-приложений благодаря компонентному подходу. Видео расскажет о преимуществах Vue.js, таких как низкий порог входа по сравнению с альтернативами, и покажет, как этот инструмент помогает эффективно управлять данными и организовывать код. Пользователи узнают о философии разработки с использованием Vue.js и преимуществах, которые он предоставляет для создания масштабируемых и удобных в обслуживании приложений.

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

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

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

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

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

Уровень данных (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.js для управления отображением контента в зависимости от состояния данных. Обсуждаются директивы v-if, v-else-if и v-else, позволяющие динамически отображать различные элементы DOM в соответствии с условиями. Приводятся примеры использования этих директив и объясняются их особенности. Дополнительно сравниваются директивы v-if и v-show, выявляя различия в их поведении. Получите понимание того, как эффективно использовать условные операторы для создания гибких и интерактивных интерфейсов в приложениях Vue.js.

Задачи v-if.

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

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

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

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

Данный раздел посвящен задачам, связанным с циклами во фреймворке Vue.js. Работа с циклами является важной составляющей веб-разработки, так как она позволяет автоматизировать повторяющиеся операции и упростить код при работе с большим объемом данных.

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

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

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

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

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

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

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

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

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

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

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

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.js для вставки HTML-разметки в веб-приложение. Примеры кода демонстрируют, как передать данные с HTML-разметкой из API и отобразить их на веб-странице с помощью v-html. Это позволяет избежать преобразования HTML в текст и обеспечивает корректный рендеринг разметки. Подходящее использование директивы в контексте реального элемента DOM-разметки подробно объясняется, предоставляя читателям полезные сведения о том, как сделать их веб-приложения более динамичными и интерактивными с помощью Vue.js.