- 博客(11)
- 收藏
- 关注
RSS订阅原创 css总结
中文名称：块级格式化上下文，指的是当前网页是按照块元素的特性进行排列的格式。，意思是让当前环境和后续元素继续按照块元素的格式进行排列。定位相对的位置，参考物是设置过定位的离自己最近的祖宗标签。上面盒子的下外边距和下面盒子的上外边距会合并。定位就是让元素可以排列在随意的一个位置，通常使用。有些元素需要微调位置的时候，使用相对定位；使用定位的时候通常遵循父相子绝；实现吸顶效果的时候使用粘性定位；将子的外边距换成父的内填充。给父设置定位，给子设置定位。使用弹性布局，父标签设置。在浮动元素的父标签，添加。
2024-04-19 16:23:58
334
原创 Vite的使用和学习指南
1.1 : 它是一个基于ES modules的前端构建工具,它的主要特点有1.2 : 快速的冷启动:Vite采用了基于浏览器原生ES模块的开发模式,可以在开发时快速启动应用,减少了冷启动时间1.3 : 按需编译:Vite可以根据需要动态地编译模块,而不是像传统的打包工具一样将所有模块都打包到一个文件中1.4 : 热更新:Vite支持热更新,可以在开发实时更新修改后的代码,提升开发效率1.5 : 插件化:Vite支持插件化,可以通过插件扩展Vite的功能。
2024-03-20 19:28:13
838
原创 Pinia的使用指南
1: 我们在开发中需要根据模块划分状态,这样才方便我们统一管理不同模块下的状态,比如我们开发中会设计到用户模块,因此我们可以在src/stores/modules目录下新建一个user.ts文件用于用户状态管理,将 通过下列代码创建user Store。1: 首先以一个新的Vue3项目为例,您可以通过npm init vue 命令,初始化一个项目,安装时关于Pinia选项选择Yes即可。2: 在项目的src/stores目录下,新建一个index.ts文件作为Pinia的入口文件,并创建跟Store。
2024-03-19 19:13:23
301
原创 Vue的动态组件,以及缓存keep-alive的使用
本文我们将介绍Vue的动态组件,以及缓存keep-alive的使用,包括动态组件的使用方法,以及如何使用keep-alive实现组件的缓存效果。
2024-03-15 11:19:28
442
原创 div垂直居中的方法
在我们排版的过程当中,有许多样式要求我们把div设置成为垂直居中但有些小伙伴不知道怎么做,下面就跟着博主来实现如何让div垂直居中,可用一下几种方法注: 1.1 dispaly:table-cell,这是对类似文字元素起作用的,所以包含在span标签内1.2 对于文字居中h1,span,p等类似文字标签都可以这样设置居中注: 以上方法同样适用于img, 只需将child换成img就行,不在需要上面方法中的span标签注: 3.1 display:flex,将对象作为弹性伸缩盒显示。
2024-03-11 18:35:59
966
原创 TS封装axios
第一种方法比第二种更加全面，一般项目中多用第一种方式封装Axios 有需要的小伙伴可以自行保存。一. HttpRequest类封装 （在TS项目里面的utils/axios.ts）首先不管是哪一种方法，都要先下载 npm i axios -S。二 : 接口方法封装 (文件api/index.ts)本篇主要讲解TS中axios的两种封装和页面的使用。
2024-03-04 19:46:32
398
原创 重排与重绘
表现为重新生成布局，重新排列元素此时在Layout阶段,计算每一个元素在设备视口内的确切位置和大小,当一个元素位置发生变化时,其父元素及其后边的元素位置都可能发生变化,代价极高。绘制的过程,叫做重绘,表现为某些元素的外观被改变,此时在关键渲染路径中的Paint阶段,将渲染。在触发回流的时候,由于浏览器渲染页面是基于流式布局的,所以当触发回流时的DOM元素重新排列。当页面中某些元素的样式发生变化,但是不会影响其在文档流中的位置时,浏览器对元素进行重新。7.1 集中改变样式,不要一条一条地修改DOM的样式。
2024-03-01 10:00:00
572
原创 Vue3组件间常用的通讯方式
一 . 父组件 props和$emit使用props和$emit是Vue 3中最基本的组件间通信方式。一个组件可以通过props向它的子组件传递数据，子组件则可以通过$emit触发一个事件，并将数据传递给父组件。子组件二: $refs使用provide和inject可以在祖先组件中向子孙组件传递数据，而不需要显式地通过props和$emit传递。
2024-02-27 20:50:03
288
原创 css3的新特性和动画
transition-property 过渡属性 transition-duration 定义过渡效果花费的时间 transition-timing- function过渡效果的时间曲线 transition-delay 规定过度效果何时开始。5.4.skew()倾斜 根据X轴和Y轴位置给定参数，从当前元素位置倾斜 可负数。必选: h-shadow,水平阴影的位置 v-shadow垂直阴影的位置。必选: h-shadow,水平阴影的位置 v-shadow垂直阴影的位置。
2024-02-27 13:51:02
689
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人