Another time:
Page de garde > La programmation > Écrire votre premier composant Web (Apprendre Modulo.js - Partie f
Écrire votre premier composant Web (Apprendre Modulo.js - Partie f
Publié le 2024-11-08
Parcourir:971
? Bienvenue à tous les nouveaux abonnés et codeurs de composants anciens ! Je lance une nouvelle série de didacticiels en 10 parties. Alors que mes autres tutoriels ont utilisé Modulo.js pour créer des petites applications spécifiques et amusantes comme des soirées dansantes Pokémon, des éditeurs de texte extrudés rétro ou des galeries de jeux vidéo, cette série de tutoriels s'appuiera sur des principes de base, en partant de la case départ : Qu'est-ce que est un composant Web ?
La prochaine étape après HTML et CSS
Vous venez d'apprendre les bases du HTML et du CSS, vous êtes curieux de passer à l'étape suivante et souhaitez créer des applications Web plus grandes et plus complètes ? Ou êtes-vous déjà un développeur Web ou un pro de JavaScript et souhaitez simplement créer des applications Web rapides et légères sans trop de surcharge, d'outils ou de dépendances excessives ?
Si oui, les Web Components sont faits pour vous ! Ils vous permettent de créer des portions de code réutilisables. En suivant ce didacticiel, vous apprendrez à corriger les fichiers HTML et CSS répétitifs et difficiles à maintenir. Il n'utilise également qu'un minimum d'outils et de bibliothèques, ce qui signifie que vous n'aurez pas besoin de Node.js, NPM ou d'un énorme node_modules. Il vous permet également de perfectionner vos compétences en matière de développement Web frontal moderne : dans les prochains didacticiels de cette série, vous apprendrez des concepts tels que slots, shadowDOM, props , modèles, gestion d'état, et bien plus encore ! Ce sont des concepts transférables pour utiliser d'autres frameworks populaires, et l'approche simple et déclarative de Modulo pourrait être un moyen plus invitant d'apprendre les concepts de base sans s'enliser dans une configuration complexe.
Présentation du framework Modulo
Qu'est-ce que Modulo ? Modulo est un logiciel libre/open source, un framework Web petit mais puissant écrit en JavaScript. Il n'a aucune dépendance et utilise la syntaxe HTML afin de pouvoir se configurer au chargement de la page, sans avoir besoin de Node.js ou de compilation. Vous pouvez l'utiliser dans un "site statique" HTML simple (par exemple lorsque vous assemblez du HTML, CSS et d'autres ressources statiques dans un répertoire pour les lancer sur un hébergeur statique), ou dans toute autre application Web existante. Ce didacticiel concerne l'utilisation de Modulo comme outil pour créer des composants Web.
Présentation de la première partie
Dans la première partie, nous apprendrons comment créer un composant simple « Hello World ». Dans les prochaines parties, nous apprendrons comment ajouter du style, des accessoires, des états, des formulaires réactifs, des emplacements, des API et bien plus encore, mais pour l'instant, nous commencerons par les bases : Aller au-delà du HTML de base et CSS en créant et réutilisant un composant Web avec Modulo.
Étape 1 : Inclusion de Modulo
Avant de pouvoir utiliser Modulo, nous devrons inclure le framework. L'ensemble du framework est contenu dans "Modulo.js", un fichier contenant 2000 lignes de JavaScript. Cela signifie que le démarrage d'un projet Modulo ne nécessite littéralement aucune dépendance au-delà de votre navigateur et de votre éditeur. Alors, ouvrez simplement un fichier HTML vierge et lancez-vous avec le code de démarrage très simple suivant :
Étape 2 : Définir votre premier composant
Maintenant que nous l'avons inclus, nous pouvons commencer à écrire des Définitions Modulo et utiliser le framework en général. Nous définissons notre premier composant en créant une définition Modulo
Hello Modulo World!
Ce "Modèle" devient ainsi le "modèle" de notre composant : chaque fois que notre composant apparaît sur la page, il restituera le modèle donné à l'intérieur.
Étape 3 : Utilisation de votre premier composant
Une fois défini, vous pouvez utiliser un composant en faisant référence à son nom comme s'il s'agissait d'une simple balise HTML :
Le message suivant s'affichera à l'écran :
Bonjour Modulo Monde !
Notez qu'une fois enregistrés, les composants peuvent aller partout où les balises HTML simples peuvent aller et peuvent également être stylisés avec CSS de la même manière. En d’autres termes, créer un composant revient à créer un tout nouveau type de balise HTML qui peut être utilisée n’importe où, tout comme les balises HTML originales de
Déclaration de sortie
Cet article est reproduit sur : https://dev.to/michaelpb/writing-your-first-web-component-learn-modulojs-part-1-of-10-4okh?1 En cas de violation, veuillez contacter study_golang @163.com supprimer
Dernier tutoriel
Plus>
-
Pourquoi Pytz montre-t-il des décalages de fuseau horaire inattendus initialement?Dicontenance du fuseau horaire avec pytz Certains flammes de temps présentent des décalages particuliers lorsqu'ils sont initialement obte...La programmation Publié le 2025-03-11 -
TableauLes méthodes sont des fns qui peuvent être appelés sur des objets Les tableaux sont des objets, donc ils ont également des méthodes en js. ...La programmation Publié le 2025-03-11
-
Java autorise-t-il plusieurs types de retour: un regard plus approfondi sur les méthodes génériques?Plusieurs types de retour en java: une idée fausse dévoilée dans le domaine de la programmation java, une signature de méthode particulière pe...La programmation Publié le 2025-03-11
-
Comment vérifier si un objet a un attribut spécifique dans Python?Méthode pour déterminer l'existence de l'attribut d'objet Cette enquête cherche une méthode pour vérifier la présence d'un att...La programmation Publié le 2025-03-11
-
Pourquoi Microsoft Visual C ++ ne parvient pas à implémenter correctement l'instanciation du modèle biphasé?Le mystère de l'instanciation du modèle deux phases "Broken" dans Microsoft Visual C Instruction Problème: Les utilisateurs ex...La programmation Publié le 2025-03-11
-
Comment réparer « Erreur générale : le serveur MySQL 2006 a disparu » lors de l'insertion de données ?Comment résoudre « Erreur générale : le serveur MySQL 2006 a disparu » lors de l'insertion d'enregistrementsIntroduction :L'insertion de d...La programmation Publié le 2025-03-11
-
Comment supprimer les emojis des chaînes dans Python: un guide pour débutant pour fixer les erreurs courantes?Suppression des emojis des chaînes dans python Le code python fourni pour supprimer les emojis échoue car il contient des erreurs de syntax. L...La programmation Publié le 2025-03-11
-
Pourquoi ma configuration de GO à Homebrew provoque-t-elle des problèmes d'exécution de ligne de commande?Brew Go Configuration vs Exécution de la ligne de commande Vous avez initialement installé aller à l'aide de Homebrew, un gestionnaire de ...La programmation Publié le 2025-03-11
-
Comment résoudre les écarts de chemin du module dans GO Mod en utilisant la directive Remplacer?surmonter la divergence du chemin du module dans go mod Lors de l'utilisation de Go Mod, il est possible de rencontrer un conflit où un pa...La programmation Publié le 2025-03-11
-
Pourquoi les images affichent-elles des images à l'aide de la propriété CSS «Content»?Affichage des images avec URL de contenu dans Firefox Un problème a été rencontré lorsque certains navigateurs, spécifiquement Firefox, n'...La programmation Publié le 2025-03-11
-
FIT OBJET: la couverture échoue dans IE et Edge, comment réparer?objet-fit: la couverture échoue dans IE et Edge, comment corriger? Utilisation d'objet-fit: couverture; Dans CSS pour maintenir la hauteur...La programmation Publié le 2025-03-11
-
Plusieurs éléments collants peuvent-ils être empilés les uns sur les autres en CSS pur?Est-il possible d'avoir plusieurs éléments collants empilés les uns sur les autres en pur css? Le comportement souhaité peut être vu Ici:...La programmation Publié le 2025-03-11
-
Pourquoi les comparaisons booléennes «Flake8» sont-elles dans les clauses de filtre Sqlalchemy?flake8 Flagging Boolean Comparison in Filter ClauseWhen attempting to filter query results based on a boolean comparison in SQL, developers may encoun...La programmation Publié le 2025-03-11
-
Comment récupérer la dernière bibliothèque jQuery des API Google?Récupération de la dernière bibliothèque jQuery à partir de Google API L'URL jQuery fournie dans la question est pour la version 1.2.6. Po...La programmation Publié le 2025-03-11
-
Anomalies de valeur clé du tableau PHP: Comprendre le cas curieux de 07 et 08Problème de valeur de clé du tableau php avec 07 & 08 Un tableau contient divers éléments avec des touches associées. Dans PHP, un problème in...La programmation Publié le 2025-03-11
Étudier le chinois
- 1 Comment dit-on « marcher » en chinois ? 走路 Prononciation chinoise, 走路 Apprentissage du chinois
- 2 Comment dit-on « prendre l’avion » en chinois ? 坐飞机 Prononciation chinoise, 坐飞机 Apprentissage du chinois
- 3 Comment dit-on « prendre un train » en chinois ? 坐火车 Prononciation chinoise, 坐火车 Apprentissage du chinois
- 4 Comment dit-on « prendre un bus » en chinois ? 坐车 Prononciation chinoise, 坐车 Apprentissage du chinois
- 5 Comment dire conduire en chinois? 开车 Prononciation chinoise, 开车 Apprentissage du chinois
- 6 Comment dit-on nager en chinois ? 游泳 Prononciation chinoise, 游泳 Apprentissage du chinois
- 7 Comment dit-on faire du vélo en chinois ? 骑自行车 Prononciation chinoise, 骑自行车 Apprentissage du chinois
- 8 Comment dit-on bonjour en chinois ? 你好Prononciation chinoise, 你好Apprentissage du chinois
- 9 Comment dit-on merci en chinois ? 谢谢Prononciation chinoise, 谢谢Apprentissage du chinois
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
Décodage d'images en base64
Pinyin chinois
Encodage Unicode
Compression de chiffrement d'obscurcissement JS
Outil de chiffrement hexadécimal d'URL
Outil de conversion d'encodage UTF-8
Outils d'encodage et de décodage Ascii en ligne
Outil de cryptage MD5
Outil de cryptage et de décryptage en ligne de texte de hachage/hachage
Cryptage SHA en ligne