Vue 3 фундаментальный курс от А до Я

Этот курс подходит для начинающих, которые никогда не работали с фреймворками, и опытных разработчиков, знакомых с React или Angular. Он охватывает практические концепции Vue от А до Я, делая упор на быстрое обучение. Цель - создать наглядное руководство для разработчиков Vue, позволяющее им легко разрабатывать графические интерфейсы с использованием Vue.

Понимание виртуального DOM Браузер строит дерево DOM после синтаксического анализа HTML-страницы, и каждая операция с деревом DOM требует больших ресурсов. Для оптимизации рендеринга представление создает виртуальное представление изменений перед их применением к исходному DOM.

Компонентный подход Представления распространяют основанный на компонентах подход, при котором для создания приложений используются небольшие повторно используемые фрагменты, называемые компонентами. Компоненты могут быть вложены друг в друга, образуя иерархическую структуру с одним корневым родительским компонентом в ее ядре.

Начало разработки проекта В этой главе мы начинаем процесс разработки с создания нового проекта. Мы сосредоточимся на настройке структуры проекта и установке необходимых пакетов с помощью npm.

Настройка структуры проекта Здесь мы настраиваем структуру проекта и устанавливаем необходимые файлы для разработки. Это включает в себя создание каталогов, удаление ненужных файлов, импорт зависимостей и монтирование приложения в HTML-файл.

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

Синтаксис интерполяции Чтобы интерполировать количество лайков, мы используем двойные фигурные скобки для ссылки на модель. При открытии браузера, если лайков 0, давайте выделим их жирным шрифтом и сделаем то же самое для дизлайков, создав существующую модель со значением по умолчанию 0. Если у нас будет 5 дизлайков, это будет отображаться на странице соответствующим образом.

Манипулирование динамической моделью Мы добавляем кнопки для динамического изменения и увеличения / уменьшения количества лайков или антипатий при нажатии.

Создание методов компонентов Чтобы создать методы для каждой кнопки, мы объявляем функции в поле метода компонента. Затем в этом поле мы создаем две соответствующие функции: одну с именем "нравится" и другую для увеличения значения на единицу при обращении к конкретной модели. Затем мы получаем доступ к этим данным внутри функции и соответствующим образом изменяем их значения.

Прослушиватели событий и директивы Нам нужны прослушиватели событий для наших кнопок. Для этого мы используем директивы Vue, такие как "@click", чтобы указать, какое событие прослушивать (в данном случае нажатие кнопки). Это позволяет нам связывать конкретные действия (например, увеличение количества лайков или антипатий) с нажатиями кнопок, используя реактивное поведение.

Использование Vue Devtools Vue devtools - это инструмент разработчика, который позволяет нам проверять поведение нашего приложения Vue. Мы устанавливаем расширение в Chrome, выбираем стабильную версию для отладки Vue 2 и включаем локальный доступ к файлам. Это дает нам доступ к дополнительной вкладке с проверкой дерева компонентов.

Создание базовой функциональности Мы начинаем с создания элемента div с классом "post" и добавляем в него текстовое содержимое. Затем мы применяем минимальные стили, используя раздел "стиль", позволяющий нам увидеть, как выглядит наш пост в браузере.

Стилизация значений по умолчанию Удаление отступов и полей браузера по умолчанию путем установки стилей для всех элементов на 0. Кроме того, создание классического сброса полей и границ.

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

Директива V-FOR используется для работы с массивами внутри шаблонов. Она определяет элемент итерации и откуда он берется с помощью оператора 'in'. Это создает цикл, в котором мы можем работать, динамически извлекая поля заголовка и тела из объектов.

Чтобы динамически добавлять новые записи в массив, мы создаем div с формой внутри. Форма содержит поля ввода для заголовка и описания записи, а также кнопку для добавления записи в массив. Мы применяем стиль для улучшения внешнего вида полей ввода и кнопки.

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

Синхронизация данных Понимание концепции двусторонней привязки, синхронизация пользовательского ввода с данными модели, использование директив для привязки данных к определенным компонентам, отслеживание изменений в полях ввода путем прямой подписки на события.

Предотвращение обновления страницы Чтобы предотвратить действие браузера по умолчанию при отправке формы, мы можем вызвать функцию "preventDefault" в Vue, используя модификаторы. Это отключает поведение браузера по умолчанию и позволяет нам обрабатывать отправку формы без обновления страницы.

Очистка текста после создания записи После добавления записи в массив мы очищаем поля ввода, устанавливая в заголовке и теле пустые строки. Это гарантирует, что после создания записи текст ввода будет очищен для новой записи.

Разложение компонентов В этой главе мы узнаем о создании повторно используемых компонентов в нашем приложении. Мы выделяем два отдельных компонента: список записей и форму записи для создания или редактирования записей. Процесс включает в себя декомпозицию существующего кода на отдельные файлы компонентов и использование фрагментов WebStorm для быстрого создания необходимой структуры.

Регистрирующие компоненты Здесь мы сосредоточимся на регистрации импортированных компонентов в шаблоне с помощью специальных полей внутри каждого файла компонента. Это позволяет нам сделать эти компоненты доступными в шаблоне для использования. Однако попытка добавить функцию автозавершения показывает, что нам необходимо правильно зарегистрировать компонент, прежде чем он сможет быть успешно добавлен.

В этой главе мы узнаем, как передать список записей в качестве реквизита дочернему компоненту. Дочерний компонент ожидает эти записи в качестве аргументов, и они называются "реквизитами". Мы указываем ожидаемые входные данные (записи) и их тип (массив), инициализацию по умолчанию и делаем их обязательными.

V-модель представляет собой таблицу с тремя столбцами: элемент, событие и атрибут. В ней описывается, как реализовать двустороннюю привязку для элементов ввода, таких как флажки и выпадающие списки, с помощью директив.

Обмен данными между родительским и дочерним компонентами Обмен данными между дочерним и родительским компонентами в этом случае необязателен. Вместо этого в дочернем компоненте генерируются события (например, создание новой записи), и родительский компонент подписывается на эти события.

Реализация обработки событий для передачи данных Специальные функции, называемые "эмиттерами", используются для генерации событий из дочернего компонента. Родительский компонент затем подписывается на эти события, используя методы обработки событий, аналогичные обработке событий в собственном JavaScript.

Декомпозиция компонентов для масштабируемости Компоненты "PostForm" и "PostList" независимы, причем "PostForm" отвечает за создание новых записей, в то время как "PostList" получает записи в качестве реквизита. Такая декомпозиция позволяет повторно использовать различные страницы или компоненты, повышая масштабируемость при разработке приложения.

Создание пользовательского компонента кнопки В видео обсуждается создание пользовательского компонента кнопки путем выделения его из основного стиля приложения. В нем демонстрируется, как заменить HTML-кнопку по умолчанию пользовательским компонентом и управлять ее стилем с помощью слотов.

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

Регистрация глобального компонента Мы централизуем регистрацию часто используемых компонентов, чтобы избежать их импорта и регистрации в каждом компоненте. Это создает небольшую библиотеку компонентов, к которой можно легко получить доступ во всем приложении.

Создание пользовательского компонента ввода Мы создаем пользовательский компонент ввода, определяя его HTML-структуру, добавляя его в массив экспорта и используя в качестве замены стандартных HTML-входных данных. Это расширяет нашу библиотеку компонентов за пределы кнопок, включая пользовательские входные данные.

Понимание V-образной модели V-модель представляет путь к модели, который не меняется. Важно понимать, как это работает практически, особенно с точки зрения двунаправленной привязки и обработки событий.

Реализация двусторонней привязки Двусторонняя привязка может быть достигнута с помощью we-modu для компонентов и событий на входе. Это позволяет осуществлять двунаправленный поток данных между родительским и дочерним компонентами, обновляя соответствующие модели по мере необходимости.

Удаление записи В функциональном цикле мы сохранили ключи в KEY и продолжаем, ничего не нарушая. На данный момент у нас есть кнопка удаления, которая не работает; давайте сделаем ее функциональной, удалив соответствующую запись из массива при нажатии. Мы также обсуждаем использование уникальных ключей для каждого объекта, чтобы обеспечить однозначное распознавание узлов.

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

В этой главе мы обсудим условный рендеринг и то, как использовать такие директивы, как v-if и v-else, для условного рендеринга элементов на основе определенных условий. Мы также исследуем концепцию отображения или скрытия элементов в зависимости от длины массива с помощью директивы v-show.

Создание модального диалогового компонента Чтобы создать модальный диалоговый компонент, мы используем компонент "Dialog" и определяем его имя как "MyDialog". Мы объявляем логический флаг с именем "show" для управления видимостью модального окна. Внутри этого компонента мы настраиваем стили для позиционирования и внешнего вида. Используя props, мы можем динамически отображать или скрывать содержимое в диалоговом окне.

Функциональность модального диалога Мы добавляем прослушиватели событий для обработки открытия и закрытия диалогового окна на основе взаимодействия с пользователем. Кроме того, предотвращая распространение событий в коде JavaScript, мы гарантируем, что щелчок за пределами области содержимого не приведет к непреднамеренному закрытию модального окна. Наконец, после успешного создания записи с помощью интерактивного нажатия кнопки внутри интерфейса нашего приложения (UI), это запускает как скрытие

Модификаторы V-MODEL для диалогового окна можно настроить таким образом, чтобы добавить отступы над и под кнопкой, предотвращая ее прилипание к заголовку. Мы также изучили другие модификаторы, такие как prevent, stop-propagation, и обсудили двустороннюю привязку к данным модели.

Наше приложение растет по мере добавления новых функций, но оно не взаимодействует с сервером. Давайте исправим это, реализовав функцию для получения списка записей непосредственно с сервера с помощью Axios и сервиса Jason Placeholder. Мы получаем 100 сообщений за один запрос, что не идеально, поэтому мы реализуем разбиение на страницы для отображения 10 сообщений на странице.

Жизненный цикл компонента Жизненный цикл компонента состоит из четырех этапов: создание, монтирование, обновление и уничтожение. Каждый этап включает в себя определенные функции, которые выполняются в разные моменты жизненного цикла компонента.

Динамическая загрузка после Использование "подключенного" хука позволяет нам динамически загружать сообщения при первом открытии приложения. Реализуя динамическую задержку загрузки сообщений с помощью асинхронных обратных вызовов, мы можем создать более интерактивный пользовательский опыт.

Добавив индикатор загрузки, пользователи увидят, что страница загружается, и не столкнутся с пустым экраном. Мы создаем логическую переменную 'post_loading', чтобы условно отображать сообщения только тогда, когда это значение равно true. Кроме того, мы используем setTimeout для имитации процесса загрузки.

Создание выпадающего списка Чтобы реализовать выпадающий список, мы создаем компонент select с параметрами по умолчанию и отключаем пустую опцию по умолчанию. Мы добавляем сообщение для пользователя, чтобы он сделал выбор и оформил макет с помощью flexbox.

Двусторонняя привязка данных Мы устанавливаем двустороннюю привязку данных, создавая реквизиты для model и options в нашем компоненте select. Затем мы используем директиву v-model, чтобы отслеживать изменения в значениях списка и обновлять их соответствующим образом.

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

Использование наблюдателей за изменениями модели Наблюдатели в Vue позволяют нам создавать логику, которая выполняется при изменении конкретной модели. Это можно продемонстрировать, создав наблюдатели для разных моделей, таких как "выбранная сортировка" или "диалоговое посещение". Используя глубокое отслеживание объектов в наблюдателях, мы гарантируем, что любое изменение во вложенных полях запускает функцию наблюдателя.

Сортировка массивов с вычисляемыми свойствами Используя вычисляемые свойства и функции обратного вызова, такие как 'sort', мы можем динамически сортировать массивы на основе заданных условий без изменения исходного массива. Кроме того, свойства компьютера действуют как переменные на уровне представления, а не вызываются как обычные функции.

Создание плавной анимации с помощью классов перехода Группа переходов в приложении постепенно увеличивает функциональность, добавляя анимацию к элементам списка с использованием стилей CSS и классов переходов. В документации приведены примеры того, как создавать плавные анимации для добавления или удаления элементов, подчеркивая важность использования ключевых кадров с переходами.

Применение анимационных эффектов Добавление анимационных эффектов к элементам списка предполагает их упаковку в компонент группы переходов и применение определенных стилей CSS. Использование цикла "we for" важно при работе с массивами, поскольку позволяет создавать динамические анимации на основе добавления или удаления элемента.

Мы реализовали фильтрацию записей и теперь будем реализовывать поиск записей. Мы создаем входные данные для поискового запроса, используем двустороннюю привязку и передаем модель директиве в модуле. Затем мы объявляем новое свойство компьютера, которое фильтрует записи по заголовку, используя функцию include.

Разбивка на страницы и вывод страницы Мы реализовали сортировку, поиск и разбиение на страницы. Передавая параметр 'limit', мы ограничиваем результаты до 10 записей. Добавление параметра 'page' позволяет нам получать доступ к определенным страницам данных. Вычисление общего количества страниц на основе общего количества ресурсов.

Создание шаблона разбивки на страницы Чтобы создать удобный шаблон разбивки на страницы, мы используем циклы для динамической генерации номеров страниц для навигации. Оформление разбивки на страницы с помощью гибкого отображения и добавление границ для визуальной привлекательности.

Динамическая привязка классов и стилей Чтобы динамически применять класс на основе текущей страницы, мы создаем класс с именем "corinth-page" с немного более толстой зеленой рамкой размером 2 пикселя. Мы можем динамически привязать этот класс на основе некоторого условия, передав объект в качестве ключа и указав имя класса (в данном случае 'corinth-page'), а также логическое значение. Например, если true, все страницы получают этот класс; если false, они теряют его. Мы также можем установить такие условия, чтобы номер текущей страницы совпадал с определенным номером, чтобы избежать конфликтов имен.

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

Реализация API бесконечной прокрутки и пересечения для постраничного контента. Автоматическая загрузка сообщений по мере того, как пользователь прокручивает страницу до конца.

Доступ к элементам DOM Чтобы получить доступ к определенному элементу DOM, мы используем ссылки, созданные на основе объекта vocal back. Напрямую получая доступ к элементу div в представлении с помощью ссылок, мы можем наблюдать и отслеживать его пересечение с другими элементами.

Реализация обратных вызовов Функция обратного вызова запускается, когда наблюдаемый элемент пересекается или выходит из своего пересечения. Мы используем записи, чтобы проверить, был ли пересечен целевой div, а затем реализуем логику, основанную на этой информации. Кроме того, мы обрабатываем загрузку сообщений, постепенно обновляя страницу и удаляя ненужные индикаторы.

Настройка маршрутизатора Vue Чтобы включить навигацию по страницам, мы добавляем маршрутизатор в наше одностраничное приложение. Для этого необходимо создать папку с именем "router" и определить маршруты в массиве объектов.

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

Динамическая маршрутизация с подключением к маршрутизатору Компонент "Router link" используется для динамической навигации между страницами путем указания маршрутов для каждой ссылки. Кнопки навигации создаются с использованием специальных функций маршрутизации, таких как push, для перемещения между определенными маршрутами при нажатии.

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

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

Создание динамических маршрутов Добавление другой кнопки внутри публикации и привязка ее знаком плюс-минус рядом с кнопкой удаления перенаправит нас на новую страницу. Мы создаем другой маршрут для динамической навигации, копируя существующий и указывая, какой компонент должен отображаться по этому пути.

Создание пользовательских директив В этой главе мы узнаем, как создавать пользовательские директивы в Vue.js. Начнем с понимания структуры директивы и ее привязок к жизненному циклу. Затем мы рассмотрим использование пользовательских директив для отслеживания пересечений и сосредоточения внимания на элементах.

Реализация директивы по отслеживанию пересечений Мы реализуем пользовательскую директиву под названием "v-interception", которая отслеживает пересечение элемента. Директива использует "установленный" хук для привязки функции отслеживания пересечений к элементу, к которому она применяется. Это позволяет нам напрямую взаимодействовать с пересекаемым элементом динамически.

Использование директивы Focus для обеспечения доступности Далее мы создаем другую пользовательскую директиву с именем "v-focus", которая фокусируется на вводе или компоненте при его рендеринге или отображении. Мы демонстрируем, как эта функция фокусировки улучшает доступность, автоматически перенося фокус на определенные элементы, такие как вводы в модальных окнах и формах поиска.

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

Создание миксинов для повторного использования Миксины - это объекты, содержащие данные, методы, перехватчики жизненного цикла и другие функциональные возможности, которые могут быть повторно использованы в нескольких компонентах. Создавая миксины, мы можем объединить их свойства со свойствами компонентов без дублирования кода. Это позволяет нам повысить возможность повторного использования в нашем приложении.

Управление глобальным состоянием Обсуждаем управление глобальным состоянием в приложениях с использованием Vuex, библиотеки для управления состоянием. Объясняем, как происходит обмен данными внутри приложения без использования глобального хранилища.

Проблемы, связанные с распространением данных Изучение проблем при передаче данных по цепочкам компонентов и неудобств такого подхода в определенных сценариях.

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

Создание модуля глобального хранилища "Создание модуля хранилища", который служит централизованным местом для хранения определенных типов информации наряду с получателями, мутациями и действиями для глобального манипулирования этой сохраненной информацией между компонентами.

Введение в состав API API Composition представлен в Vue 3, решая многие проблемы предыдущей версии. Он обеспечивает лучшую организацию кода и возможность повторного использования за счет декомпозиции компонентов.

Рефакторинг компонентов с помощью составных элементов Используя композиционные функции, мы можем провести рефакторинг компонента UserPage, чтобы разделить логику на составные функции. Это улучшает читаемость кода и удобство сопровождения.

Реактивные переменные и методы жизненного цикла Реактивные переменные создаются с помощью функции ref(), позволяющей динамически обновлять данные в шаблоне. Методы жизненного цикла, такие как mounted(), также могут использоваться в составных элементах.

Сортировка и фильтрация сообщений с помощью составных элементов "Составные элементы" используются для создания отдельных файлов для сортировки и фильтрации сообщений на основе поисковых запросов или заголовков сообщений. Логика четко организована в рамках этих составных функций.

Динамическая обработка данных с реактивностью Используя реактивные переменные, такие как ref(), изменения значений данных запускают автоматические обновления в шаблоне без потери реактивности.

Функциональность комментирования, лайков, поиска, загрузки и сортировки сообщений по-прежнему работает. Я поместил много информации в это 3-часовое видео, чтобы показать различные подходы и реализации.