組件化思想
??大家好，我是代碼哈士奇，是一名軟體學院網路工程的學生，因為我是“狗”，狗走千里吃肉，想把大學期間學的東西和大家分享，和大家一起進步，但由于水平有限，博客中難免會有一些錯誤出現，有紕漏之處懇請各位大佬不吝賜教！暫時只在csdn這一個平臺進行更新，博客主頁：https://blog.csdn.net/qq_42027681，
未經本人允許，禁止轉載
本文我們來聊聊組件化思想
好比我們的衣服 我們總不能一下子穿一套(內衣，內褲，襪子，棉褲，外套等等，我們總不能縫在一起穿吧，這樣就只有這一套搭配了)
而且你做出來好看的衣服了，可以拿給別人去參考做衣服，衣服還可以染色改變大小啥的
我們之前練習的網頁都是一下做好多件衣服縫在一起穿，現在我們來拆開分別制作，想穿什么穿什么，愛怎么搭配怎么搭配
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<object data="./my-menu/index.html" width="500px" height="50px"></object>
<object data="./my-button/index.html"></object>
</body>
</html>
大家會很疑惑，這玩意怎么就這樣了
(圖片來自網路)
不要著急 做衣服去
由于還沒有將js本文主講思想所以沒有寫js檔案且css樣式寫在元素內 后面講js會再提 （大佬勿噴）
這是我的目錄結構
my-button下的index.html檔案
<div style="width: 150px;height: 50px;line-height: 50px;background-color: teal;color: white;text-align: center;position: absolute;left: 0;top: 0;">點擊</div>
my-menu下的index.html檔案
<div style="width: 500px;height: 50px;line-height: 50px;background-color: black;color: white;position: absolute;left: 0;top: 0;">
<li style="list-style: none;float: left;position: relative;left: 50px;">首頁</li>
<li style="list-style: none;float: left;position: relative;left: 150px;">介紹</li>
<li style="list-style: none;float: left;position: relative;left: 250px;">聯系</li>
</div>
通過在入口頁面
<object data="檔案所在路徑" width="寬" height="高"></object>
來引入 這里的寬高控制的是object寬高
重點
組件化思想能開發我們自己的組件庫方便我們開發，也可以拿別人的組件庫去開發，一個同樣配置的元素多次使用時就要組件化，減少代碼雜亂看著也簡潔
大家可以看看vant(移動端以及小程式) elementui等好看的組件庫
vant入口 :vant手冊
elementui入口 :elementui手冊
后續會推出
前端：js入門 vue入門 vue開發小程式 等
后端： java入門 springboot入門等
服務器：mysql入門 服務器簡單指令 云服務器運行專案
python：推薦不溫卜火 一定要看哦
一些插件的使用等
大學之道亦在自身，努力學習，熱血青春
如果對編程感興趣可以加入我們的qq群一起交流：974178910
有問題可以下方留言，看到了會回復哦
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/211684.html
標籤：python