- 博客(23)
- 收藏
- 关注
RSS订阅原创 有关Flex布局
justify-content -- 主轴上对齐方式 -- flex-start, center , space-between。· Flex容器（父元素）：设置display:flex / display: inline-flex后，内部子元素就成为弹性盒· 子。flex-grow -- 放大比例（占用剩余空间） -- flex-grow:1;flex-basis -- 初始大小 -- flex-basis:100px;flex-shrink -- 缩小比例 -- flex-shrink:1;
2025-08-18 10:00:00
188
原创 有关Date对象
Date内部存储的是一个时间戳（1970年1月1日 00：00：00UTC起的毫秒数），无论在哪个时区，Date存储的这个时间戳是相同的，显示时根据时区调整。· 原理：Date拿到当前时间戳（utc毫秒数），JS根据系统时区把这个时间戳转换为本地时间，getTimezoneOffset( )用utc时间-本地时间得到分钟差值。语法：data.toISOString( ) ，返回格式：YYYY-MM-DDTHH:mm:.ssZ 其中T是日期与时间的分隔符，Z是utc时间。· 转换为utc时间。
2025-08-15 10:00:00
183
原创 SEO（Search Engine Optimization）搜索引擎优化
SEO是通过一系列方法和技巧，让我们的网站或者网页在搜索引擎（如百度，谷歌）里的自然搜索结果中排名更靠前，从而获得更多的访问量。总之，做SEO的原因就是，大部分用户通过搜索引擎找到我们的网站，SEO可以帮助我们获得更多的流量，提升曝光和业务机会。· 关键词优化：将用户常搜的词挑选出来，合理的放在网页标题、内容，描述等位置。· 内容质量：提供有价值、原创的以及其他的相关内容，满足用户需求。· 网站结构：让网站结构更清晰，方便搜索引擎抓取和索引。· 外部链接：从其他网站获得高质量的链接，提高权威度。
2025-08-14 10:00:00
230
原创 ElementPlus--＜el-dropdown＞
el-dropdown>包裹触发器和菜单内容，一般配合<el-button>或自定义元素作为触发按钮，通过#dropdown插槽插入菜单项。· placement - string - 下拉菜单设置，如“bottom-start”、“bottom-end”· hide-on-click - boolean - 点击菜单项后是否自动关闭下拉，默认值是true。· @command - function - 菜单项点击时触发（使用command情况下）· disabled - boolean - 是否禁用。
2025-08-13 11:30:00
233
原创 ElementPlus -- ＜el-card＞
-使用时一定要动态绑定，如果没有动态绑定，会把后边的值识别成普通字符串，样式不生效。header属性/插槽设置标题---常配合<el-row>和<el-col>使用。· shadow = " hover" -- 当鼠标悬浮时显示阴影（最常用）属性body-style -- 控制内边距样式、背景色、字体、边框等。· shadow = "always" -- 始终显示阴影。· shadow = " never" -- 从不显示阴影。属性shadow - 控制卡片的阴影效果。· 搭配布局组件使用。
2025-08-11 11:30:00
390
原创 Element Plus -- ＜el-popconfirm＞
如果只写<el-popconfirm>本体，而没有加<template #reference>是不会显示按钮的，也不会触发确认框。<el-popconfirm>气泡确认框，在点击某个操作时，弹出一个提示。通常配合一个按钮<el-button>使用。·<template #reference>里面放触发弹框的内容，通常为按钮。用户点击按钮，才会弹出这个确认框。· @confirm=“...” 用户点击“确定”后触发的事件。· width=“270” 弹框宽度，单位px，可选。· title：文字提示。
2025-08-10 10:00:00
233
原创 ElementPlus--＜el-space＞
el-space>--布局组件，是一个间距容器，用来包裹一组元素，让他们自动有统一的间距。·通过wrap属性让子元素在空间不足时自动换行，相当于flex-wrap:wrap;上面的例子中，按钮1与按钮2之间自动有间距，如果屏幕太窄会自动换到下一行。· direction=“vertical” -- 垂直排列。· alignment=“center” -- 对齐方式。· ：size=“20” -- 设置间距大小。
2025-08-09 10:00:00
266
原创 Element-Plus--＜el-row＞
实际上gutter会把“24px”分成左右两边的12px，填充在每个<el-col>上。<el-row>行布局容器，通常搭配<el-col>使用。·gutter属性表示列间距，单位px。
2025-08-08 17:34:29
275
原创 TS--{...}[ ] & [{...}]
JS没有类型系统，没有元组，没有类型检查，不关心数组中是否为一个固定的对象/多个对象。——表示一组对象组成的数组，任意长度的对象数组。也可以表示一组可以是空数组的对象，可以赋值。——表示只有一个对象的数组。也可以表示固定长度为1的数组（严格限制），不可以赋值。
2025-08-07 07:00:00
157
原创 watch&onMounted
onMounted：执行某些必须在组件加载完成之后才能执行的逻辑（如：获取数据接口、操作真实DOM元素、初始化外部库）。·watch：监听数据变化，在某个数据发生变化时，执行某段逻辑（如：发请求、校验、更新其他值）。·表单某个字段变化后，联动校验（用户输入手机号后立即校验格式）·配合ref做数据同步（两个数据不同步时watch手动更新）·输入框防抖搜索（输入关键字变化时调用搜索接口-带延迟）·监听路由参数变化（路由id变化时重新加载数据）（组件加载完就执行一次初始化）（计算属性，a计算出b）
2025-08-06 07:00:00
147
原创 API--index.ts & type.ts
将type.ts拆分出来可以让IDE根据类型，文件自动补全字段、校验类型更加清晰。·业务组件调用时->只要import对应接口即可。·该请求路径或逻辑->只动index.ts。专门用于定义请求参数类型、返回值等结构体。·改字段类型->只动type.ts。专门负责封装接口，请求逻辑。·提高了接口数据的复用性。·防止循环依赖和逻辑污染。
2025-08-05 11:49:25
210
原创 5、ref和reactive
ref也可以用来定义对象/数组类型数据，它内部会自动通过reactive转为proxy对象。定义的数据要使用.value进行操作,但读取数据时模板中直接读取不需要.value。
2025-05-16 13:56:14
188
原创 4、vue3响应式原理
window.Reflect：反射对象有返回值，通过反射对象可以更友好一点，少些很多try-catch。（1）通过Proxy（代理）：拦截对象中任意属性的变化（包括：属性值的读写、添加、删除等）（2）通过Reflect（反射）：对被代理对象的属性进行操作。window.Proxy：内置的构造函数，可以直接使用。
2025-04-08 21:27:57
162
原创 vue2中响应式原理
1.对象类型： 通过Object.defineProperty()对属性的读取、修改进行拦截（数据劫持）2.数组类型： 通过重写更新数组的一系列方法来实现拦截（对数组的变更方法进行了包裹）（2）直接通过下标修改数组，界面不会自动更新。（1）新增属性、删除属性，界面不会更新。解决方法：给数据追加/移除一个响应式属性。--数据更改但vue2未监测到。
2025-04-06 21:34:24
143
原创 3、vue3中常用Composition API
-组件中所用到的数据、方法等均要配置在setup中。setup两种返回值（1）返回一个对象，对象中的属性，方法，在模板中均可以直接使用（2）返回一个函数，可以自定义渲染内容vue2中的配置（如data，methods，computed...）可以访问到setup属性、方法但setup不能访问vue2的配置，如果vue2中函数与setup中的有重名，setup优先。
2025-04-06 21:23:12
285
原创 6-TypeScript的数组类型
let arr:number[ ] = [1,2,3,4] //代表定义了一个数字类型的数组let abc:boolean[ ] = [true,fales] //代表定义了一个布尔类型的数组Arraylet arr:Array<boolean> = [true,false] //以布尔类型为例age?: number--此处以二维数组为例//普通定义方式//泛型定义方式//直接定义//使用元组定义。
2025-04-03 16:45:00
251
原创 5-TypeScript接口对象类型
interface Aa { //名字的首字母要大写let a:Aa { //与上面的接口中的属性要完全相同，不能多也不能少1.两个名字相同的接口会自动重合let b:A {age : 18sex : "男"2.interface可以用索引签名定义任意key3.?--可选值name?: string //这里设为可选值let a:Ab {name : "xxx" //这里的name属性可有可无4.修饰符readonly，表示只读，被修饰的属性值将无法修改，常用于函数和后台返回的id。
2025-04-03 12:04:34
160
原创 4-TypeScript的Object、object和{ }的理解
ts中，Object表示包含了所有类型（数组、对象都可以），所有的原始类型以及对象都这个Object。
2025-04-02 21:59:34
235
原创 3-TypeScript的any和unknown
any和unknown是ts中的（top type）数据类型由等级从高到低(上一级包含下一级所有类型)：2. object5. 1(数字) , 'abcd'(string) , false(布尔类型)6. never。
2025-04-02 21:47:26
453
原创 1-TypeScript基本操作
TypeScript是Javascript的超集--JS的基础类型都包含在TS中起步安装： npm install typescript -g运行： tsc 文件名。
2025-04-02 21:11:56
187
原创 2、vue3的创建
vue/cli 版本要在4.5.0以上·查看版本：vue --version·安装或升级脚手架命令： npm install -g @vue/cli·创建vue3项目：vue create 项目名称例如： vue create vue_test·启动项目：切换到项目文件夹：cd vue_test运行：npm run serve。
2025-04-02 16:00:57
167
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人