- 博客(421)
- 问答 (3)
- 收藏
- 关注
RSS订阅原创 从零开始教你如何完成一个基于Vite+Vue3+TS的后台管理系统
基于Vue3+Vite+TS的后台管理项目，从零开始手把手教你如何实现
2023-02-06 18:27:44
2927
11
原创 react实现评论列表案例
在学习了 react 的 JSX 语法以及 类组件 后，实现的一个 评论列表案例。主要包括：发表评论、删除评论以及清空评论
2022-06-04 16:00:43
737
原创 仿百度自动补全案例
在日常生活中我们通过百度搜索相关内容时，会发现如下这样一个很有趣的现象：那么对于这一部分具体是怎么实现的呢？那么接下来我们就来实现一个和它差不多的效果把这里主要就用到了表单事件里的 获焦事件(onfocus)、失焦事件(onblur)、以及文本框内容发生改变时的事件(oninput )第一步我们要做的就是先有一个输入框，并且还需要有一个 ul 列表框用来盛放当我们在输入框里输入值时的一些智能提示内容，只不过在最开始的时候我们需要将 ul 列表框隐藏起来，大致如下所示：.
2022-05-18 11:14:32
195
原创 网格布局--grid
CSS网格是一个用于web二维的布局系统。利用网格，可以把内容按照行与列的格式进行排版。另外，网格还能非常轻松地实现一些复杂的布局。
2022-04-17 12:44:43
1082
原创 flex布局仿知乎导航
这里主要就是综合利用flex布局来进行开发的这里主要分为了四个区域，分别是logo区域、导航区域、搜索区域、登录区域为了能够实现可以随着屏幕的缩放导航可以进行自动收缩，这里用到了 min-width以及max-width对于头部的整个区域我们采用flex布局，这样就可以让四个区域都在同一水平显示，并且设置子项垂直居中：.header-wrapper { margin: 0 auto; height: 52px; min-width: 10
2022-04-13 23:42:40
1093
原创 clip-path 实现文字聚光灯效果
效果图：clip-path 简介：概念：使用裁剪方式创建元素的可显示区域。区域内的部分显示，区域外的隐藏。语法：/* Keyword values */clip-path: none;/* <clip-source> values */clip-path: url(resources.svg#c1);/* <geometry-box> values */clip-path: margin-box;clip-path: border-b.
2022-04-05 11:28:53
396
原创 炫彩流光按钮
做这个的话主要就是利用了基础的html css以及css3的渐变背景以及关键帧动画基本结构如下： <a href="" class="btn">button</a>基本样式如下：* { margin: 0; padding: 0;}a { text-decoration: none; color: #fff;}body { height: 100vh; display: flex; /*
2022-04-05 10:54:58
549
原创 3D立体相册
这个主要就是利用 CSS3 的 transform 属性来做的这里先定义一个父级容器以及6个子元素作为6个面 <div class="container"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div cla...
2022-04-04 17:50:40
338
原创 DNA旋转特效
var()函数在开始这个案例之前先做一下铺垫吧算是用过 less 或者 sass 的人都知道，在这两个预编译里是可以定义变量、函数、混合等，css呢，在后面也推出了var()函数，官网的解释如下：具体语法如下：var( <custom-property-name> , <declaration-value> )第一个参数是要替换的自定义属性的名称（必须）第二个参数用作回退值。如果第一个参数引用的自定义属性无效，则该函数将使用第二个值（可选）..
2022-04-04 15:18:57
429
原创 气泡浮动背景特效
首先，定义一个最外层的容器，以及10个气泡标签，结构大致如下： <div class="container"> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div> <div class="bubble"></div&...
2022-04-04 14:28:32
1267
2
原创 仿小米下拉导航
对于这一部分大致分为三个区域：左侧的logo区域、导航区域、右侧的搜索区域左侧的 logo 区域就是两张图片左侧的导航区域主要用ul li实现，这里需要注意的是第一个li里放的是一张动图右侧的搜索区域就是一个input标签以及button按钮，还有就是模拟当鼠标点击到搜索框后会弹出一个搜索历史其基本机构如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-...
2022-04-03 23:42:55
899
原创 利用定位实现仿小米导航
通过分析不难发现该导航主要分为两部分：左侧导航、右侧导航这里主要就是利用 ul li来实现左侧导航左浮动、右侧导航右浮动导航里面的 li 左浮动再将二维码以及购物车提示框直接写在相应的li的下面，然后利用子绝父相的原理，通过定位来实现当鼠标移动到li上时，就显示出来，反之隐藏对于二维码这一部分我们给了一个明确的宽度和高度，当将二维码以及对应的说明文字都放入该框之后，我们将其高度改为0，这样也就相当于隐藏了，当鼠标移动到 “下载APP”对应的li上时再将其高度设为原来的高度，这...
2022-04-03 22:08:54
441
原创 垂直导航栏
垂直导航栏这一类导航栏在很多网站上都是很常见的，比如京东因此可以说是一个前端人员必须要会的吧在这里目前给出了两种方式去实现：第一种就是利用html+css实现，这里模仿的是小米官网的垂直导航、第二种方式就是利用html+css+js实现不管是第一种还是第二种主要都是利用定位来实现的先来看第一种吧先准备相关素材以及一些基础的css样式类，素材这里省略，基础的样式类如下：* { margin: 0; padding: 0;}ul,li { list-s
2022-04-02 23:29:16
5492
原创 赛比朋克效果按钮
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g...
2022-04-01 19:25:08
420
原创 充电水滴效果
对于这个的实现主要采用了 html css css3，进行设计的其大致布局结构如下：这里总共有五个div构成，最外层的容器、3个水滴、最底部的一个圆圈容器用于显示数据以及显示文本的span结构： <div class="container"> <!-- 三个水滴 --> <div class="droplet"></div> <div class="droplet">...
2022-04-01 10:54:24
387
原创 响应式卡片悬停效果
效果如下：首先要做的就是先考虑清楚布局效果，这里采用上下布局，上面是图片，下面则是图片的一些说明性文本考虑到复用性这里主要利用ul li 进行布局大致的布局如下： <ul> <li> <div class="container"> <div class="img"> <.
2022-03-31 13:43:09
1201
原创 vue--ssr
目录一、 什么是服务器端渲染？1.1 初始化项目1.2 服务端渲染小案例1.3 右键查看源代码二、什么是客户端渲染？2.1 初始化项目2.2 查看源代码三、客户端渲染vs服务端渲染3.1 运行架构对比3.2 开发模式对比四、vue框架中的服务端渲染4.1 初始化项目4.2 vue服务端渲染最小demo4.3 遗留问题五、理解同构理念六、Nuxt.js框架使用6.1. 使用nuxt.js创建一个ssr项目6.2 启动项目6.3 查看源
2022-01-26 12:47:36
9122
1
原创 vue--组件开发
目录一、button 组件开发1.1 整体目标1.2 确定组件API1.3 编写测试基础Button1.4 完成type配置1.5 完成size配置1.6 完成事件绑定1.7 总结二、Editor编辑器组件开发2.1 确定基础API2.2 编写测试基础Editor2.3 完成v-model双向绑定2.4 总结一、button 组件开发1.1 整体目标了解组件开发的整体流程 掌握组件事件和标签事件的区别 掌握在组件上使用v-...
2022-01-25 14:44:02
2737
原创 vue--原理
一、数据响应式1.1 响应式是什么一旦数据发生变化，我们可以立刻知道，并且做一些你想完成的事情，这些事情包括但不限于以下：发送一个网络请求 打印一段文字 操作一个dom ....1.2 如何实现数据响应式在Javascript里实现数据响应式一般有俩种方案，分别对应着vue2.x 和 vue3.x使用的方式，他们分别是： 对象属性拦截 (vue2.x) Object.defineProperty 对象整体代理 (vue3.x) Proxy 1.
2022-01-23 18:05:22
827
1
原创 软件测试入门
一、软件测试的概念与过程1.1 软件的概念与分类软件：是计算机系统中与硬件相互依存的一部分，包括程序、数据以及与其相关文档的完整集合程序是按事先设计的功能和性能要求执行的指令序列 数据是使程序能正常操作信息的数据结构 文档是与程序开发、维护和使用有关的图文材料1.2 软件的分类按重要性：系统软件 支持软件 应用软件按架构：单机版软件 分布式软件：C/S 架构、B/S 架构二、软件测试的原则与测试工程师的要求.
2022-01-18 09:52:45
1532
原创 软件测试的背景和前期准备
一、初识软件测试软件 = 程序（Java、PHP...） + 数据（使用文件或者数据库来存储数据） + 文档（安装说明、帮助文档...）1.1 测试软件的类型单机版：即只需一台电脑该软件就可以正常使用，因此测试的时候可能只需要一台电脑进行测试即可C/S：客户端服务器软件，至少要有两台及以上的计算机参与才能使用该软件。例如使用的QQ，至少得有一个计算机做服务器，里面可能装数据库或者是其他的一些、如果你想使用该软件那么你的计算机上也需要安装QQ，然后用你的计算机去连接同一个公司的计算机.
2022-01-12 22:37:35
1189
原创 vue3.0--初识vue3.0、组合式API、EventBus、代码组织能力、Teleport、VueX中如何使用
一、初识vue3.0现在主流组件库都已经发布了支持vue3.0的版本，其他生态也在不断地完善中，这是趋势。element-plus(opens new window) 基于 Vue 3.0 的桌面端组件库 vant(opens new window) vant3.0版本，有赞前端团队开源移动端组件库 ant-design-vue(opens new window) Ant Design Vue 2.0版本，社区根据蚂蚁 ant design 开发1.1 vue3.0 的优点最火框...
2021-12-20 18:59:02
815
原创 vue：Element-ui--表单校验
目录一、实现表单基本结构1.1 创建项目1.2 安装Element二、表单校验的先决条件2.1 model属性 (表单数据对象)2.2 绑定model2.3 rules规则2.4 设置prop属性2.5 给input双向绑定字段属性三、表单校验规则3.1 基本使用规则3.2 自定义校验规则3.3 手动校验的实现四、Async 和 Await4.1 回调模式和promise的链式调用4.2 关于Promise你必须知道几件事4.3 异步编程的
2021-12-20 18:15:22
4854
原创 vue--实现Tabbar
最终实现的大致效果如下：这里一样采用组件封装的方式，大致如下：组件拆分:MyHeader.vue – 复用之前的（上一个案例 vue--实现购物车 时里面封装的 头部组件） MyTabBar.vue – 底部导航 MyTable.vue – 封装表格三个页面- MyGoodsList.vue – 商品页 - MyGoodsSearch.vue – 搜索页 - MyUserInfo.vue – 用户信息页需要安装的第三方包：npm install less ..
2021-12-16 16:02:15
3144
1
原创 vue--实现购物车案例
最终效果图：这里我们将头部区域、列表区域、以及列表里的增加和减少商品数量的区域、以及底部计算区域分别单独封装为一个组件，如下：大致实现步骤如下：1. 安装项目所需的第三方包通过 npm install [email protected] --save 安装 bootstrap通过 npm install less [email protected] --save 安装 lessmain.js – 引入bootstrap样式：import 'bootstra...
2021-12-13 22:03:47
8127
2
原创 vue--实现简易版的购物车
目录1.先搭好页面的基本布局：2.渲染表格里面的内容3.实现全选功能4.实现数量的加减功能5.实现点击删除功能6. 显示总价在这个案例里我们把表格里面的数据也就是 tr进行封装成一个组件，然后通过 v-for 循环进行重复利用大致步骤如下：1.先搭好页面的基本布局：将头部和尾部部分在 App.vue 里进行基本的搭建需要单独封装处理的 tr 封装成 MyTr.vue 组件，然后在 App.vue 里进行注册和引入，这里需要注意的是：DOM模板限...
2021-12-11 00:29:34
3345
2
原创 vue--实现todo案例
大致步骤如下：1.创建新工程 2.在 components 里分别创建 TodoList 的头部组件（TodoHeader.vue）、主体组件（TodoMain.vue）以及底部组件（TodoFooter.vue）3.在三个组件里分别完成其页面结构和样式，并在 App.vue 里分别引入三个组件并注册和使用，再引入需要的样式文件，最后启动项目效果如下：4.把待办任务, 展示到页面TodoMain.vue组件上并关联选中状态, 设置相关样式：App.vue – 准备数组...
2021-12-09 15:11:31
3347
1
原创 vue--实现学生信息管理案例
1.铺设页面, 准备初始的数据并最终完整页面结构设计和渲染到页面上<template> <div id="app"> <div> <span>姓名:</span> <input type="text" /> </div> <div> <span>年龄:</span> <input type="nu...
2021-12-08 16:21:16
6008
原创 vue--实现移动端导航栏效果
基本步骤：1.搭建页面的基本结构和利用 v-for 渲染对应的数据<template> <div class="wrap"> <div class="nav_left" id="navLeft"> <div class="nav_content"> <span v-for="(obj, index) in arr" :key="obj.first_id" @click="changeTab(ind...
2021-12-08 14:45:30
3694
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人