- 博客(830)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 Javascript.3——ES6【对象展开，解构，属性描述】
ES6新增了Map结构，用于保存键值对的映射，它和对象的最大区别在于：对象的键只能是字符串，而Map的键可以是任何类型。现在这节课呢，咱们聊一聊对象的改动，ES6为什么会出现，它是为了让你代码写的舒服，写的踏实，写的爽。不是来恶心你的，如果说你学了ES6之后，你发现这个代码写起来更加恶心了。那你就退回去呗，你不要用ES6，说明呢，你道行还不够，你以后再慢慢用吧，因为这个ES6呢，它并没有功能性质的改变，有但很少很少，大部分呢属于整容。相当于是给js整了个容，让它看上去更加好看一点，两个眼睛还是两个眼睛，一
2025-12-20 21:53:04
668
原创 Javascript. 2—ES6【数组，数组API，for-of】
根本原因：Array(10) 创建的是一个【空槽数组】，而 .map() 不会遍历空槽！它创建了一个长度为 10 的数组，但里面没有任何元素（没有索引，没有值），全是“空位”。而map() 只处理已经被赋值的元素，会跳过空槽因为Array(10) 创建的是一个【空槽数组】，数组里是空的。那怎么办呢？我那我简单了呗，我不把它变成稀松数据完事儿了嘛，我给一个零。这样子呢，数组是不是就一开始就有有值了，数组每一项就有值了，然后我再去映射啊，
2025-12-10 20:12:19
793
原创 JavaScript . 1—ES6【let const , 字符串模板 , 字符串API】
全局定义的变量不再作为属性添加到全局对象中在变量定义之前使用它会报错不可重复定义同名变量使用。
2025-12-02 23:50:01
551
原创 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
318
原创 19. Vue2 : $route,$router,watch使用【文章列表页逻辑】
那个信路由信息一变，文章分类这个地方，又重新改变激活状态，同时由于路由信息变了，那么左边的BlogList组件也会跟着变，路由信息变了，那么BlogList组件又要重新获取文章列表，重新完成分页，就这么个意思，所以说呢，我们的组件树应该是这样子，父组件就是一个Blog，它的子组件有两个BlogList和BlogCategory。就是那我现在根据地址栏匹配到这个组件了，那倒倒是没什么问题，但在这个组件里边我得知道啊，我到底要显示的是全部文章，还是显示的是某个分类下的文章，这个组件【即Blog】
2025-11-15 01:08:53
712
原创 Mock.JS第三方库——3.mock的拦截请求并返回模拟数据
那简单的去介绍一下啊，这几个参数呢，其实除了这个template，它是一个必须要写的一个参数，然后呢，url, type,这些呢其实都是一个可选的一个参数，然后这个URL呢，就是表示你需要去拦截的一个URL，其实这个拦截的一个URL就是你那ajax要发送请求的那个URL，第二个参数就是一个type，这个type呢，其实是表示我们要拦截的请求的一个类型，像get ，post等等，这个呢也是一个可选的，然后这个template是啥呢，就是我们前两节课所学习的那个东西。那这个方法呢，我们来说一下啊，
2025-11-07 21:36:19
759
原创 Mock.JS第三方库——2. Random工具函数和数据占位符定义
DPD（数据占位符定义）它允许你在 JSON 模板中使用类似 @name、@email() 这样的“占位符”，让 Mock.js 自动替换成真实的数据。核心思想：在模板中写一个“标记”Mock.js 解析这个标记调用对应方法生成真实值替换掉原始占位符占位符的基本格式标准语法：@占位符名@ 占位符名(参数)"@name" → "张伟""@cparagraph(1, 3)" → "这是一段中文段落……"
2025-11-07 00:14:10
1032
原创 Mock.js 第三方库——1. mock语法
来看一下，那它都定义了什么呢，定义了是这个的啊，数据模板当中的每个属性呢，总共有三个部分，所构成哪三个呢，属性名，生成规则，以及属性值。我们想啊，就是我们最终的数据生成之后呢，是不是就是json的格式啊，那json的格式的话，生成的json的格式是不是就是对象啊，就是key跟value嘛，那所以其实它的这三个部分构成最后。生成的还是那个。
2025-11-02 03:35:17
974
原创 18 vue2:组件内部自我递归
在 Vue 中，一个组件可以在自己的模板中调用自己，这就叫“递归组件”。这种方式非常适合展示具有嵌套层级的数据比如目录树、评论回复、菜单导航等。
2025-10-19 19:13:16
342
原创 17. vue2：混入mixins【重复代码提取】
当然了，这个混入呢，在Vue2呢也是不得已而为之没有别的好办法了，但是到了Vue3呢，有更好的办法以后会学习的啊，学习到Vue3的时候混入就没有什么用了，有更好的解决方案，但在Vue3之前我们用Vue2要提取这些重复代码，它只能用混入的方式。非常简单，我们就可以把这个公共公共代码呢抽离出来，形成一个组件配置，它可以有各种各样的配置，有data ，created，computed等等，有各种各样的公共配置，那当然还可以有methods，再把它抽离出来，然后在具体的组件里边的时候呢，比方如下这个组件对象。
2025-10-19 15:26:56
788
原创 16. vue自定义指令
<MyComp v-mydirec1="js表达式" /><div v-mydirec2="js表达式">...</div><img v-mydirec1="js表达式" />
2025-10-19 00:51:51
679
原创 14. vue 关于 “拉幕式”文字展开动画（宽度从 0 到全宽）
给文字添加“四周描边”（或称为“外轮廓”），让文字在复杂背景上依然清晰可读。作用是：为文字添加一层半透明黑色描边，提升在各种背景下的可读性和视觉层次感。而 clientHeight 这类属性的读取，会强制浏览器提前执行重排（reflow） ，锁定初始状态，让后续变化能被识别为“有动画”。“拉幕式”文字展开动画（即文字像舞台帷幕拉开一样，从左到右逐步显示）是一种非常酷炫的视觉效果，常用于轮播图、首页标题、电影片头等场景。：让文字动画的触发时机，依赖于图片是否加载完成。一行文字原本不可见 → 然后从左侧开始，
2025-10-10 15:39:03
362
原创 13. vue2 组件轮播图实现思路解析
一定要在一次轮播图样式变化结束后，再将switching 状态锁设置为false,所以可以添加一个样式监听函数，当元素的样式发生变化完成后可以进行额外的操作。注意：轮播图在滑动实际是margin-top样式改变造成的，所以可以加一个样式变化过渡时间，【当在最后一页时，不显示⬇️按钮（因为不能再往下）】【当在第一页时，不显示⬆️按钮（因为不能再往上）】最终效果：每点一次，页面切换到下（或上）一个 li。点击：⬆️“上一页” → 显示前一张轮播图。点击：⬇️“下一页” → 显示后一张轮播图。
2025-10-10 00:20:04
812
原创 10.vue 渲染组件DOM，ref ,CSS module
第一个就是使用css module，咱们在Vue工程里边儿，大部分时候呢，你是不需要去使用css module的，为什么呢，因为我们的组件里边本身就为了避免类名重复，就做了一些事情了啊，组件里边就用到了scope对吧 ，将组件定义为作用域组件，那么这样子呢组件里的CSS呢是不可能重复的。但是呢，我们有的时候可能会需要用到CSS module ，那怎么办呢，举个例子啊，比方说，我这里呢在style目录下，新建了一个文件给它叫做message.less，我们这里呢，给这个文件写上一个类样式。
2025-09-26 23:42:15
906
原创 8. Vue 内置组件 slot：插槽
✅高复用性- 可用于各种三栏场景✅良好封装- 内部逻辑清晰，外部使用简单✅现代布局- 基于 Flexbox 的弹性设计✅健壮性- 防溢出处理非常适合用作项目中的基础布局骨架，体现了组件化开发的最佳实践！
2025-09-21 14:23:04
919
原创 6. pager组件
那么这个根结点呢，我们一般来说就是个div，那么这个div的内样式呢，其实它有一个细节啊，就是它的内样式命名，一般来说我们命名为组件的名称如“ Page，加上一个短横线命名法。我们之前学习DOM元素，使用各种各样的事件，但是我们从来没有抛出过事件，我们使用过事件参数，但是我们没有在抛出事件的时候指定事件参数，抛出的事件中第一个参数就是事件名，第二个就是事件数据，即事件参数【第二个是树越稳定，渲染效率越高。我的页面变化了，我处理不了，你去处理，让上边去处理，抛出个事件能理解这意思吧，抛出事件的时候呢，其实。
2025-09-15 03:15:10
907
原创 5.计算属性
时科”变“狗婶”发生在模板渲染阶段（render 阶段），因为你在模板中写了一个副作用表达式 {{ setNewName(“狗婶”) }}，这个表达式在渲染时就执行了，修改了 name，所以你根本看不到“时科”显示在页面上。
2025-09-13 15:47:01
972
原创 4.搭建工程及v-bind补充，prop传值
prop是Vue组件之间通信的基本方式，用于父组件向子组件传递数据。子组件需要显式声明接收的prop，形成一个接口契约。
2025-09-11 15:21:37
972
原创 3. 组件
如果说我们啥都不管，全部的东西往模板里边写。然后所有的数据配置，方法配置啊，全部写到一块。整个程序的复杂度了，直接突破天际了，尽管呢，Vue已经减轻了很多复杂度了，我们不用去操作真实DOM。但是呢。还是很复杂。这第一个问题，复杂度的问题，第二个问题呢，就是重用的问题，因为在一个项目里边总归是有一些东西是要重复的，有些地方会重复啊，网站中总归是有一些重复的东西，如果说你不考虑的话，全部写到一块儿的话。你重复的东西怎么提取呢，两个问题。
2025-09-10 13:08:39
620
原创 2. Vue核心概念
cons vm= new Vue( { } ) 首先创建了一个Vue的实例。那么，这个实例里边会有一些属性，有些方法，我们当时还演示过这个实例，里边是不是有这个 title，有这个 products，那是怎么回事呢，咱们来看一下第一个概念叫做，叫做注入。大家看这个图，我们当时是不是创建了一个 new Vue( { })，是不是创建了一个 Vue 的实例，那么这就是生成了一个 Vue 的实例对象。这个对象里边儿，它本身自带了一些成员，就是Vue这个框架给我们加的一些成员，那么我们来看一下这些成员啊，我们把把
2025-09-09 23:21:36
741
1
原创 1. 前端的框架由来
后来后端开发者群体会抱怨，而且随着我们的网站越来越复杂，后端的功能越来越多前端的功能就页面上的功能，交互性越来越强，后端开发者做的事情是不是越来越多，他不断要完成各种业务功能所以说后端开发者已经，承受不了这么大的开发压力了于是就开始想办法，那我前端开发者太闲了后端开发者压力太大了，能不能让前端开发者去组装页面呢，那么这就涉及到前后端分离了，怎么把前端的工作，就组装页面按理说应该是前端的工作，以前没办法是在服务器组装的，那我们能不能换一种思路呢，于是出现了下面这种做法叫做前后端分离，
2025-09-07 18:03:13
558
原创 标签疑难杂病
点击这个链接时，浏览器会在新标签页中打开 https://www.example.com ，而不会关闭或跳转当前页面。target=“_blank” 表示：在新标签页中打开链接。
2025-09-07 14:02:06
188
原创 工程化综合练习【豆瓣】
效果展示地址：https://study.duyiedu.com/movie接口地址：https://app.apifox.com/link/project/2429576/apis/api-67925177。
2025-09-07 14:00:59
1030
原创 使用nvm切换node版本
所以你这边的话就是有必要修改一下这个 npm源, 但是我刚才看了一下，就我们刚才在改 这个nvm源的时候, 我们这边已经把这个npm的 这个mirror是不是已经改好了，就是这个npm源。那如果你这边node.js版本和老师的这个node.js版本不一致的话，经常会遇到一些错误啊, 那我们这边的话就可以通过这个nvm这个工具，你可以隨时可以安装多个版本的node.js, 这样老师上课的时候他用哪个node.js版本，那你直接就是切换成那个对应的版本就可以了。
2025-08-31 05:40:40
337
原创 CSS工程：Less工程化
Less是一种更加简洁的样式代码，它非常像CSS，但又不太一样，它让编写样式变得更容易下面是css代码和Less代码的对比，它们都表达了一样的含义Less代码虽好，但它无法被浏览器识别，因此需要一个工具将其转换为血统纯正的css代码由于node环境具有读写文件的能力，于是在node环境中可以轻松的完成文件的转换npm上有一个包叫做less，它运行在node环境中，通过它可以完成对Less代码的转换npm上有一个包叫做less他有个能力，它是利用这个node环境的读写文件的能力, 它把可以把less。
2025-08-31 04:00:53
670
原创 依赖包管理器，【npm命令行工具】
npm官网：https://www.npmjs.com/npm全命令：https://docs.npmjs.com/cli/v7/commands包管理器它是这样子的，就是咱们前端不是有很多第三方库嘛，那些第三方库呢，每个都有自己的官方网站哎，你进去过后呢，你就去下载它的一个 JS 压缩包，下载下来过后呢，解压。然后再拷贝你的工程里边儿，然后呢，在这页面上用一个元素 < script > 元素去引用它,这是我们以前使用第三方库的东西呃。它的具体做法，是不是很麻烦啊？对不对？
2025-08-29 01:47:06
768
原创 综合练习：ES Module标准实现模块化
查阅文档，按照老师的模块划分思路完成「综合练习效果」登录接口文档：https://app.apifox.com/link/project/2429576/apis/api-67925168测试账号：username测试密码：123123。
2025-08-28 14:52:06
154
原创 ES Module标准实现模块化【官方标准】
静态依赖是要在运行代码之前就要分析出依赖关系，代码 还没有运行, 我就要知道这个模块，依赖哪些模块？我是要在代码的运行过程中比方说一个判断，一个循环,一个函数。依赖是用来导入的，有了这句话就应该懂了什么是依赖了【还没使用的export都叫依赖】，再书写一个 ESM 模块，查阅文档，导入上面的模块，你可以写出多少中导入的方式。一个模块可以同时存在两种导出方式，最终会合并为一个「对象」导出。书写一个 ESM 模块，查阅文档，导出下面的模块对象。书写一个 ESM 模块，查阅文档，导出下面的模块对象。
2025-08-28 14:49:18
1136
原创 JavaScript中常用函数【要经常看】
返回一个新字符串，表示原字符串中从 indexStart 到 indexEnd（不包含）之间的字符。substring() 是 JavaScript 中用于从字符串中提取子字符串的一个非常常用的方法。【提取指定范围内的字符串，且提取后的字符串仍然保留着原先的格式】🔍 一、substring() 方法详解。
2025-08-26 05:07:05
333
原创 CommonJS标准实现模块化
math.JS 文件这个文文件呢，它是提供一些数学相关的函数啊，我们要编写的就是模拟我们在真实项目里边儿，把很多事情呢拆分成不同的文件去处理。进入终端，然后呢，我们去运行一下这个 Node 命令，后边跟上我们的文件名 JS文件名就是 index . js。因此呢，可以看到，我们 node 环境里边是不需要浏览器参与的，是直接运行。模块中的所有全局定义的，变量、函数，都不会污染到其他模块，【如该JS文件中定义var a=1,只能运行在该文件中，其他文件无法调用该文件定义的变量】我们也可以运行，它怎么运行呢？
2025-08-26 05:05:13
904
原创 第三方库【jQuery,Lodash，Animate.css，Axios，MockJS，Moment，Echarts】
在 Mock.js 中，@ 是一个非常重要的符号，用于表示占位符（Placeholder） ，它的作用是：告诉 Mock.js：这里需要根据某种规则自动生成数据，而不是直接使用你写的值。axios是一个请求库，在浏览器环境中，它封装了XHR，提供更加便捷的API发送请求，是一个使用同一个API既可以在游览器环境下使用，又可以在Node环境下使用，还提供了很多方法，如text( )方法，appendTo( )方法等等，这些方法都可以帮你批量的操作DOM元素，如添加一个类样式，所有DOM都添加了，
2025-08-24 00:24:19
1047
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人