- 博客(842)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 CSS：3.尺寸百分比和最大修小宽度
使用控制尺寸更加直观，因此，很多网站都会加入下面的代码好同学们，大家好，我是袁老师，这节课呢，我们为了让后边儿的课程学习的顺利，为后边儿的课程扫清一些障碍，所以说我们这节课需要给大家补充一些。简单且重要的知识，这些知识呢，同学们在前边儿的学习中呢，可能没有怎么去涉及到啊，所以说我们在这节课呢集中来补充一下。一共就有四个知识，而且它写的它代码也非常简单，而且知识也比较好理解啊，我们快速把它过一下。第一个呢，我把它叫做防脱发神器，因为它真的可以解决脱发的问题啊，咱们程序员的发质是不是很重要的，好，我们来看一下
2026-03-08 23:45:47
270
原创 CSS3布局——2网格布局
定义行：定义列它们的语法是相同的下面拿定义列来举例子说明该语法，那么这个语法呢对行也是同样适用的`通过这个玩意儿【】，就刚才我们写的定义行，通过它来定义列【对吧，你看语法是一样的，写法都完全一样的，下面我就用定义列的方式来举例子，50，100，150就表示有三列，第一列50，第二列100，第三列150。好，这里呢，还有一种特殊写法，叫repeat，repeat这是个函数啊叫重复，有的时候一个个写的话列很多，一个个写很麻烦，那么就是啥意思，一共有三列。
2026-03-08 17:31:55
283
原创 CSS3布局——1弹性盒子
好了，同学们，我们这节课呢，来学习CSS三大布局，布局这一块呢应该说是CSS 3呢给我们带来的一个巨大的变化。你看啊，我们过去的布局的方案无外乎就是这么几种，一个是常规流，这个常规流呢，你就是不用去管它，它本身默认就是常规流从上到下依次排列，对吧，每一个盒子呢占一行，像div啊，像p元素啊，对吧，就占一行，这是常规流的一个布局。然后呢我们还有一个浮动布局，然后还有一个定位，定位这个我们刨开啊，这个定位没有什么变化，到了CS 3的话还是可以使用定位啊而且使用的还是比较常见的，因为没有什么变化，我们把它抛开。
2026-03-08 17:31:39
279
原创 22. vue2 ：v-model专用于表单的数据双向绑定
复选框也可以用v-mod，叫做v-model=“formData.loves”，这个数据是啥呀，这个数据是一个数组，因为这个v-model语法糖啊它会针对不同的表单元素，它是专门的用来做表单元素的啊，所以v-mod你不要到处乱用，v-mod针对不同的表单元素呢它有不同的处理，而且针对不同的数据类型呢，它也有不同的处理，当v-mod发现你绑定的值是一个数组的时候，它会怎么样呢，你这个复选框的value值是不是在这个数组中，说起来有点绕，其实极其合理。没遇到就没有怎么说呃，大概看一下啊，在官方文档里边。
2026-02-27 01:11:23
986
原创 21. vue2 ：$listeners【子组件发生事情让父组件处理再给子组件接着处理】
但是呢，这节课呃要如果说要要直接开发这个组件呢，还缺少一些知识啊，所以说我们这节课呢，先不着急啊，先把我们的项目呢，暂时放一放。放一节课没问题吧，我们讲一点新知识，把这些知识给它，大家讲通讲细啊，让它大家彻底明白了之后呢，我们再去做这个组件，那到时候呢，开发起来就比较轻松了，好，我们来看一下啊，这节课呢，我们这里有两个例子，把这两个例子的问题解决了，其实我们那个组件呢，也就差不多了。
2026-02-27 01:11:00
830
原创 Javascript.4——ES6【箭头函数，剩余参数】
来我们来说一下函数，这个函数这一块呢，它只是给你做了一些。嗯，语法上的升级让你写函数呢，变得更加简单，好，咱们来看一下吧，第一个箭头函数。就是我们平时有的时候啊，会经常写一些函数表达式，什么叫函数表达式啊，我给大家看一下啊。示例1是一个函数声明。那什么叫函数表达式呢？比方说你这样子写。如示例2这就是一个函数表达式。它把这个函数表达式复制给变量a，你看这个函数表达式，它其实跟其他表达式并没有什么本质的区别，比方说有的时候会这样子写,你看这是不是也是一个函数表达式如示例3还包括我们有的时候怎么写,比方说我
2026-02-24 16:00:49
542
原创 Javascript.9——ES6【Promise的async和await 使用】
好至此呢，咱们promise这一块东西就学完了啊，promise这个东西呢大家也体验到了，它并没有消除回调的，它回调是没有消除的，你看我们promise里边，【new Promise(…).then（ （)=>{ } 】这里边是不是有回调，然后后边我们的then方法里边是不是一个回调函数对吧，Promise它其实没有消除回调，但它消除了什么呢，它有两个作用，
2026-02-24 12:13:42
619
原创 Javascript.8——ES6【Promise的静态方法】
邓哥需要在所有任务结束后给邓嫂汇报工作，哪些成功了，哪些失败了为了最大程度的节约时间，邓哥希望这些任务同时进行，最终汇总结果统一处理每个任务可以看做是一个返回Promise的函数我们就可以接着来讲邓哥了啊，他又遇到新问的问题了，之前表白呢，可能成功了啊，已经开始在一起过日子了，这个时候呢，邓嫂出门儿，她给邓哥呢，交代了几个任务。今天呢，你把我饭给我做了，衣服洗了，然后呢，卫生给它打扫了。
2026-02-12 22:58:00
855
原创 Javascript.7——ES6【Promise的链式调用】
好，这节课呢，咱们来学习promise的链式处理，promise链式处理呢，应该算是promise里边儿最复杂的一块儿内容了呃，这一块儿内容呢，也是面试题考的比较多的部分，考的最多的也就是这个链式处理，链式处理边儿有很多的规则，但是这些规则呢，其实我们在现实生活中都可以找到呃，这么一个例子啊，这里呢，有两张图，上面这张图呢，是我们上节课给大家放出来这么一张图，同学们加油吧啊，把它搞定。多花点时间把它搞定就完事儿了，你后边就再也不用怕它了，第一张图呢，是我们上节课的图对吧，这是单个promise对象。咱们上
2026-02-01 13:51:59
677
原创 Javascript.6——ES6【Promise基础】
好了，同学们，咱们终于到了这个阶段的最重要的一部分，也是内容最多的一部分，当然了，也是。相对来说，比较复杂的一部分，咱们前端学学开发呢，它其实坎儿不多啊，其中一个坎儿呢，就是在这儿。promise这是ES6给我们新搞出来这么一个东西，你要说不学这个玩意儿，能不能做开发呢？当然可以。但是呢，现在呢，在公司里边啊，很多异步场景的处理，异步我们之前讲过了，针对异步场景的处理呢很多地方都会使用这个promise，这个promise啊。它的作用呢，就是用来处理异步场景的，因为ES6觉得之前的异步场景太拉垮了。
2026-01-21 01:35:12
671
原创 Javascript.5——ES6【事件循环，异步的原理，浏览器的进程模型】
最后总结一下吧，我们这节课呢，一开始讲了浏览器的进程模型，告诉了你浏览器启动过后呢，它会开启多个进程。为了隔离嘛，避免一个进程的功能运行崩溃了之后，影响到其他进程，隔离之后一个进程崩溃不会影响到别人。好，然后在这些进程里边呢，我们重点讲了渲染进程，特别是渲染进程里边的主线程叫做渲染主线程。因为渲染主线程承担的事情太多了，太忙了，所以呢，他找到了一种方式来解决事情混乱的问题，对吧，同学们也可以学习一下，对吧，当你事情多的时候呢，你可以排队嘛，这些事情一件一件处理啊，不要同时处理几件人都是单线程的。
2026-01-10 22:31:15
970
原创 Javascript.3——ES6【对象展开，解构，属性描述】
ES6新增了Map结构，用于保存键值对的映射，它和对象的最大区别在于：对象的键只能是字符串，而Map的键可以是任何类型。现在这节课呢，咱们聊一聊对象的改动，ES6为什么会出现，它是为了让你代码写的舒服，写的踏实，写的爽。不是来恶心你的，如果说你学了ES6之后，你发现这个代码写起来更加恶心了。那你就退回去呗，你不要用ES6，说明呢，你道行还不够，你以后再慢慢用吧，因为这个ES6呢，它并没有功能性质的改变，有但很少很少，大部分呢属于整容。相当于是给js整了个容，让它看上去更加好看一点，两个眼睛还是两个眼睛，一
2025-12-20 21:53:04
761
原创 Javascript. 2—ES6【数组，数组API，for-of】
根本原因：Array(10) 创建的是一个【空槽数组】，而 .map() 不会遍历空槽！它创建了一个长度为 10 的数组，但里面没有任何元素（没有索引，没有值），全是“空位”。而map() 只处理已经被赋值的元素，会跳过空槽因为Array(10) 创建的是一个【空槽数组】，数组里是空的。那怎么办呢？我那我简单了呗，我不把它变成稀松数据完事儿了嘛，我给一个零。这样子呢，数组是不是就一开始就有有值了，数组每一项就有值了，然后我再去映射啊，
2025-12-10 20:12:19
900
原创 JavaScript . 1—ES6【let const , 字符串模板 , 字符串API】
全局定义的变量不再作为属性添加到全局对象中在变量定义之前使用它会报错不可重复定义同名变量使用。
2025-12-02 23:50:01
612
原创 20. vue2 : v-html 指令
我们获取到的数据是htmlContent 的内容展开如下如果使用vue中的普通插值 {{ }}：来编译这个 HTML 标签，那 {{ }}得到的结果依然是这个 HTML 标签如图演示在 Vue 中，{{ ‘< p>hello< /p>’ }} 这种写法叫做 插值表达式也常被称为 Mustache 语法即大胡子语法，从上面的示例中我们可以得知，大胡子语法无法解析 HTML 标签,那如果我们想解析 HTML 标签变成文本我们应该使用vue中的v-html指令v-html 把字符串当 HTML 渲染
2025-11-25 21:58:26
350
原创 19. Vue2 : $route,$router,watch使用【文章列表页逻辑】
那个信路由信息一变，文章分类这个地方，又重新改变激活状态，同时由于路由信息变了，那么左边的BlogList组件也会跟着变，路由信息变了，那么BlogList组件又要重新获取文章列表，重新完成分页，就这么个意思，所以说呢，我们的组件树应该是这样子，父组件就是一个Blog，它的子组件有两个BlogList和BlogCategory。就是那我现在根据地址栏匹配到这个组件了，那倒倒是没什么问题，但在这个组件里边我得知道啊，我到底要显示的是全部文章，还是显示的是某个分类下的文章，这个组件【即Blog】
2025-11-15 01:08:53
755
原创 Mock.JS第三方库——3.mock的拦截请求并返回模拟数据
那简单的去介绍一下啊，这几个参数呢，其实除了这个template，它是一个必须要写的一个参数，然后呢，url, type,这些呢其实都是一个可选的一个参数，然后这个URL呢，就是表示你需要去拦截的一个URL，其实这个拦截的一个URL就是你那ajax要发送请求的那个URL，第二个参数就是一个type，这个type呢，其实是表示我们要拦截的请求的一个类型，像get ，post等等，这个呢也是一个可选的，然后这个template是啥呢，就是我们前两节课所学习的那个东西。那这个方法呢，我们来说一下啊，
2025-11-07 21:36:19
811
原创 Mock.JS第三方库——2. Random工具函数和数据占位符定义
DPD（数据占位符定义）它允许你在 JSON 模板中使用类似 @name、@email() 这样的“占位符”，让 Mock.js 自动替换成真实的数据。核心思想：在模板中写一个“标记”Mock.js 解析这个标记调用对应方法生成真实值替换掉原始占位符占位符的基本格式标准语法：@占位符名@ 占位符名(参数)"@name" → "张伟""@cparagraph(1, 3)" → "这是一段中文段落……"
2025-11-07 00:14:10
1085
原创 Mock.js 第三方库——1. mock语法
来看一下，那它都定义了什么呢，定义了是这个的啊，数据模板当中的每个属性呢，总共有三个部分，所构成哪三个呢，属性名，生成规则，以及属性值。我们想啊，就是我们最终的数据生成之后呢，是不是就是json的格式啊，那json的格式的话，生成的json的格式是不是就是对象啊，就是key跟value嘛，那所以其实它的这三个部分构成最后。生成的还是那个。
2025-11-02 03:35:17
1035
原创 18 vue2:组件内部自我递归
在 Vue 中，一个组件可以在自己的模板中调用自己，这就叫“递归组件”。这种方式非常适合展示具有嵌套层级的数据比如目录树、评论回复、菜单导航等。
2025-10-19 19:13:16
415
原创 17. vue2：混入mixins【重复代码提取】
当然了，这个混入呢，在Vue2呢也是不得已而为之没有别的好办法了，但是到了Vue3呢，有更好的办法以后会学习的啊，学习到Vue3的时候混入就没有什么用了，有更好的解决方案，但在Vue3之前我们用Vue2要提取这些重复代码，它只能用混入的方式。非常简单，我们就可以把这个公共公共代码呢抽离出来，形成一个组件配置，它可以有各种各样的配置，有data ，created，computed等等，有各种各样的公共配置，那当然还可以有methods，再把它抽离出来，然后在具体的组件里边的时候呢，比方如下这个组件对象。
2025-10-19 15:26:56
810
原创 16. vue自定义指令
<MyComp v-mydirec1="js表达式" /><div v-mydirec2="js表达式">...</div><img v-mydirec1="js表达式" />
2025-10-19 00:51:51
701
原创 14. vue 关于 “拉幕式”文字展开动画（宽度从 0 到全宽）
给文字添加“四周描边”（或称为“外轮廓”），让文字在复杂背景上依然清晰可读。作用是：为文字添加一层半透明黑色描边，提升在各种背景下的可读性和视觉层次感。而 clientHeight 这类属性的读取，会强制浏览器提前执行重排（reflow） ，锁定初始状态，让后续变化能被识别为“有动画”。“拉幕式”文字展开动画（即文字像舞台帷幕拉开一样，从左到右逐步显示）是一种非常酷炫的视觉效果，常用于轮播图、首页标题、电影片头等场景。：让文字动画的触发时机，依赖于图片是否加载完成。一行文字原本不可见 → 然后从左侧开始，
2025-10-10 15:39:03
397
原创 13. vue2 组件轮播图实现思路解析
一定要在一次轮播图样式变化结束后，再将switching 状态锁设置为false,所以可以添加一个样式监听函数，当元素的样式发生变化完成后可以进行额外的操作。注意：轮播图在滑动实际是margin-top样式改变造成的，所以可以加一个样式变化过渡时间，【当在最后一页时，不显示⬇️按钮（因为不能再往下）】【当在第一页时，不显示⬆️按钮（因为不能再往上）】最终效果：每点一次，页面切换到下（或上）一个 li。点击：⬆️“上一页” → 显示前一张轮播图。点击：⬇️“下一页” → 显示后一张轮播图。
2025-10-10 00:20:04
895
原创 10.vue 渲染组件DOM，ref ,CSS module
第一个就是使用css module，咱们在Vue工程里边儿，大部分时候呢，你是不需要去使用css module的，为什么呢，因为我们的组件里边本身就为了避免类名重复，就做了一些事情了啊，组件里边就用到了scope对吧 ，将组件定义为作用域组件，那么这样子呢组件里的CSS呢是不可能重复的。但是呢，我们有的时候可能会需要用到CSS module ，那怎么办呢，举个例子啊，比方说，我这里呢在style目录下，新建了一个文件给它叫做message.less，我们这里呢，给这个文件写上一个类样式。
2025-09-26 23:42:15
929
原创 8. Vue 内置组件 slot：插槽
✅高复用性- 可用于各种三栏场景✅良好封装- 内部逻辑清晰，外部使用简单✅现代布局- 基于 Flexbox 的弹性设计✅健壮性- 防溢出处理非常适合用作项目中的基础布局骨架，体现了组件化开发的最佳实践！
2025-09-21 14:23:04
957
原创 6. pager组件
那么这个根结点呢，我们一般来说就是个div，那么这个div的内样式呢，其实它有一个细节啊，就是它的内样式命名，一般来说我们命名为组件的名称如“ Page，加上一个短横线命名法。我们之前学习DOM元素，使用各种各样的事件，但是我们从来没有抛出过事件，我们使用过事件参数，但是我们没有在抛出事件的时候指定事件参数，抛出的事件中第一个参数就是事件名，第二个就是事件数据，即事件参数【第二个是树越稳定，渲染效率越高。我的页面变化了，我处理不了，你去处理，让上边去处理，抛出个事件能理解这意思吧，抛出事件的时候呢，其实。
2025-09-15 03:15:10
928
原创 5.计算属性
时科”变“狗婶”发生在模板渲染阶段（render 阶段），因为你在模板中写了一个副作用表达式 {{ setNewName(“狗婶”) }}，这个表达式在渲染时就执行了，修改了 name，所以你根本看不到“时科”显示在页面上。
2025-09-13 15:47:01
994
原创 4.搭建工程及v-bind补充，静态绑定，动态绑定，Style绑定，prop传值
prop是Vue组件之间通信的基本方式，用于父组件向子组件传递数据。子组件需要显式声明接收的prop，形成一个接口契约。
2025-09-11 15:21:37
1005
原创 3. 组件
如果说我们啥都不管，全部的东西往模板里边写。然后所有的数据配置，方法配置啊，全部写到一块。整个程序的复杂度了，直接突破天际了，尽管呢，Vue已经减轻了很多复杂度了，我们不用去操作真实DOM。但是呢。还是很复杂。这第一个问题，复杂度的问题，第二个问题呢，就是重用的问题，因为在一个项目里边总归是有一些东西是要重复的，有些地方会重复啊，网站中总归是有一些重复的东西，如果说你不考虑的话，全部写到一块儿的话。你重复的东西怎么提取呢，两个问题。
2025-09-10 13:08:39
658
原创 2. Vue核心概念
cons vm= new Vue( { } ) 首先创建了一个Vue的实例。那么，这个实例里边会有一些属性，有些方法，我们当时还演示过这个实例，里边是不是有这个 title，有这个 products，那是怎么回事呢，咱们来看一下第一个概念叫做，叫做注入。大家看这个图，我们当时是不是创建了一个 new Vue( { })，是不是创建了一个 Vue 的实例，那么这就是生成了一个 Vue 的实例对象。这个对象里边儿，它本身自带了一些成员，就是Vue这个框架给我们加的一些成员，那么我们来看一下这些成员啊，我们把把
2025-09-09 23:21:36
788
1
原创 1. 前端的框架由来
后来后端开发者群体会抱怨，而且随着我们的网站越来越复杂，后端的功能越来越多前端的功能就页面上的功能，交互性越来越强，后端开发者做的事情是不是越来越多，他不断要完成各种业务功能所以说后端开发者已经，承受不了这么大的开发压力了于是就开始想办法，那我前端开发者太闲了后端开发者压力太大了，能不能让前端开发者去组装页面呢，那么这就涉及到前后端分离了，怎么把前端的工作，就组装页面按理说应该是前端的工作，以前没办法是在服务器组装的，那我们能不能换一种思路呢，于是出现了下面这种做法叫做前后端分离，
2025-09-07 18:03:13
577
原创 标签疑难杂病
点击这个链接时，浏览器会在新标签页中打开 https://www.example.com ，而不会关闭或跳转当前页面。target=“_blank” 表示：在新标签页中打开链接。
2025-09-07 14:02:06
201
原创 工程化综合练习【豆瓣】
效果展示地址：https://study.duyiedu.com/movie接口地址：https://app.apifox.com/link/project/2429576/apis/api-67925177。
2025-09-07 14:00:59
1045
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人