Hello Modulo World! Any HTML can be here!
Learning Modulo Part 1
Your first Web Component
One time: Another time:
パート 1 は以上です。まだ 9 つのパートが残っているので、このようなチュートリアルをさらにご覧ください。また、いつものように、コメント欄でお気軽に質問や提案をしてください。次回は...
スタイリッシュになります!
","image":"http://www.luping.net/uploads/20240929/172762092566f9673d15d85.png","datePublished":"2024-11-08T10:02:29+08:00","dateModified":"2024-11-08T10:02:29+08:00","author":{"@type":"Person","name":"luping.net","url":"https://www.luping.net/articlelist/0_1.html"}}
最初の Web コンポーネントの作成 (Modulo.js を学ぶ - パート f)
ブラウズ：827
?新規購読者の皆様、コンポーネント プログラマーの皆様、ようこそ! 10 部構成の新しいチュートリアル シリーズを開始します。私の他のチュートリアルでは Modulo.js を使用して、ポケモン ダンス パーティー、レトロな押し出しテキスト エディター、ビデオ ゲーム ギャラリーなどの具体的で楽しい小さなアプリを構築しましたが、このチュートリアル シリーズは、最初から基本的な原則に基づいて構築されます。は Web コンポーネントですか?
HTML と CSS の次のステップHTML と CSS の基礎を学んだばかりで、次のステップに進むことに興味があり、より大規模で完全な Web アプリケーションを構築したいと考えていますか?それとも、あなたはすでに Web 開発者または JavaScript プロで、肥大化しすぎたり、ツールが使用されたり、過剰な依存関係を持たずに、迅速で軽量な Web アプリを構築したいだけですか?
そうであれば、Web コンポーネントが最適です。これらを使用すると、コードの再利用可能な部分を作成できます。このチュートリアルを受講すると、繰り返しが多く保守が難しい HTML と CSS を修正する方法を学びます。また、最小限のツールとライブラリのみを使用するため、Node.js、NPM、または大規模な node_modules は必要ありません。また、最新のフロントエンド Web 開発のスキルを磨くこともできます。このシリーズの今後のチュートリアルでは、
スロット、shadowDOM、props などの概念を学習します。 、テンプレート、状態管理など。これらは、他の一般的なフレームワークを使用するために移植可能な概念であり、Modulo のシンプルで宣言的なアプローチは、複雑なセットアップに行き詰まることなく、中心となる概念を学ぶためのより魅力的な方法となる可能性があります。
Modulo フレームワークの紹介Modulo とは何ですか? Modulo は、JavaScript で書かれたフリー ソフトウェア/オープン ソースの小さいながらも強力な Web フレームワークです。依存関係がなく、HTML 構文を使用するため、Node.js やコンパイルを必要とせず、ページの読み込み時に自動的にセットアップできます。これは、プレーン HTML の「静的サイト」(たとえば、HTML、CSS、およびその他の静的アセットをディレクトリ内で組み立てて静的 Web ホスト上で起動する場合)、またはその他の既存の Web アプリで使用できます。このチュートリアルでは、Web コンポーネントを構築するツールとして Modulo を使用する方法について説明します。
紹介パート 1
基本的な HTML を超えてModulo. で Web コンポーネントを作成して再利用することによる CSS
ステップ 1: モジュロを含めるModulo を使用する前に、フレームワークをインクルードする必要があります。フレームワーク全体は、2000 行の JavaScript を含むファイル「Modulo.js」に含まれています。
これは、Modulo プロジェクトを開始するには、文字通り、ブラウザとエディタ以外の依存関係は必要ありませんことを意味します。したがって、空の HTML ファイルを開いて、次の非常に単純なスターター コードを開始するだけです。
ステップ 2: 最初のコンポーネントを定義する
これをインクルードしたので、
Modulo 定義 の記述を開始し、一般にフレームワークを使用できます。以下のように、Modulo
こんにちはモデューロ ワールド!
テンプレート>
コンポーネント>
Hello Modulo World!
ステップ 3: 最初のコンポーネントの使用
コンポーネントを定義したら、プレーンな HTML タグであるかのようにその名前を参照してコンポーネントを使用できます。
こんにちは
モデューロの世界!
一度登録すると、コンポーネントはプレーン HTML タグが配置できる場所であればどこにでも配置でき、同様に CSS を使用してスタイルを設定できることに注意してください。言い換えれば、コンポーネントの作成は、
-
PHPを使用してBlob（画像）をMySQLに適切に挿入する方法は？php mysqlデータベースを持つmysqlデータベースにブロブを挿入すると、mysqlデータベースに画像を保存しようとすると、遭遇するかもしれません問題。このガイドは、画像データを正常に保存するためのソリューションを提供します。 ImageId、image） values（ &...プログラミング 2025-03-11に投稿されました -
純粋なCSSでは、複数の粘着性要素を互いに積み重ねることができますか？純粋なCSSで複数の粘着性要素を互いに積み重ねることは可能ですか？ここ： https://webthemez.com/demo/sticky-multi-header-scroll/index.html JavaScriptの実装ではなく、純粋なCSSを使用することのみです。複数の粘...プログラミング 2025-03-11に投稿されました
-
Regexを使用してPHPで括弧内で効率的にテキストを抽出する方法php：括弧内の括弧内のテキストの抽出 括弧内に囲まれたテキストの抽出を扱うとき、最も効率的なソリューションを見つけることが不可欠です。 1つのアプローチは、以下に示すように、PHPの文字列操作関数を利用することです。 $ fullstring）; $ sportstring = s...プログラミング 2025-03-11に投稿されました
-
なぜ私のCSSの背景画像が現れるのですか？トラブルシューティング：css背景画像が表示されない チュートリアルの指示にもかかわらず、背景画像が読み込まれない問題に遭遇しました。画像とスタイルのシートは同じディレクトリに存在していますが、背景は空白の白いキャンバスのままです。画像ファイル名を囲む引用： background-ima...プログラミング 2025-03-11に投稿されました
-
Javaのコレクショントラバーサルのために、for-for-eachループとイテレーターを使用することにパフォーマンスの違いはありますか？vs. Iterator：コレクショントラバーサルの効率この記事では、これら2つのアプローチの効率の違いを調査します。内部的にiteratorを使用します： list a = new ArrayList （）; for（整数整数：a）{ integer.toString（）; } ...プログラミング 2025-03-11に投稿されました
-
交換指令を使用して、GO modのモジュールパスの不一致を解決する方法は？go mod のモジュールパスの不一致を克服するgo modを利用する場合、輸入パッケージと実際の輸入パスの間のパスミスマッチとのパスミスマッチで、第三者パッケージが別のパッケージをインポートする紛争に遭遇する可能性があります。エコーされたメッセージで示されているように、これはGo M...プログラミング 2025-03-11に投稿されました
-
JavaScriptオブジェクトにキーを動的に設定する方法は？JavaScriptオブジェクト変数の動的キーを作成する方法 この構文jsObj['key' i] = 'example' 1; はjavascriptで、アレイは特殊なタイプのオブジェクトです。この特別な動作は標準のオブジェクトによって模倣されていませんが、四角いブラケット演算子は...プログラミング 2025-03-11に投稿されました
-
匿名のJavaScriptイベントハンドラーをきれいに削除する方法は？匿名イベントリスナーを削除する]イベントリスナーを追加する要素を追加すると、柔軟性とシンプルさを提供しますが、要素自体を置き換えることなく挑戦をもたらすことができます。 element？ element.addeventlistener（event、function（）{/はここで動作し...プログラミング 2025-03-11に投稿されました
-
java.net.urlconnectionとmultipart/form-dataエンコードを使用して追加のパラメーターを使用してファイルをアップロードする方法は？http requests を使用してファイルをhttpサーバーにアップロードしながら、追加のパラメーター、java.net.urlconnection、およびmultipart/dataエンコーディングを送信します。プロセスの内訳は次のとおりです。エンコーディングには、要求本体を複数...プログラミング 2025-03-11に投稿されました
-
PHPを使用してXMLファイルから属性値を効率的に取得するにはどうすればよいですか？XMLファイルから属性値をPHP の取得します。提供されている例のような属性を含むXMLファイルを使用する場合： $xml = simplexml_load_file($file); foreach ($xml->Var[0]->attributes() as $att...プログラミング 2025-03-11に投稿されました
-
Google APIから最新のjQueryライブラリを取得する方法は？Google Apis から最新のjQueryライブラリを取得します。最新バージョンを取得するために、以前は特定のバージョン番号を使用する代替手段がありました。これは、次の構文を使用するものでした。 /latest/jquery.js .jquery.com/jQuery-latest...プログラミング 2025-03-11に投稿されました
-
ポイントインポリゴン検出により効率的な方法：Ray TracingまたはMatplotlib \ 's path.contains_points？Pythonの効率的なポイントインポリゴン検出 ポリゴン内にあるかどうかを決定することは、計算ジオメトリの頻繁なタスクです。このタスクの効率的な方法を見つけることは、多数のポイントを評価する場合に有利です。ここでは、一般的に使用される2つの方法を調査して比較します：Ray TracingとM...プログラミング 2025-03-11に投稿されました
-
Java文字列に複数のサブストリングを効率的に交換するにはどうすればよいですか？java で複数のサブストリングを弦の複数のサブストリングを置き換えると、文字列内の複数のサブストリングを置き換える必要性に直面すると、弦楽列の方法を繰り返し担当するブルートのアプローチに頼ることに魅力的です。ただし、これは大きな文字列や多数の文字列を使用する場合は非効率的です。正規表...プログラミング 2025-03-11に投稿されました
-
さまざまな数の列を持つデータベーステーブルを結合するにはどうすればよいですか？異なる列とのテーブルを組み合わせた ] は、データベーステーブルを異なる列とマージしようとする場合に課題に遭遇する可能性があります。簡単な方法は、列が少ないテーブルに欠落している列にnull値を追加することです。 たとえば、表Aの2つの表Aと表Bを検討してください。表Aには、表Bよりも多く...プログラミング 2025-03-11に投稿されました
-
Firefoxバックボタンを使用すると、JavaScriptの実行が停止するのはなぜですか？navigational Historyの問題：JavaScriptは、Firefoxバックボタンを使用した後に実行を停止します ユーザーは、JavaScriptスクリプトが以前の訪問ページを介して回復したときに実行されない問題に遭遇する可能性があります。この問題は、ChromeやInt...プログラミング 2025-03-11に投稿されました
中国語を勉強する
- 1 「歩く」は中国語で何と言いますか？ 走路 中国語の発音、走路 中国語学習
- 2 「飛行機に乗る」は中国語で何と言いますか？ 坐飞机 中国語の発音、坐飞机 中国語学習
- 3 「電車に乗る」は中国語で何と言いますか？ 坐火车 中国語の発音、坐火车 中国語学習
- 4 「バスに乗る」は中国語で何と言いますか？ 坐车 中国語の発音、坐车 中国語学習
- 5 中国語でドライブは何と言うでしょう？ 开车 中国語の発音、开车 中国語学習
- 6 水泳は中国語で何と言うでしょう？ 游泳 中国語の発音、游泳 中国語学習
- 7 中国語で自転車に乗るってなんて言うの？ 骑自行车 中国語の発音、骑自行车 中国語学習
- 8 中国語で挨拶はなんて言うの？ 你好中国語の発音、你好中国語学習
- 9 中国語でありがとうってなんて言うの？ 谢谢中国語の発音、谢谢中国語学習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
免責事項: 提供されるすべてのリソースの一部はインターネットからのものです。お客様の著作権またはその他の権利および利益の侵害がある場合は、詳細な理由を説明し、著作権または権利および利益の証拠を提出して、電子メール [email protected] に送信してください。 できるだけ早く対応させていただきます。
Copyright© 2022 湘ICP备2022001581号-3