初识HTML(五)---组件化思想

浅浅的花香味﹌ 2022-12-20 05:38 201阅读 0赞

# 组件化思想 #

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

本文我们来聊聊**组件化**思想  
好比我们的衣服 我们总不能一下子穿一套(内衣，内裤，袜子，棉裤，外套等等，我们总不能缝在一起穿吧，这样就只有这一套搭配了)  
而且你做出来好看的衣服了，可以拿给别人去参考做衣服，衣服还可以染色改变大小啥的  
我们之前练习的网页都是一下做好多件衣服缝在一起穿，现在我们来拆开分别制作，想穿什么穿什么，爱怎么搭配怎么搭配

![在这里插入图片描述][20201110192632641.png_pic_center]  
大家会很疑惑，这玩意怎么就这样了  
![来自网络][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center](图片来自网络)  
不要着急 做衣服去

> `由于还没有将js本文主讲思想所以没有写js文件且css样式写在元素内 后面讲js会再提 （大佬勿喷）`

这是我的目录结构  
![在这里插入图片描述][20201110192843521.png_pic_center]  
my-button下的index.html文件

my-menu下的index.html文件

通过在入口页面

来引入 这里的宽高控制的是object宽高

## 重点 ##

组件化思想能开发我们自己的组件库方便我们开发，也可以拿别人的组件库去开发，一个同样配置的元素多次使用时就要组件化，减少代码杂乱看着也简洁

> 大家可以看看vant(移动端以及小程序) elementui等好看的组件库

vant入口 :[vant手册][vant]  
elementui入口 :[elementui手册][elementui]

后续会推出

前端：js入门 vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 1] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 1]

有问题可以下方留言，看到了会回复哦

[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: /images/20221120/630e2ead57a2496daee4118cd45f2310.png
[20201110192632641.png_pic_center]: /images/20221120/4f64d9e6fb69473295ab66df130a62a9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201110192708387.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70#pic_center
[20201110192843521.png_pic_center]: https://img-blog.csdnimg.cn/20201110192843521.png#pic_center
[vant]: https://vant-contrib.gitee.io/vant/#/zh-CN/
[elementui]: https://element.eleme.cn/#/zh-CN/component/installation
[Link 1]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/20201110194324156.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70#pic_center