Another time:
Schreiben Sie Ihre erste Webkomponente (Lernen Sie Modulo.js – Teil f
Veröffentlicht am 08.11.2024
Durchsuche:515
? Willkommen, alle neuen Abonnenten und wiederkehrenden Komponenten-Programmierer! Ich starte eine neue 10-teilige Tutorial-Reihe. Während meine anderen Tutorials Modulo.js verwendet haben, um spezifische, unterhaltsame kleine Apps wie Pokémon-Tanzpartys, extrudierte Texteditoren im Retro-Stil oder Videospielgalerien zu erstellen, baut diese Tutorialreihe auf Grundprinzipien auf, beginnend mit dem ersten Punkt: Was ist eine Webkomponente?
Der nächste Schritt nach HTML und CSS
Haben Sie gerade die Grundlagen von HTML und CSS erlernt und sind neugierig auf den nächsten Schritt und möchten größere und vollständigere Webanwendungen erstellen? Oder sind Sie bereits ein Webentwickler oder JavaScript-Profi und möchten einfach nur schnelle und einfache Web-Apps ohne zu viel Aufwand, Tools oder übermäßige Abhängigkeiten erstellen?
Wenn ja, sind Webkomponenten genau das Richtige für Sie! Mit ihnen können Sie wiederverwendbare Codeteile erstellen. In diesem Tutorial erfahren Sie, wie Sie sich wiederholende, schwer zu wartende HTML- und CSS-Fehler beheben können. Außerdem werden nur minimale Tools und Bibliotheken verwendet, sodass Sie weder Node.js, NPM noch umfangreiche node_modules benötigen. Außerdem können Sie damit Ihre Fähigkeiten in der modernen Frontend-Webentwicklung verbessern: In den zukünftigen Tutorials dieser Reihe lernen Sie Konzepte wie Slots, shadowDOM, props kennen. , Templating, Statusverwaltung und mehr! Hierbei handelt es sich um Konzepte, die auf andere gängige Frameworks übertragbar sind, und der einfache, deklarative Ansatz von Modulo könnte eine einladendere Möglichkeit sein, die Kernkonzepte zu erlernen, ohne sich in komplexen Setups zu verzetteln.
Vorstellung des Modulo-Frameworks
Was ist Modulo? Modulo ist eine kostenlose Software / Open Source, ein kleines, aber feines Web-Framework, das in JavaScript geschrieben ist. Es weist keine Abhängigkeiten auf und verwendet HTML-Syntax, sodass es sich beim Laden der Seite selbst einrichten kann, ohne dass Node.js oder Kompilierung erforderlich ist. Sie können es in einer einfachen „statischen HTML-Site“ (z. B. wenn Sie HTML, CSS und andere statische Assets in einem Verzeichnis zusammenstellen, um sie auf einem statischen Webhost zu starten) oder jeder anderen vorhandenen Web-App verwenden. In diesem Tutorial geht es um die Verwendung von Modulo als Tool zum Erstellen von Webkomponenten.
Einführung in Teil 1
In Teil 1 lernen wir, wie man eine einfache „Hello World“-Komponente erstellt. In zukünftigen Teilen werden wir lernen, wie man Style, Props, State, reaktive Formulare, Slots, APIs und vieles mehr hinzufügt, aber zunächst beginnen wir mit den Grundlagen: Gehen über einfaches HTML hinaus und CSS durch Erstellen und Wiederverwenden einer Webkomponente mit Modulo.
Schritt 1: Modulo einbinden
Bevor wir Modulo verwenden können, müssen wir das Framework einbinden. Das gesamte Framework ist in „Modulo.js“ enthalten, einer Datei mit 2000 Zeilen JavaScript. Das bedeutet, dass das Starten eines Modulo-Projekts buchstäblich keine Abhängigkeiten außer Ihrem Browser und Editor erfordert. Öffnen Sie also einfach eine leere HTML-Datei und legen Sie mit dem folgenden sehr einfachen Startercode los:
Schritt 2: Definieren Sie Ihre erste Komponente
Nachdem wir es eingebunden haben, können wir mit dem Schreiben von Modulo-Definitionen beginnen und das Framework im Allgemeinen verwenden. Wir definieren unsere erste Komponente, indem wir eine Modulo-
Hello Modulo World!
Diese „Vorlage“ wird somit zur „Vorlage“ für unsere Komponente: Jedes Mal, wenn unsere Komponente auf der Seite erscheint, wird die darin enthaltene Vorlage gerendert.
Schritt 3: Verwenden Sie Ihre erste Komponente
Nach der Definition können Sie eine Komponente verwenden, indem Sie auf ihren Namen verweisen, als wäre es ein einfaches HTML-Tag:
Dies führt dazu, dass Folgendes auf dem Bildschirm angezeigt wird:
Hallo Modulo Welt!
Beachten Sie, dass Komponenten nach der Registrierung überall hingehen können, wo auch einfache HTML-Tags hingehen, und dass sie auf die gleiche Weise auch mit CSS gestaltet werden können. Mit anderen Worten: Das Erstellen einer Komponente ist wie das Erstellen eines brandneuen HTML-Tag-Typs, der überall verwendet werden kann, genau wie die ursprünglichen HTML-Tags von
Freigabeerklärung
Dieser Artikel ist abgedruckt unter: https://dev.to/michaelpb/writing-your-first-web-component-learn-modulojs-part-1-of-10-4okh?1 Bei Verstößen wenden Sie sich bitte an Study_golang @163.com löschen
Neuestes Tutorial
Mehr>
-
Wie kann man die Funktionsbeschränkungen von PHP 'Funktionen überwinden?Überwindung von PHP-Funktionsfunktionen Einschränkungen In PHP sind eine Funktion mit demselben Namen mehrmals ein No-no. Der Versuch, dies zu...Programmierung Gepostet am 2025-03-11 -
\ "während (1) gegen (;;): Beseitigt die Compiler -Optimierung Leistungsunterschiede? \"wob führt die Verwendung von (1) statt für (;;) zu einem Leistungsunterschied in Infinite führt Loops? Antwort: In den meisten modernen C...Programmierung Gepostet am 2025-03-11
-
Wie extrahieren Sie ein zufälliges Element aus einem Array in PHP?zufällige Auswahl aus einem Array In PHP kann ein zufälliger Element aus einem Array mit Leichtigkeit erreicht werden. Betrachten Sie das folgen...Programmierung Gepostet am 2025-03-11
-
Wie setze ich Tasten in JavaScript -Objekten dynamisch ein?wie man einen dynamischen Schlüssel für eine JavaScript -Objektvariable erstellt beim Versuch, einen dynamischen Schlüssel für ein JavaScript -O...Programmierung Gepostet am 2025-03-11
-
Wie entferte ich anonyme JavaScript -Ereignishandler sauber?entfernen anonymer Ereignis -Hörer Hinzufügen von anonymen Ereignishörern zu Elementen bieten Flexibilität und Einfachheit, aber wenn es Zeit is...Programmierung Gepostet am 2025-03-11
-
Wie füge ich Blobs (Bilder) mithilfe von PHP richtig in MySQL ein?Fügen Sie Blobs in mySQL -Datenbanken mit php beim Versuch, ein Bild in einer MySQL -Datenbank zu speichern, auf eine auf ein Bild zu speiche...Programmierung Gepostet am 2025-03-11
-
Können mehrere klebrige Elemente in reinem CSS übereinander gestapelt werden?Ist es möglich, in reinem CSS mehrere klebrige Elemente gestapelt zu haben? Hier: https://webthemez.com/demo/sticky-multi-header-scroll/index.ht...Programmierung Gepostet am 2025-03-11
-
Warum erscheint mein CSS -Hintergrundbild nicht?Fehlerbehebung: CSS -Hintergrundbild erscheinen nicht Sie haben auf ein Problem gestoßen, bei dem Ihr Hintergrundbild trotz der folgenden Tuto...Programmierung Gepostet am 2025-03-11
-
Gibt es einen Leistungsunterschied zwischen der Verwendung einer For-Each-Schleife und einem Iterator für die Sammlung durchquert in Java?für jede Schleife vs. Iterator: Effizienz in der Sammlung traversal Einführung beim Durchlaufen einer Sammlung in Java, die Auswahl an der...Programmierung Gepostet am 2025-03-11
-
Wie beheben Sie die Diskrepanzen für Modulpfade in Go -Mod mithilfe der Richtlinie Ersetzen?überwinden Modulpfad -Diskrepanz in go mod Wenn GO mod verwendet wird, ist es möglich, auf einen Konflikt zu begegnen, bei dem ein Drittanbiet...Programmierung Gepostet am 2025-03-11
-
So laden Sie Dateien mit zusätzlichen Parametern mit java.net.urlconnection und Multipart/Form-Data-Codierung hoch?Dateien mit Http-Anfragen hochladen , um Dateien auf einen HTTP-Server hochzuladen und gleichzeitig zusätzliche Parameter zu senden. Hier ist e...Programmierung Gepostet am 2025-03-11
-
Wie rufe ich die neueste JQuery -Bibliothek von Google APIs ab?abrufen die neueste jQuery -Bibliothek von Google apis Die bereitgestellte jQuery -URL in der Frage ist für Version 1.2.6. Für das Abrufen der...Programmierung Gepostet am 2025-03-11
-
Welche Methode ist effizienter für die Erkennung von Punkt-in-Polygon: Strahlenverfolgung oder Matplotlib \ 's path.contains_points?effiziente Punkt-in-Polygon-Erkennung in Python festlegen, ob ein Punkt innerhalb eines Polygons eine häufige Aufgabe in der Computergeometrie i...Programmierung Gepostet am 2025-03-11
-
Warum hört die Ausführung von JavaScript ein, wenn die Firefox -Rückbutton verwendet wird?Navigational History Problem: JavaScript hört auf, nach der Verwendung von Firefox -Back -Schaltflächen auszuführen. Dieses Problem tritt in ande...Programmierung Gepostet am 2025-03-11
-
Kann ich meine Verschlüsselung von McRypt nach OpenSSL migrieren und mit OpenSSL von McRypt-verkürzten Daten entschlüsseln?Upgrade meiner Verschlüsselungsbibliothek von McRypt auf OpenSSL Kann ich meine Verschlüsselungsbibliothek von McRypt nach OpenSsl aufrüsten? ...Programmierung Gepostet am 2025-03-11
Chinesisch lernen
- 1 Wie sagt man „gehen“ auf Chinesisch? 走路 Chinesische Aussprache, 走路 Chinesisch lernen
- 2 Wie sagt man auf Chinesisch „Flugzeug nehmen“? 坐飞机 Chinesische Aussprache, 坐飞机 Chinesisch lernen
- 3 Wie sagt man auf Chinesisch „einen Zug nehmen“? 坐火车 Chinesische Aussprache, 坐火车 Chinesisch lernen
- 4 Wie sagt man auf Chinesisch „Bus nehmen“? 坐车 Chinesische Aussprache, 坐车 Chinesisch lernen
- 5 Wie sagt man „Fahren“ auf Chinesisch? 开车 Chinesische Aussprache, 开车 Chinesisch lernen
- 6 Wie sagt man Schwimmen auf Chinesisch? 游泳 Chinesische Aussprache, 游泳 Chinesisch lernen
- 7 Wie sagt man auf Chinesisch „Fahrrad fahren“? 骑自行车 Chinesische Aussprache, 骑自行车 Chinesisch lernen
- 8 Wie sagt man auf Chinesisch Hallo? 你好Chinesische Aussprache, 你好Chinesisch lernen
- 9 Wie sagt man „Danke“ auf Chinesisch? 谢谢Chinesische Aussprache, 谢谢Chinesisch lernen
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
Bildbase64-Dekodierung
Chinesisches Pinyin
Unicode-Kodierung
Komprimierung der JS-Verschleierungsverschlüsselung
URL-Hexadezimal-Verschlüsselungstool
Konvertierungstool für UTF-8-Kodierung
Online-Tools zur ASCII-Kodierung und -Dekodierung
MD5-Verschlüsselungstool
Hash/Hash-Text-Online-Verschlüsselungs- und Entschlüsselungstool
Online-SHA-Verschlüsselung