- 博客(109)
- 资源 (29)
- 收藏
- 关注
RSS订阅
原创 Dom树 CSS树 渲染树(render树) 规则、原理
前端不可不学的浏览器渲染机制，阿里年年问，去一个栽一个。听说百度也在考这个，你还不准备学吗？首先你要了解浏览器渲染的顺序： 1.构建dom 树 2.构建css 树 3.构建渲染树 4.节点布局 5.页面渲染什么是dom 树？ 浏览器将HTML解析成树形的数据结构，简称DOM。 DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树
2020-10-11 18:39:54
18122
51
原创 AI特训一：为什么要学习AI
AI（人工智能）是指计算机系统经过学习和推理能够模拟人类智能行为的一种技术。AI利用机器学习、深度学习、自然语言处理等技术，能够分析大量的数据、识别模式、做出决策和预测。
2024-01-30 17:31:50
974
原创 带【科技感】的Echarts 图表
echarts脚本在线地址 https://cdn.jsdelivr.net/npm/[email protected]/dist/echarts.min.js引入echarts 脚本后粘贴代码vue2 代码：<template> <div> <div ref="col-2-row-2" class="col-2-row-2"></div> </div></template><script>expo
2024-01-25 14:13:00
1206
3
原创 Git 入门精讲
Git以命令行工具的形式提供，同时也有许多可视化工具和集成开发环境（IDE）的插件支持，使得使用Git更加方便。“我仍认为我们接受高等教育的目的是帮助我们的家乡摆脱贫困，而不是摆脱我们贫困的家乡。生如蝼蚁当有鸿鹄之志，为天地立心，为生民立命，为往圣继绝学，为万世开太平。Git是一个开源的版本控制系统，它是由Linux的创始人Linus Torvalds在2005年创建的。Git是一种分布式版本控制系统，每个开发者都可以在本地维护完整的代码库，可以离线工作并提交代码。
2024-01-24 15:57:31
1338
3
原创 Event loop 事件循环
同时，JavaScript中还有其他类型的事件和任务，如IO操作、UI渲染等，也会加入到任务队列中，并由事件循环执行。事件委托：事件委托是一种优化事件处理的方式，它将事件处理函数绑定在父元素上，通过事件冒泡的机制处理子元素的事件。首先会执行所有的微任务，然后执行一个宏任务，再执行所有的微任务，依次循环执行，直到事件队列中没有任务为止。以上示例仅仅是展示了事件循环的基本机制，实际的应用中可能会有更多复杂的异步操作和事件处理，所以事件循环的顺序和执行时间可能会有所不同。
2024-01-23 17:13:17
881
原创 CSS 图片遮罩学习小节
概念：-webkit-mask-image是一项用于制作镂空图形和图形遮罩效果的CSS样式属性。做这个效果时考虑了 keyframes、transform等方式重新绘制遮罩层，结果都失败了。-webkit-mask-image 的起源很早，但兼容性不好，因此用途并不广泛。-webkit-mask-image 的值既可以是渐变色也可以是图片地址。·这个动画的关键属性是：-webkit-mask-size。·它在原遮罩层的基础上进行缩放时，图案会同步改变。/* 设置遮罩 *//* 设置底色 */
2024-01-23 16:37:23
1123
1
原创 vue属性data的处理规则
当这些属性的值发生变化时，Vue会自动更新视图中对应的内容，从而实现数据与视图的双向绑定。这样，当我们在Vue实例中修改了某个属性的值时，Vue会自动检测到并更新相关的视图，从而实现了响应式更新的效果。5. 对于对象或数组类型的属性，在Vue 2.x中需要使用特殊的方法来更新其内容，比如。对象中的属性进行劫持，在属性被访问或修改时，Vue会通知订阅了对应属性的视图更新。在Vue 3.x中，可以直接使用原生操作符进行修改，Vue会自动进行响应式更新。另外，需要注意的是，在Vue 3.x中，可以使用。
2023-10-07 09:43:18
283
原创 vue打包的基层原理
Babel：Vue CLI 默认集成了 Babel，可以使我们在代码中使用最新的 JavaScript 语法和更好的开发体验，进一步了解 Babel 可以帮助我们完成自定义配置、优化打包结果等操作。ESLint：Vue CLI 默认集成了 ESLint，帮助我们在开发过程中遵循一致的代码风格和规范，进一步了解 ESLint 可以帮助我们更好的配置规则，提高代码质量。的原理是利用 Vue CLI 的构建工具，根据项目中配置的各种规则，将源代码转换成可在浏览器中运行的静态文件。
2023-09-07 15:01:06
690
原创 vue修饰符的用法
除了常见的修饰符，Vue还有一些比较高级的修饰符，可以让开发者更加灵活地控制指令的行为。以上是一些常见的指令和修饰符的用法示例，开发者可以根据自己的需求在Vue模板中使用合适的修饰符来达到更好的效果。这些高级修饰符可以让开发者更加灵活地控制指令的行为，但是在实际开发中，需要注意不要过度使用，以免增加代码复杂度。Vue修饰符能够帮助开发者更加灵活地控制Vue模板的行为，从而提高应用的可维护性和可重用性。Vue修饰符在一些常见的指令中使用，例如。Vue修饰符是指在Vue模板中用于改变指令行为的特殊后缀。
2023-09-05 17:26:26
619
原创 Vue插槽的高深用法
具体来说，我们可以通过在父组件中使用``标签来定义一个作用域插槽，然后在插槽内容中使用一个包裹在``标签中的属性来访问这个插槽。在Vue中，插槽是通过标签来实现的，它可以在子组件中定义多个插槽，父组件可以根据需要选择具体的插槽。通常，当我们使用插槽时，只能将数据从父组件传递到子组件，但是有时候我们想要在子组件中使用父组件的数据，这时候就可以使用作用域插槽。具名插槽（named slots）是Vue.js中的一种插槽，用于在子组件中定义具有特定名称的插槽，并在父组件中将内容插入到这些具名插槽中。
2023-09-01 09:27:54
174
原创 vue树状结构以及设计思路
设计思路：多级数组循环遍历，第一层样式加三角形折叠，第二层在文字前方加 —（横线），第三层加横线，第四层加点。给第二层第三层左侧加左边框，用translateY进行位移就形成了树状样式。
2023-08-16 09:50:26
242
原创 看繁华一世，三千浮生若水
序言：2020我经历了很多，有快乐有失落，更多的则是深深地遗憾。我的故事很长，不能尽书于纸上，可以概括为：剑指天，青丝绾，问心中明暗，岂曰善！自我介绍 程序员乔某，祖籍河南，老家在乡下，有一望无际的金色麦浪，和日出东方的唯美景象。从小爱玩，兴趣广泛，毕业后投身于互联网服务行业并工作至今，如今我依然热爱这个行业，既是工作也是爱好。大学时光 大学是我步入社会之前读的最后一本书，也是步入社会以后读的第一本书，我从没有像现在这样渴望在校读书，失去了我才懂得回味。 大一加入了“电子协会”并热衷于D
2022-10-25 20:39:44
493
2
原创 Vue 自定义轮播
vue 纯手撸自定义轮播图，附带组件设计思路。划分标题、轮播区、指示点三块，在轮播区使用 display: inline-block; 使子元素横向排列，使用动态样式的写法，判断column 的属性值，以此来实现横向或纵向排列。使用计时器控制变量 nowInd 变化，当nowInd 发生改变会影响轮播图上的判断条件，进而控制轮播运动，根据config.column 的值，判断是进行左右移动 还是上下移动，用transition 来动态控制过渡效果的有无。喜欢这篇文章的话可以看看置顶，谢谢
2022-10-24 20:49:36
2109
2
原创 JavaScript 在一个区间里求素数
1.首先这个数本身不是素数； 2.这个数可以分解为 a 和 b的乘积； 3.a 和 b 都是素数解题思路：
2022-10-13 21:45:00
1033
1
原创 Vue 动态换肤
规划几套样式，通过动态class 或 scss 混入 @include 等方式进行赋值，给最外层的父元素添加全局样式。涉及到跨页面操作，可以将class转化为JSON字符串存在storage 或vuex 里，或者封装进公用组件，把每个页面不同的内容以插槽的形式插入。其它应用场景如：天地图自定义覆盖物，轮播图自定义指示点。
2022-10-10 20:57:11
1539
3
原创 面试题--CSS动画的妙用
写一个程序，让三个按钮按不同速率向右移动，触碰到浏览器边缘时返回，持续这种效果uni-app项目，template模板，原理相同<template> <view> <!-- 写一个程序，让三个button按不同速率向右移动，触碰到浏览器边缘 时返回，持续这种效果--> <button class="btn red"></button> <button class="btn yellow"></b
2022-07-10 01:11:46
417
原创 css圣诞树 立体模型
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>圣诞树</title><meta name="viewport" content="width=device-width, initial-scale=1"><style> :root { --main-bg: #c2c2c2; --trunk-bg-1:..
2021-12-21 21:46:41
787
3
原创 uniapp手指划动事件
使用案例：<view class="text-area" @touchstart="start" @touchend="end"></view>data() { return { startData: { clientX: 0, clientY: 0 } }},methods:{ start(e){ this.startData.clientX=e.changedTouches[0].clientX;...
2021-06-30 16:59:15
2007
8
原创 我眼中的鸿蒙
智能终端操作系统 鸿蒙系统可以和安卓实现相互兼容，用户升级鸿蒙系统之后，之前手机上的数据也会被一并保存下来。HarmonyOS 鸿蒙，亦作“鸿濛 ”。中国神话传说的远古时代，传说在盘古开天辟地之前，世界是一团混沌状，因此把那个时代称作鸿蒙时代，后来该词也常被用来泛指远古时代。 鸿蒙的优点在于它不止是一款手机系统，还能够适配其它智能设备，比如说手表、平板和电脑等。用华为自己的话来说就是，鸿蒙OS打破了不同平台、不同设备之间的阻隔，无论设备大小，只要一款系统就能轻松搞定，无疑是更加方便。
2021-06-20 21:36:01
687
2
原创 vue动画轻提示
我习惯手写组件，内存小，加载快。必要时我会引入插件，并剔除多余的文件，希望这个小功能可以帮到你一些。<template> <view class="app"> <view class="box" :class="[Tips.light?'visi':'hidd']"> <text>{{Tips.text}}</text> <img src="../static/img/quxiao.png" alt="" class.
2021-03-20 14:45:49
686
原创 小程序复制文字及保存图片
长按保存图片@longpress=“saveImg()” methods:{ // 保存图片 saveImg(w){ console.log(w) uni.downloadFile({ //下载图片 url:'http://qcxj.funnyworking.com/static/imges/mine/Customer_Service.png', success:(res)=>{ console.log(res.tempFilePath
2021-03-05 13:17:14
878
原创 vue系列自定义加载页
一个平平无奇的小功能，塞进component文件夹里就可以引用，可以帮你节省10分钟呐，看源码：<template> <div class="loading" :class="[date?'':'vanish']"> <div class="loadOne load"> <div class="circle-loader"> <div class="circle-line"> &
2021-01-15 09:16:04
439
原创 vue自定义模态框
随手写的一个小功能，直接就可以拿去用，能为你节省10多分钟share()调用模态框布局： <div class="footer" :class="[popup?'popyes':'popno']"> <p class="top">活动站点与您所选择的站点不同，确认报名吗？</p> <div class="bot"> <p class="bot-lef" @click="cancel">取消</p&
2021-01-15 08:56:54
604
原创 JS实现登录、注册，Canvas图形二维码
原生JS实现登录注册，Canvas绘制图片二维码，本地缓存模拟数据库，入门三周可以学。网页仿“卷皮网”，如有侵权，请联系删除。从构思到实践花了两周，不准备公开源码设计思路及部分引导如下：设计思路：首先你得有手，学过JS，没吃透不要紧，明白JS能做哪些事；用onblur 事件对输入的用户名进行验证，也可以用oninput ，检测到用户名存在显示欢迎文本，或让其头像昵称显示，如未检测到则提示注册；正则验证小gif图标，通过修改其src 或css隐藏、显示来动态切换，当全部正则通过，则提交按钮可
2020-12-22 00:01:54
797
原创 Git 基础命令与事件详解（基础版）
我要出一篇 Git 总结！先讲一下大致步骤：1.提交代码之前，需要先从服务器上面拉取代码，防止自己覆盖掉别人的代码。git pull2.查看当前工作目录树的工作修改状态git statusUntracked 此文件在本地储存库中，没有加入git 库；Modified 此文件已修改，但没有进行其它操作；Deleted 文件在本地删除，服务器没有删除；等状态3.将状态改变的代码提交至缓存git add -A 将修改后未被跟踪的代码提交至缓存；git add -U 将
2020-12-16 15:03:32
770
5
原创 CSS骰子翻转动画
<!doctype html><html><head><meta charset="utf-8"><title>CSS3骰子翻转动画</title><style>body { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing:..
2020-12-16 14:16:33
571
原创 CSS层叠文字动画
很实用的一个动画，body里定义了文字，可以凭键盘任意修改，灵感来自于站长之家。公众号转型做了恋爱婚庆相关，Yeah！<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>css3层叠文字动画</title><style>body { background: black; margin: 0; height: 1..
2020-12-16 14:12:11
282
原创 乐淘网侧边栏动画
在乐淘网买衣服时无意中发现了侧边栏的动画效果，没禁住诱惑尝试了一下，还挺难，不过做出来了。如有侵权请联系删除“乐淘网”官方线上地址，大额品牌超低折扣！ 太懒了没有加图片，但效果是一样的，这里用源生JS写的，思路比较朴实无华：·定义外部变量来判断按钮的点击状态；·当按钮被点击时让侧边栏宽度还原或缩小；·遍历每一个列表项，并调用动画；·改变外部变量的值代码如下：<!DOCTYPE html><html lang="en"><head> <me
2020-12-14 00:18:24
342
4
原创 win7桌面图标消失的3种解决方案
正常情况,用户进入Win7系统桌面的时候会看到administrator文件夹、计算机、回收站、网络等图标,但有"朋友进入桌面后什么图标都没有,这是怎么回事, Win7桌面没有图标可以分为三种情况,下面我们来看下这三种情况的具体解决方法。第一种情况：图标没了，任务栏还在 1、第一种情况:电脑桌面上没有任何图标,但下面的任务量还在而且鼠标可以使用右击; 2、右键点击桌面的空白处点击"查看"之后点击"显示桌面图标"这样桌面图标就回来了，如果没有，请继续往下看第二种情况:开机所有的图标和
2020-12-03 09:37:01
4263
2
原创 网页精准布局，学会受用一生
昨天有同学问这个如何布局，细节就不描述了，反正很着急，我大致看了一眼，两分钟把答案整了出来，有注释有效果图，当键盘声停下需求也就做完了。 无论哪种网页布局，首先统筹全局，从最外侧开始看，如图： 我们先分左右后分上下，比如最外侧是：侧边栏、内容；内容区域有：导航栏、头部、内容；内容中再分侧边栏与内容。结合代码一目了然：<!-- 最大父元素 --><div class="box flex"> <!-- 弹性盒子布局 --> <div class.
2020-12-01 09:11:54
527
原创 Canvas 自由落体
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>炫彩小球自由掉落</title><style> body{margin:0;padding:0;overflow:hidden;} #title { position: absolute; top: 50%; left: 50%; transform: transl.
2020-11-24 09:55:41
461
原创 鼠标悬停按钮
<!DOCTYPE html><html lang="en" ><head><meta charset="UTF-8"><title>CSS3圆形修边渐变按钮</title><style> body { background: #e0e5ec; } h1 { position: relative; text-align: center; color: #353535; font.
2020-11-24 09:46:28
551
原创 CSS卡通小汽车
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>CodePen - CSS ART - Vintage VW Bug -</title> <style> :root { --size: 60; --unit: calc((var(--size) / 800) * 1vmin); } .
2020-11-24 09:37:50
584
2
原创 前端月入过万必看
项目背景为了适应h5环境搭建需求，需要动态配置开发，测试，生产三种对应域名及其及打包命令。使用cross-env可以让配置环境更加清晰明了还好管理。简介cross-env的作用是不需要全局配置NODE_ENV在scripts脚本中修改NODE_ENV的值从而实现不同环境中proccess.env.NODE_ENV的不同，而config的工作原理就是基于NODE_ENV这个值的，所以推荐两者结合使用。安装 cross-envnpm install --save-dev cross-env使用.
2020-11-20 17:46:39
649
原创 程序员蠕动的脑神经
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>程序员蠕动的脑神经</title> <style> body, html { margin: 0px; padding: 0px; position: fixed; background: rgb(30, 30, 30); .
2020-11-20 17:43:37
211
原创 switch循环与@click
工作稳定，继续发帖。switch循环的用法： switch(this.sum){ case 1: this.msg = "素衣云袖，古道悠悠" break; case 2: this.msg = "摸不到，皆是离愁"; break; } 传入一个参数，开始循环，参数可以是数字或布尔，switch等于是 if 加执行语句的简写，比如上面这段代码，如果用 if 语句来写，那就.
2020-11-20 12:00:06
549
原创 ParseInt 第二个参数
parseInt() 函数可解析一个字符串，并返回一个整数。parseInt(string, radix) string 必需，要被解析的字符串。 radix 可选，表示要解析的数字的基数。 该值介于 2 ~ 36 之间。 如果省略该参数或其值为 0，则数字将以 10 为基础来解析。 如果它以 “0x” 或 “0X” 开头，将以 16 为基数，也就是16进制。 如果该参数小于 2 或者大于 36，则 parseInt() 将返回 NaN。返回值：被解析后...
2020-11-02 08:22:43
2887
1
原创 JS不使用替换进行替换
首先我们从题意中可以读出：“不能使用比较、查找、替换”函数，也就是说我可以使用分割、组合方法。于是我写出了如下代码： var str = "我喜欢南极和北极，喜欢荒漠大戈壁"; str = str.split(''); console.log(str.join('')); for(var i=0;i<str.length;i++){ var temp = str[i]+str[i+1]; if(temp=="喜欢"){ str[i]="讨"; .
2020-10-30 19:16:36
397
从 0 到 10 的 Git版本控制器入门精讲
2023-05-17
配合Git flow 流程使用的git 操作命令指南
2022-09-29
antd-9-搜索.mp4
2020-10-11
antd-8-分页.mp4
2020-10-11
antd-7-城市管理页面-表格.mp4
2020-10-11
antd-5-二级菜单与页面添加.mp4
2020-10-11
antd-4-logo添加.mp4
2020-10-11
antd-3-admin结构.mp4
2020-10-11
antd-2-页面大结构.mp4
2020-10-11
antd-3-admin结构.mp4
2020-10-11
vue-36-mockjs应用.mp4
2020-09-18
vue-35-mockjs.mp4
2020-09-18
vue-34-axios-$http.mp4
2020-09-18
vue-33-axios-post.mp4
2020-09-18
vue-32-axios-get方法.mp4
2020-09-18
vue-31-mockjs使用.mp4
2020-09-18
vue-30-为什么要用mockjs.mp4
2020-09-18
vue-29-axios挂载.mp4
2020-09-18
vue-27-prototype.mp4
2020-09-18
vue-26-安装使用axios.mp4
2020-09-18
Canvas.pdf
2020-09-05
Canvas顶级动画之绽放的黎明
2020-08-22
JQuery经典语法、案例、习题
2020-08-20
Html5传统标签及新增标签
2020-08-20
ES6基本语法及新增语法
2020-08-20
CSS3基本样式带习题答案
2020-08-20
canvas.xmind
2020-08-18
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人