Componentization

Hello everyone, I am a code husky, a student of network engineering in the Software College, because I am a "dog", and I can eat meat for thousands of miles. I want to share what I learned during university and make progress with everyone. However, due to the limited level, there will inevitably be some mistakes in the blog. If there are any omissions, please let me know! For the time being, only update on the csdn platform, the blog homepage: https://blog.csdn.net/qq_42027681 .

未经本人允许，禁止转载

Insert picture description here

In this article, let’s talk about the idea of componentization. It’s
like our clothes. We can’t wear one set at once (underwear, panties, socks, cotton pants, jackets, etc.). We can’t sew them together and wear them together. Now
that you have made good-looking clothes, you can show it to others to make clothes for reference. The clothes can also be dyed and changed in size.
The webpage we used to practice before is to make multiple clothes and sew them together. Now let’s take them apart. Make separately, wear what you want to wear, how you like to match and how to match

<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>

Insert picture description here
Everyone will be very confused, why this thing is like this
From the network (picture from the Internet)
Don't worry about making clothes

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

This is
Insert picture description here
the index.html file under my directory structure my-button

<div style="width: 150px;height: 50px;line-height: 50px;background-color: teal;color: white;text-align: center;position: absolute;left: 0;top: 0;">点击</div>

index.html file under my-menu

<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>

Via the entry page

<object data="文件所在路径" width="宽" height="高"></object>

The width and height control introduced here is the object width and height

Focus

The idea of componentization can develop our own component library to facilitate our development, or use someone else’s component library for development. When an element of the same configuration is used multiple times, it must be componentized, reducing code clutter and looking simple

You can take a look at vant (mobile terminal and small program) elementui and other good-looking component libraries

vant entrance: vant manual
elementui entrance: elementui manual

Will be launched later

Front end: js entry vue entry vue development applet, etc.
Back end: java entry springboot entry, etc.
Server: mysql entry server simple instructions cloud server to run the project
python: recommended not to warm up the fire, be sure to see
the use of some plug-ins, etc.

The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our qq group to communicate together: 974178910
Insert picture description here

If you have any questions, you can leave a message below, I will reply if you see it

First acquaintance with HTML (5)---the idea of componentization

Componentization

Focus

Guess you like