Another time:
編寫您的第一個 Web 元件（學習 Modulo.js - 第 f 部分
發佈於2024-11-08
瀏覽：447
？歡迎所有新訂閱者和回歸的組件編碼者！我即將開始一個新的 10 部分教程系列。雖然我的其他教程使用Modulo.js 構建特定的、有趣的小應用程序，例如口袋妖怪舞會、復古擠壓文本編輯器或視頻遊戲畫廊，但本教程系列將建立在基本原則上，從第一個方面開始：什麼是Web 元件嗎？
HTML 與 CSS 之後的下一步
您是否剛學習了 HTML 和 CSS 的基礎知識，並對下一步感到好奇，想要建立更大、更完整的 Web 應用程式？或者，您已經是 Web 開發人員或 JavaScript 專業人士，並且只想建立快速、輕巧的 Web 應用程序，而無需過多的臃腫、工具或過多的依賴項？
如果是這樣，Web Components 就適合您！它們允許您建立可重複使用的程式碼部分。透過學習本教學課程，您將學習如何修復重複的、難以維護的 HTML 和 CSS。它也只使用最少的工具和函式庫，這意味著您不需要 Node.js、NPM 或大量的 node_modules。它還可以讓您磨練現代前端Web 開發的技能：在本系列的後續教程中，您將學習slots、shadowDOM、props 等概念、模板化、狀態管理等等！這些概念可以轉移到使用其他流行框架，而 Modulo 簡單的聲明性方法可能是一種更有吸引力的方式來學習核心概念，而無需陷入複雜的設定。
模數框架簡介
什麼是 Modulo？ Modulo 是一個用 JavaScript 編寫的免費軟體/開源、小而強大的 Web 框架。它沒有依賴項，並使用 HTML 語法，因此可以在頁面加載時自行設置，無需 Node.js 或編譯。您可以在純 HTML「靜態網站」（例如，當您在目錄中組裝 HTML、CSS 和其他靜態資源以在靜態 Web 主機上啟動時）或任何其他現有 Web 應用程式中使用它。本教學是關於使用 Modulo 作為建立 Web 元件的工具。
第 1 部分介紹
在第 1 部分中，我們將學習如何建立一個簡單的「Hello World」元件。在以後的部分中，我們將學習如何添加樣式、道具、狀態、響應式表單、插槽、API 等等，但現在，我們將從基礎知識開始：超越基本的HTML 和透過使用Modulo.
建立和重複使用Web 元件來實作CSS第 1 步：包含模數
在使用 Modulo 之前，我們必須包含該框架。整個框架包含在「Modulo.js」中，該檔案包含 2000 行 JavaScript。 這意味著啟動 Modulo 專案實際上不需要任何相依性超出您的瀏覽器和編輯器。 因此，只需開啟一個空白 HTML 檔案並開始使用以下非常簡單的起始程式碼：
第 2 步：定義您的第一個元件
現在我們已經包含了它，我們可以開始編寫模定義並一般使用該框架。我們透過建立 Modulo
Hello Modulo World!
這個「模板」因此成為我們元件的「模板」：每次我們的元件出現在頁面上時，它都會在其中呈現給定的模板。
第 3 步：使用您的第一個組件
定義後，您可以透過引用其名稱來使用元件，就像它是純 HTML 標籤一樣：
這將導致螢幕上顯示以下內容：
你好模世界！
請注意，一旦註冊，元件就可以到達普通 HTML 標籤可以到達的任何地方，並且也可以以相同的方式使用 CSS 進行樣式設定。換句話說，建立元件就像建立一個全新類型的 HTML 標籤，可以在任何地方使用，就像原始的
版本聲明
本文轉載於：https://dev.to/michaelpb/writing-your-first-web-component-learn-modulojs-part-1-of-10-4okh?1如有侵犯，請聯絡[email protected]刪除
最新教學
更多>
-
如何在JavaScript對像中動態設置鍵？在嘗試為JavaScript對象創建動態鍵時，如何使用此Syntax jsObj['key' i] = 'example' 1;不工作。正確的方法採用方括號： jsobj ['key''i] ='example'1; 在JavaScript中，數組是一...程式設計 發佈於2025-03-11 -
如何干淨地刪除匿名JavaScript事件處理程序？刪除匿名事件偵聽器將匿名事件偵聽器添加到元素中會提供靈活性和簡單性，但是當要刪除它們時，可以構成挑戰，而無需替換元素本身就可以替換一個問題。 element？ element.addeventlistener（event，function（）{/在這里工作/}，false）; 要解決此問題，請考...程式設計 發佈於2025-03-11
-
如何使用替換指令在GO MOD中解析模塊路徑差異？在使用GO MOD時，在GO MOD 中克服模塊路徑差異時，可能會遇到衝突，其中3個Party Package將另一個PAXPANCE帶有導入式套件之間的另一個軟件包，並在導入式套件之間導入另一個軟件包。如迴聲消息所證明的那樣： go.etcd.io/bbolt [&&&&&&&&&&&&&&&&...程式設計 發佈於2025-03-11
-
如何使用Java.net.urlConnection和Multipart/form-data編碼使用其他參數上傳文件？使用http request 上傳文件上傳到http server，同時也提交其他參數，java.net.net.urlconnection and Multipart/form-data Encoding是普遍的。 Here's a breakdown of the process:Mu...程式設計 發佈於2025-03-11
-
如何使用PHP從XML文件中有效地檢索屬性值？從php $xml = simplexml_load_file($file); foreach ($xml->Var[0]->attributes() as $attributeName => $attributeValue) { echo $attributeName,...程式設計 發佈於2025-03-11
-
-
如何使用組在MySQL中旋轉數據？在關係數據庫中使用mySQL組使用mySQL組進行查詢結果，在關係數據庫中使用MySQL組，轉移數據的數據是指重新排列的行和列的重排以增強數據可視化。在這裡，我們面對一個共同的挑戰：使用組的組將數據從基於行的基於列的轉換為基於列。 Let's consider the following ...程式設計 發佈於2025-03-11
-
Java是否允許多種返回類型：仔細研究通用方法？在Java中的多個返回類型：一種誤解類型：在Java編程中揭示，在Java編程中，Peculiar方法簽名可能會出現，可能會出現，使開發人員陷入困境，使開發人員陷入困境。 getResult（string s）; ，其中foo是自定義類。該方法聲明似乎擁有兩種返回類型：列表和E。但這確實是如此嗎...程式設計 發佈於2025-03-11
-
如何從Google API中檢索最新的jQuery庫？從Google APIS 問題中提供的jQuery URL是版本1.2.6。對於檢索最新版本，以前有一種使用特定版本編號的替代方法，它是使用以下語法：獲取最新版本：未壓縮）While these legacy URLs still remain in use, it is recommended ...程式設計 發佈於2025-03-11
-
為什麼使用固定定位時，為什麼具有100％網格板柱的網格超越身體？網格超過身體，用100％grid-template-columns 為什麼在grid-template-colms中具有100％的顯示器，當位置設置為設置的位置時，grid-template-colly修復了？ 問題： 考慮以下CSS和html： class =“ snippet-code”> ...程式設計 發佈於2025-03-11
-
為什麼PYTZ最初顯示出意外的時區偏移？與pytz 最初從pytz獲得特定的偏移。例如，亞洲/hong_kong最初顯示一個七個小時37分鐘的偏移： 差異源利用本地化將時區分配給日期，使用了適當的時區名稱和偏移量。但是，直接使用DateTime構造器分配時區不允許進行正確的調整。 example pytz.timezone（&#...程式設計 發佈於2025-03-11
-
如何使用Regex在PHP中有效地提取括號內的文本php：在括號內提取文本在處理括號內的文本時，找到最有效的解決方案是必不可少的。一種方法是利用PHP的字符串操作函數，如下所示： 作為替代 $ text ='忽略除此之外的一切（text）'; preg_match（'＃（（。 &&& [Regex使用模式來搜索特...程式設計 發佈於2025-03-11
-
為什麼我會收到MySQL錯誤＃1089：錯誤的前綴密鑰？mySQL錯誤＃1089：錯誤的前綴鍵錯誤descript [＃1089-不正確的前綴鍵在嘗試在表中創建一個prefix鍵時會出現。前綴鍵旨在索引字符串列的特定前綴長度長度，可以更快地搜索這些前綴。 了解prefix keys `這將在整個Movie_ID列上創建標準主鍵。主密鑰對於唯一識...程式設計 發佈於2025-03-11
-
哪種方法更有效地用於點 - 填點檢測：射線跟踪或matplotlib \的路徑contains_points？在Python Matplotlib's path.contains_points FunctionMatplotlib's path.contains_points function employs a path object to represent the polygon.它...程式設計 發佈於2025-03-11
-
PHP陣列鍵值異常：了解07和08的好奇情況PHP數組鍵值問題，使用07&08 在給定數月的數組中，鍵值07和08呈現令人困惑的行為時，就會出現一個不尋常的問題。運行print_r（$月份）返回意外結果：鍵“ 07”丟失，而鍵“ 08”分配給了9月的值。 此問題源於PHP對領先零的解釋。當一個數字帶有0（例如07或08）的前綴時，PHP...程式設計 發佈於2025-03-11
學習中文
- 1 走路用中文怎麼說？ 走路中文發音，走路中文學習
- 2 坐飛機用中文怎麼說？ 坐飞机中文發音，坐飞机中文學習
- 3 坐火車用中文怎麼說？ 坐火车中文發音，坐火车中文學習
- 4 坐車用中文怎麼說？ 坐车中文發音，坐车中文學習
- 5 開車用中文怎麼說？ 开车中文發音，开车中文學習
- 6 游泳用中文怎麼說？ 游泳中文發音，游泳中文學習
- 7 騎自行車用中文怎麼說？ 骑自行车中文發音，骑自行车中文學習
- 8 你好用中文怎麼說？ 你好中文發音，你好中文學習
- 9 謝謝用中文怎麼說？ 谢谢中文發音，谢谢中文學習
- 10 How to say goodbye in Chinese? 再见Chinese pronunciation, 再见Chinese learning
