Vue. Компоненты.

Как получить доступ к закрытым материалам сайта?

1 вариант

Доступ только к курсу "Vue. Компоненты." на 1 год

Стоимость 500 руб.

2 вариант

1 мес. 1 год
1000 руб.* 3500 руб.* (-80%)

* - цена в других валютах уточняется отдельно

Ссылки для оплаты доступны после регистрации и входа на сайт.

Что такое компоненты Vue.js

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

Способы создания Vue компонентов

Узнайте о двух основных способах создания компонентов в Vue: SFC (однофайловые компоненты) и JavaScript объекты. Оптимизируйте ваш опыт разработки, выбрав подход, который соответствует вашим потребностям. Узнайте, как использовать системы сборки или обойтись без них, и создавайте мощные приложения с Vue без лишних сложностей.

Создание компонентов на примере сборки с глобальным объектом Vue

Что такое SFC Single File Component Vue. Механизм подключения.

Изучите, как создавать и интегрировать однофайловые компоненты (single file component vue) в ваших Vue проектах для упрощения разработки. Узнайте, как эти компоненты, с расширением *.vue, могут улучшить структуру проекта с четким разделением шаблонов, скриптов и стилей. Узнайте, как создать файл компонента, импортировать его в родительский компонент и работать с ним. Также узнаете про важность системы сборки для эффективного использования однофайловых компонентов.

Понятие props во Vue. Что это и зачем это нужно.

Props в Vue: что это такое и как использовать. Узнайте, как передавать данные между компонентами в Vue.js с помощью props. Разбор концепции props: зачем они нужны, как создавать и использовать, их преимущества и ограничения. Примеры props в действии и их роль в гибкой настройке компонентов. Понимание важности props для эффективной работы с Vue компонентами.

Создание props Vue с помощью массива ключей

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

Задание props через объект. Значение по умолчанию и обязательность prop

Задание объекта в качестве type для props

Задание базовых types для props

Особенность работы с data в компонентах


Emits Vue. Передача событий и данных между компонентами.

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

Логика и особенности работы props и emits

Вызов метода в родительском компоненте без emit

Как передавать data из объекта Vue внутрь компонента


Множественный v-model


Vue. Использование v-for с компонентами.

Вы узнаете, как применять директиву v-for для рендеринга Vue-компонентов несколько раз. Это полезно, когда необходимо отобразить компонент, например, для каждого элемента списка. Рассмотрим, как директива позволяет повторять компонент столько раз, сколько есть элементов в массиве items. Вы сможете легко настроить отображение и повторение компонентов в вашем приложении.

Vue. Что такое слоты (slot).

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

Как задать области для более одного слота в компоненте

Знакомство с примесями mixins во Vue

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

Сервисы Vue приложений

Компонент для отображения компонентов

Изменяем стандартное имя для импортируемого компонента Vue

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

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