Another time:
титульная страница > программирование > Написание вашего первого веб-компонента (Изучите Modulo.js — Часть f).
Написание вашего первого веб-компонента (Изучите Modulo.js — Часть f).
Опубликовано 8 ноября 2024 г.
Просматривать:276
? Добро пожаловать всем новым подписчикам и вернувшимся программистам компонентов! Я начинаю новую серию руководств из 10 частей. В то время как в других моих уроках Modulo.js использовался для создания конкретных забавных маленьких приложений, таких как танцевальные вечеринки с покемонами, ретро-текстовые редакторы или галереи видеоигр, эта серия уроков будет построена на основных принципах, начиная с самого начала: Что такое веб-компонент?
Следующий шаг после HTML и CSS
Вы только что изучили основы HTML и CSS, вам интересно сделать следующий шаг и вы хотите создавать более крупные и полные веб-приложения? Или вы уже веб-разработчик или специалист по JavaScript и просто хотите создавать быстрые и легкие веб-приложения без лишнего раздувания, инструментов или лишних зависимостей?
Если да, то веб-компоненты для вас! Они позволяют создавать повторно используемые части кода. Прочитав это руководство, вы узнаете, как исправить повторяющиеся и сложные в обслуживании HTML и CSS. Он также использует только минимальный набор инструментов и библиотек, а это означает, что вам не понадобятся Node.js, NPM или массивный node_modules. Это также позволит вам отточить свои навыки в современной веб-разработке внешнего интерфейса: в будущих уроках этой серии вы изучите такие понятия, как slots, shadowDOM, props , шаблоны, управление состоянием и многое другое! Это концепции, которые можно перенести на другие популярные платформы, и простой декларативный подход Modulo может стать более привлекательным способом изучения основных концепций, не увязая в сложной настройке.
Знакомство с фреймворком Modulo
Что такое Modulo? Modulo — это небольшая, но мощная веб-платформа с открытым исходным кодом, написанная на JavaScript. Он не имеет зависимостей и использует синтаксис HTML, поэтому его можно настроить при загрузке страницы без необходимости использования Node.js или компиляции. Вы можете использовать его в простом «статическом сайте» HTML (например, когда вы собираете HTML, CSS и другие статические ресурсы в каталоге для запуска на статическом веб-хосте) или в любом другом существующем веб-приложении. В этом руководстве рассказывается об использовании Modulo в качестве инструмента для создания веб-компонентов.
Представляем часть 1
В первой части мы научимся создавать простой компонент «Hello World». В будущих частях мы научимся добавлять стиль, реквизиты, состояние, реактивные формы, слоты, API и многое другое, но сейчас мы начнем с основ: Выходим за рамки базового HTML и CSS путем создания и повторного использования веб-компонента с помощью Modulo.
Шаг 1. Включение по модулю
Прежде чем мы сможем использовать Modulo, нам нужно подключить фреймворк. Вся структура содержится в файле «Modulo.js», содержащем 2000 строк JavaScript. Это означает, что для запуска проекта Modulo не требуется буквально никаких зависимостей помимо вашего браузера и редактора. Итак, просто откройте пустой HTML-файл и приступайте к работе со следующим очень простым стартовым кодом:
Шаг 2. Определение вашего первого компонента
Теперь, когда мы его включили, мы можем начать писать Определения по модулю и использовать фреймворк в целом. Мы определяем наш первый компонент, создавая определение
Hello Modulo World!
Таким образом, этот «Шаблон» становится «шаблоном» для нашего компонента: каждый раз, когда наш компонент появляется на странице, он отображает внутри себя заданный шаблон.
Шаг 3. Использование вашего первого компонента
После определения вы можете использовать компонент, ссылаясь на его имя, как если бы это был простой тег HTML:
На экране отобразится следующее:
Привет, Modulo Мир!
Обратите внимание, что после регистрации компоненты могут размещаться везде, где могут размещаться простые HTML-теги, и таким же образом их можно стилизовать с помощью CSS. Другими словами, создание компонента похоже на создание HTML-тега совершенно нового типа, который можно использовать где угодно, точно так же, как исходные HTML-теги
Заявление о выпуске
Эта статья воспроизведена по адресу: https://dev.to/michaelpb/writing-your-first-web-comComponent-learn-modulojs-part-1-of-10-4okh?1 Если есть какие-либо нарушения, свяжитесь с Study_golang. @163.com удалить
Последний учебник
Более>
-
Как ограничить диапазон прокрутки элемента в родительском элементе динамического размера?реализация пределов высоты CSS для вертикальных элементов прокрутки В интерактивном интерфейсе, контроль над поведением прокрутки элементов яв...программирование Опубликовано в 2025-05-01 -
Как эффективно повторить строковые символы для вдавления в C#?повторяя строку для вдавления , когда обрабатывает строку, основанную на глубине элемента, удобно иметь эффективный способ вернуть строку, повт...программирование Опубликовано в 2025-05-01
-
Как я могу эффективно заменить несколько подстроков в строке Java?заменить несколько подстроков в строку эффективно в Java , когда сталкивается с необходимостью заменить несколько подстроков в строке, это зама...программирование Опубликовано в 2025-05-01
-
Как я могу объединить таблицы базы данных с различным числом столбцов?объединенные таблицы с разными столбцами ] может столкнуться с проблемами при попытке объединить таблицы баз данных с разными столбцами. Просто...программирование Опубликовано в 2025-05-01
-
Как я могу программно выбрать весь текст в Div на мыши щелкнуть?программно выбрать текст div на мышью щелкнут Вопрос , данный элемент div с текстовым контентом, как пользователь может программно выбрать весь...программирование Опубликовано в 2025-05-01
-
Как сортировать ключи от Javascript объекта в алфавитном порядке?Как сортировать объекты javascript по Key Если у вас есть объект JavaScript, вы можете реорганизовать его свойства алфавитно для улучшенных це...программирование Опубликовано в 2025-05-01
-
Как разрешить ошибку \ "Неверное использование групповой функции \" в MySQL при поиске максимального подсчета?Как получить максимальный счет, используя MySQL В MySQL вы можете столкнуться с проблемой, пытаясь найти максимальный подсчет значений, сгрупп...программирование Опубликовано в 2025-05-01
-
Как преобразовать столбец DataFrame Pandas в формат DateTime и фильтр по дате?Transform Pandas DataFrame в Format DateTime сценарий: данные в данных Pandas DataFrame часто существует в различных форматах, включая строк...программирование Опубликовано в 2025-05-01
-
Как я могу эффективно генерировать удобные для URL слизняки из строк Unicode в PHP?создание функции для эффективной генерации Slug Создание слизняков, упрощенные представления строк Unicode, используемые в URL, может быть сло...программирование Опубликовано в 2025-05-01
-
Как я могу обрабатывать имена файлов UTF-8 в функциях файловой системы PHP?обработка UTF-8 имен файлов в функциях файловой системы PHP При создании папок, содержащих utf-8, с использованием функции PHP MkDir, вы может...программирование Опубликовано в 2025-05-01
-
Next.js Chrome Extension Development GuideВ этой статье подробно описывается процесс создания расширения Chrome с использованием Next.js, сосредоточенного на использовании реагирования для...программирование Опубликовано в 2025-05-01
-
Существует ли разница в производительности между использованием зала и итератора для сбора сбора в Java?для каждого цикла Vs. iterator: эффективность в сборе Traversal введение при переселении коллекции в Java, выборе между использованием для...программирование Опубликовано в 2025-05-01
-
Почему Microsoft Visual C ++ не может правильно реализовать двухфазной экземпляры?загадка «Сломанная» двухфазное матричное экземпляры в Microsoft Visual C Задача: пользователи обычно выражают обеспокоенность Microsoft Visu...программирование Опубликовано в 2025-05-01
-
Python эффективный способ удаления HTML -тегов из текстаLearing HTML -теги в Python для нетронутого текстового представления манипулирование ответами HTML часто включает в себя извлечение соответств...программирование Опубликовано в 2025-05-01
-
Могут ли параметры шаблона в C ++ 20 постоянной функции зависеть от параметров функции?постоянные функции и параметры шаблона, зависящие от аргументов функций в C 17, параметр шаблона не может зависеть от аргумента, потому что он...программирование Опубликовано в 2025-05-01
Изучайте китайский
- 1 Как сказать «гулять» по-китайски? 走路 Китайское произношение, 走路 Изучение китайского языка
- 2 Как сказать «Сесть на самолет» по-китайски? 坐飞机 Китайское произношение, 坐飞机 Изучение китайского языка
- 3 Как сказать «сесть на поезд» по-китайски? 坐火车 Китайское произношение, 坐火车 Изучение китайского языка
- 4 Как сказать «поехать на автобусе» по-китайски? 坐车 Китайское произношение, 坐车 Изучение китайского языка
- 5 Как сказать «Ездить» по-китайски? 开车 Китайское произношение, 开车 Изучение китайского языка
- 6 Как будет плавание по-китайски? 游泳 Китайское произношение, 游泳 Изучение китайского языка
- 7 Как сказать «кататься на велосипеде» по-китайски? 骑自行车 Китайское произношение, 骑自行车 Изучение китайского языка
- 8 Как поздороваться по-китайски? 你好Китайское произношение, 你好Изучение китайского языка
- 9 Как сказать спасибо по-китайски? 谢谢Китайское произношение, 谢谢Изучение китайского языка
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
Декодирование изображения в формате base64
Китайский Пиньинь
Кодировка Юникод
JS-обфускация, шифрование, сжатие
Инструмент шестнадцатеричного шифрования URL-адресов
Инструмент преобразования кодировки UTF-8
Онлайн-инструменты кодирования и декодирования Ascii
Инструмент шифрования MD5
Онлайн-инструмент для шифрования и дешифрования хеша/хеш-текста
Онлайн-шифрование SHA