Веб-компоненты — это общий термин для набора собственных веб-API, которые позволяют разработчикам создавать повторно используемые настраиваемые элементы. Vue имеет отличную поддержку как для использования, так и для создания пользовательских элементов.
Главное преимущество веб-компонентов в том, что их можно использовать с любым фреймворком или даже без фреймворка.
В три простых шага давайте посмотрим, как мы можем создать веб-компонент из Vue SFC (однофайловый компонент).
1. Создать пользовательский элемент
Чтобы создать пользовательский элемент, мы используем defineCustomElement:
Вы могли заметить, что наш SFC использует специальный файл, заканчивающийся на .ce.vue.
Он встраивает теги <style> SFC в виде строк CSS и предоставляет их в параметрах стилей компонента.
Во время производственной сборки с настройкой инструментов по умолчанию <style> внутри SFC извлекаются и объединяются в один файл CSS. Но для пользовательского компонента теги <style> должны быть внедрены в теневой корень пользовательского элемента.
2. Зарегистрируйте пользовательский элемент в DOM
Далее мы можем зарегистрировать пользовательский элемент, используя метод define. После регистрации все теги <my-example> на странице впоследствии будут обновлены:
3. Используйте пользовательский элемент в своем HTML
Наконец, мы можем использовать наш пользовательский элемент в HTML:
Ознакомьтесь с документацией для получения более подробной информации о том, как это работает.
Кураторский контент Vue
📕 Гибридный рендеринг в Nuxt.js 3
👉🏼 Nuxt 3 имеет множество вариантов рендеринга. Есть SSR, SSG, SPA…
👉🏻 В этой статье Даниэль разбирает каждый вариант.
📕 Руководство по автоматизированному тестированию в Vue с Cypress
👉🏻 В этой статье Пол учит нас, как тестировать отдельные компоненты Vue с помощью Cypress.
👉🏻 «Если вы используете Vue, Cypress — один из лучших инструментов для тестирования вашего приложения».
📹 Путь Vue к Vite
👉🏻 Как поделился Хаокун в своем выступлении на ViteConf, не только скорость делает Vite привлекательным.
👉🏻 Слайды: https://docs.google.com...
Совет TypeScript: избегайте экспорта по умолчанию
Давайте сначала рассмотрим пример с экспортом по умолчанию с использованием export default:
А теперь тот же пример, но без экспорта по умолчанию:
Почему лучше?
🤜🏻 Улучшенная поддержка рефакторинга
🤜🏻 Защита от опечаток
🤜🏻 Улучшено встряхивание деревьев
🤜🏻 Автоматический импорт/дополнение
Кураторский контент для веб-разработки
📕 TypeScript на уровне типов
👉🏻 Онлайн-курс, который поднимет ваши навыки TypeScript от среднего до продвинутого.
👉🏻 Это даст вам четкое представление об основах системы шрифтов и проведет вас через ее самые продвинутые функции.
📕 Поговорим о веб-компонентах
👉🏻 Брэд рассказывает, как веб-компоненты могут помочь в доставке библиотек компонентов системы дизайна и их совместимости с библиотеками и фреймворками JS.
📕 Toyota пострадала от утечки данных, случайно опубликовав секретный ключ на GitHub
👉🏻 Toyota сообщила, что они случайно предоставили учетные данные, позволяющие получить доступ к данным клиентов в общедоступном репозитории GitHub в течение почти 5 лет.
🛠️ DevTools-X
👉🏻 Кросс-платформенная коллекция утилит для разработчиков, ориентированных в первую очередь на автономный режим, похожих на встроенные в Mac/Windows.
👉🏻 Включает утилиты для цвета, изображений, JSON, Regex, SQL и даже живую игровую площадку React.
🛠️ SurveyJS
👉🏻 Библиотека конструктора форм для создания многоязычных форм опросов на основе данных.
👉🏻 Он имеет «профессиональный» уровень и некоторые сопутствующие коммерческие услуги, но имеет базовую лицензию MIT.
🛠️ Day.js
👉🏻 Быстрая альтернатива Moment.js размером 2 КБ с таким же современным API.
