肥肠可耐的西西公主-优快云博客

原创前端（vue）学习笔记（CLASS 5）：自定义指令&插槽&路由

内置指令：内部提供的，每个指令都有自己各自独立的功能自定义指令：自己定义的指令，可以封装一些dom操作，扩展额外功能全局注册-语法例如，当页面加载时，让元素获得焦点Vue.directive('指令名',{el.focus()})insert指的是当指令所绑定的元素被添加到页面中时会自动调用该代码写在main.js文件中局部组册-语法"指令名": {局部注册的代码写在组件内的script中使用的时候，和其他指令一样，v-指令名。

2025-03-22 16:26:38 1040

原创前端（vue)学习笔记（CLASS 4）：组件组成部分与通信

作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示，帮助开发者，快速发现错误。在子组件中利用props接收，并且用$emit通知，其中的事件名为update:属性名。恰当时机，通过this.$refs.xxx，获取目标组件，就可以调用组件对象里面的方法。默认情况下，写在组件中的样式会全局生效，因此很容易造成多个组件之间的样式冲突问题。最终效果：必须是当前组件的元素，才会有这个自定义的属性，才会被这个样式作用到。2、局部样式：可以给组件加上scoped属性，可以让样式只作用于当前组件。

2025-03-16 23:10:45 986

原创前端（vue）学习笔记（CLASS 3）：生命周期&工程化开发入门

创建出来的包如下：主要需要聚焦于index.html、main.js、APP.vue三个文件其中app.vue文件用于进行编辑。

2025-03-10 23:57:40 1091 1

原创前端（AJAX）学习笔记（CLASS 4）：进阶

async和await关键字让我们可以用一种更简洁的方式写出基于Promise的异步行为，而无需刻意地链式调用Promise。同步代码：浏览器按照书写代码的顺序一行一行去执行代码，逐行执行，需要原地等待结果后，才继续向下执行。概念：依靠then()方法会返回一个新生成的Promise对象特性，继续串联下一环任务，直到结束。细节：then()回调函数中的返回值，会影响新生成的Promise对象最终状态和结果。每个promise对象中管理一个异步任务，用then返回promise对象，串联起来。

2025-03-08 00:56:32 622

原创前端（vue）学习笔记（CLASS 2）：进阶

为了方便开发者进行样式控制，Vue扩展了v-bind的语法，可以针对class类名和style行内样式进行控制。2、作为方法，需要调用-> this.方法名() {{方法名() }} @事件名=“方法名”指令修饰符：通过“.”指明一些指令的后缀，不同后缀封装了不同的处理操作->简化代码。常见的表单元素都可以用v-model绑定关联->快速获取或设置表单元素的值。部分的表单控件需要绑定一个value值，传入data中，可以事项选或不选。计算属性会计算出来的结果缓存，再次使用直接读取缓存，

2025-02-26 11:37:26 736

原创前端（vue）学习笔记（CLASS 1）：vue框架入门

method是vue实例中的配置项，内部可以装函数，如果需要访问data配置项的数据，需要使用实例.属性名或者是this来进行访问修改。如何访问或修改呢，data中的数据，最终都会被添加到实例上，也就是成为实例的属性，因此通过实例.属性名即可访问与修改。其中v-html指令就是设置DOM元素的innerHTML，该指令可以解析内容中的标签。语法：v-if="表达式" 表达式值true显示，false隐藏。语法：v-else v-else-if="表达式"语法：v-bind：属性名=''表达式''

2025-02-21 22:46:37 462

原创前端（AJAX）学习笔记（CLASS 3）：AJAX原理

语法：http://xxx.com/xxx/xxx?参数名1=值1&参数名2=值2。定义：Promise对象用于表示一个异步操作的最终完成（或失败）及其结果值。定义：浏览器提供给服务器的额外信息，让服务器返回浏览器想要的数据。待定（pending）：初始状态，既没有被兑现，也没有被拒绝。注意：Promise对象一旦被兑现或拒绝，状态无法再改变。概念：一个Promise对象，必然处于以下几种状态之一。已兑现（fulfilled）：意味着，操作成功完成。已拒绝（rejected）：意味着，操作失败。

2025-02-21 20:23:05 195

原创前端（AJAX）学习笔记（CLASS 2）：图书管理案例以及图片上传

自己的图书数据：给自己起个外号，并告诉服务器，默认会有三本书，基于这三本书做数据的增删改查。1、引入bootstrap.css和bootstrap.js。当点击删除按钮时，该行的数据将会被删除，并在页面中重新渲染。功能：不离开当前页面，显示单独内容，供用户操作。以下代码为使用BooyStrap的添加图书弹窗。3、通过自定义属性，控制弹框的显示和隐藏。修改数据部分包括了数据回显以及修改数据。再修改数据后，点击修改按钮，将进行修改。当点击编辑按钮时，会弹出编辑图书弹框。利用自定义属性控制弹框的显示和隐藏。

2025-02-18 22:44:47 503

原创前端（JS进阶）学习笔记（CLASS 2）：构造函数&数据常用函数

比如我们创建了佩奇的对象，继续创建乔治的对象还需要重新写一遍，此时可以通过构造函数来快速创建多个类似的对象。find：查找元素，返回符合测试条件的第一个数组元素值，如果没有符合条件的则返回underfined。some：检测数组中的元素是否满足指定条件，如果数组中有元素满足条件返回true，否则返回false。实例成员：通过构造函数创建的对象称为实例对象，实例对象中的属性和方法称为实例成员。在JavaScript中的字符串、数值、布尔具有对象的使用特征，如具有属性和方法。

2025-02-16 21:21:30 971

原创前端（JS进阶）学习笔记（CLASS 1）：作用域&解构&箭头函数

嵌套关系的作用域串联起来形成了作用域链，相同作用域链中按着从小到大的规则查找变量，子作用域能够访问父作用域，父级作用域无法访问子级作用域。凡是能从根部到达的对象，都是还需要使用的。<script>标签和.js文件的最外层就是所谓的全局作用域，在此声明的变量在函数内部也可以被访问。复杂数据类型放到堆里面。IE采用的引用计数算法，定义“内存不再使用”，就是看一个对象是否有指向它的引用，没有了引用就回收对象。现代的浏览器已经不再使用引用计数法，通用的大多是基于标记清除算法的某些改进算法，总体思想都是一致的。

2025-02-11 04:09:52 778

原创前端（AJAX）学习笔记（CLASS 1）：AJAX入门

AJAX的定义，简单来说就是使用XMLHttpRequest对象和服务器通信如何使用Ajax：1、先使用axios库，与服务器进行数据通信基于XMLHttpRequest封装、代码简单vue、React项目中都会用到axios2、学习XMLHttpRequest对象的使用，了解Ajax底层原理。

2025-02-08 02:28:51 572

原创前端（API）学习笔记（CLASS 6）：正则表达式

正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式也是对象通常用来查找、替换那些符合正则表达式的文本，许多语言都支持正则表达式正则表达式在JavaScript中的使用场景：1、验证表单：用户名表单只能输入英文字母、数字或者下划线，昵称输入框中可以输入中文（匹配）2、过滤掉页面内容中的一些敏感词（替换），或从字符串中获取我们想要的特定部分（提取）等。

2025-02-07 01:40:47 531

原创前端（API）学习笔记（CLASS 5）：windows对象与存储

以前我们页面写的数据一刷新页面就没有了随着互联网的快速发展，基于网页的应用越来越普遍，同时也变得越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，HTML5规范提出了相关解决方案1、数据存储在用户浏览器中2、设置、读取方便、甚至页面刷新不丢失数据3、容量较大，sessionStorage和localStorage约5M左右。

2025-02-06 02:49:17 949

原创前端（API）学习笔记（CLASS 4）：进阶

时间戳：是指1970年01月01日00时00分00秒起至现在的毫秒数，它是一种特殊的计算时间的方式。删除节点和隐藏节点有区别的：隐藏节点还是存在的，但是删除，则从html中删除节点。children属性（重点）：仅获得所有元素节点、返回的还是一个伪数组，最近一级的子节点。当点击子元素的时候，就可以操控父元素进行操作，无需再次获取父元素的DOM对象。插件：就是别人写好的一些代码，我们只需要复制对应的代码，就可以实现对应的效果。创造出一个新的网页元素，再添加到网页内，一般先创建节点，然后插入节点。

2025-01-05 19:39:29 1294

原创前端（API）学习笔记（CLASS 3）：Dom事件进阶

我们想要页面滚动一段距离，比如100px，就让某些元素显示或者隐藏，那我们怎么知道，页面滚动了100px，可以使用scroll来检测滚动的距离。给父元素注册事件，当我们触发子元素的时候，就会冒泡给父元素，从而触发父元素的事件。概念：当一个元素的事件被触发时，同样的事件将会再该元素的所有祖先元素中依次被触发，这一过程被称为事件冒泡。需求：用户点击全选，则下面复选框全部选择，取消全选则全部取消，并且若复选框都选，则全选键也选，否则不选。注意：获取的是可视宽高，如果盒子是隐藏的，获取的结果是0。

2025-01-04 22:14:10 909

原创前端（移动）学习笔记（CLASS 1）：平面转换、渐变

取值：方位名词（left、top、right、bottom、center）、像素单位数值、百分比。2、单独设置X或Y轴距离：translateX()或translateY()transform:translate(X轴移动距离，Y轴移动距离);取值：像素单位数值、百分比（参照盒子自身尺寸计算结果）、正负均可。1、通常，只为scale（）设置一个值，表示X轴和Y轴等比例缩放。1、translate() 只写一个值，表示沿着X轴移动。概念：改变盒子在平面内的形态（位移、选择、缩放、倾斜）

2024-12-21 21:19:08 314

原创前端学习笔记（CLASS 8）：定位、修饰属性

2、参照物：先找最近的已经定位的祖先元素，如果所有祖先元素都没有定位，参照浏览器可视区改变位置。2、也可以为all（两个状态属性值不同的所有属性，都产生过渡效果。优点：减少服务器被请求次数，减轻服务器的压力，提高网页加载速度。轻量级：体积小、渲染快、降低服务器请求次数。灵活性：灵活地修改样式，例如：尺寸、颜色。作用：设置定位元素的层级顺序，改变定位元素的显示顺序。属性有：left、right、top、bottom。作用：在网页中添加简单的、颜色单一的小图标。3、显示模式特点会改变，具备行内块的特点。

2024-12-20 22:56:32 847

原创前端（API）学习笔记（CLASS 2）：事件

事件监听：就是让程序检测是否有事件产生，一旦有事件触发，就立即调用一个函数做出响应，也称为绑定事件或者注册事件。例如，使用文本框时，点击文本框，将会出现光标，作为一个事件，而点击其他的位置将会失去文本框的光标，作为一个事件。环境对象：指的是函数内部特殊的变量this，它代表着当前函数运行时所处的环境。每个函数里的存在this环境对象，普通函数里面的this指向的是window。例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息。事件对象也是一个对象，这个对象里有事件触发时的相关信息。

2024-12-17 19:17:51 305

原创前端（API）学习笔记（CLASS 1）：DOM-获取元素

2024-12-16 22:04:54 772

原创前端（JavaScript）学习笔记（CLASS 5）：对象

声明对象，并添加了若干属性后，可以使用对象名.属性名获取对应属性的值，称为属性访问。JavaScript内部提供的对象，包含各种属性和方法给开发者调用。属性都是成对出现的，包括属性名和值，它们之间使用英文：隔开。可以理解为是一种无序的数据集合，注意数组是有序的数据集合。数据描述的信息称为属性，例如上个例子中的个人信息。对象中的属性没有键值对，不像数组里面有规律的下标。语法：直接再后面添加对象名.属性名=值。语法：delete 对象名.属性名。例如，用于描述一个人的对象。语法：对象名.属性名=新值。

2024-12-16 14:09:20 129

原创前端（JavaScript）学习笔记（CLASS 4）：函数

5、在JavaScript中，实参的个数和形参的个数可以不一致，如果形参过多，会自动填上underfined，如果实参过多，那么多余的实参会被忽略。如果形参不进行赋值，将会默认为underfined，若进行了数据运算，则会被默认为NaN，因此在声明函数时，可以给形参默认为0，程序更严谨。函数体：是函数的构成部分，它负责将相同或相似的代码“包裹”起来，直到函数调用时函数体内的代码才会被执行。通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。

2024-12-16 12:52:58 666

原创前端（JavaScript）学习笔记（CLASS 3）：for循环与数组

4、删除数组中数据：arr.pop() arr.shift() arr.splice(操作的下标，删除的个数)3、数组添加新的数据：arr.push(新增的内容) arr.unshift(新增的内容)数组.unshift(新增的内容)方法将一个或多个元素添加到数组的开头，并返回该数组的新长度。数组.push()方法将一个或多个元素添加到数组的末尾，并返回该数组的新长度。数组.shift()方法从数组中删除第一个元素，并返回该元素的值。数组.pop()方法从数组中删除最后一个元素，并返回该元素的值。

2024-12-12 22:13:34 226

原创前端（JavaScript）学习笔记（CLASS 2）：两种语句

众多的JavaScript的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符。已经学过的赋值运算符：= 将等号右边的值赋予左边，要求左边必须是一个容器。表达式：表达式是可以被求值的代码，JavaScript引擎会将其计算出一个结果。循环：重复执行一些操作，while循环就是在满足条件期间，重复执行某些代码。语句：语句是一段可以执行的代码，例如prompt()可以弹出一个输入框。其他的赋值运算符：+=、-=、*=、/=、%=有>,=,

2024-12-12 20:58:10 860

原创前端（JavaScript）学习笔记（CLASS 1）：JavaScript基础

JavaScript是一种运行在客户端（浏览器）的编程语言，实现人机交互效果作用：1、网页特性（监听用户的一些行为让网页作出对应的反馈）2、表单验证（针对表单数据的合法性进行判断）3、数据交互（获取后台数据，渲染到前端）4、服务端编程（node.js）JavaScript的组成JavaScript分为ECMAscript（JavaScript语言基础）和web APIs其中web APIs又分为DOM（页面文档对象模型）和BOM（浏览器对象模型）

2024-11-21 22:08:18 676

原创前端学习笔记（CLASS 6）：标准流、浮动、flex布局

浮动属性float，left表示左浮动，right表示右浮动特点：1、浮动后的盒子顶对齐2、浮动后的盒子具备行内块特点3、父级宽度不够，浮动的子级会换行4、浮动后的盒子脱标清除浮动：子级浮动，父级没有高度，子级无法撑开父级高度，影响布局效果1、双伪元素法拓展：浮动本质作用是实现图文混排效果。

2024-11-19 23:14:00 829

原创前端学习笔记（CLASS 5）：选择器、PxCook软件、盒子模型

必须设置content：“”属性，用来设置伪元素的内容，如果没有内容，则留引号留空即可。属性名：border-方位名词（bd+方位名词首字母，例如，bdl）场景：行内元素添加margin和padding，无法改变元素垂直位置。内减模式：box-sizing：border-box。场景：父子级的标签，子级的添加上外边距会产生塌陷问题。手动做减法：减掉border/padding的尺寸。属性名：padding/padding-方位名词。场景：垂直排列的兄弟元素，上下margin会合并。

2024-11-10 16:00:29 1049

原创前端学习笔记（CLASS 4）：CSS的特性

伪类选择器：伪类表示元素状态，选中元素的某个状态设置样式，例如鼠标滑过一行文字的时候，可以只写一个关键字，另一个方向默认为居中；选择器写法：选择器1，选择器2，...，选择器N{CSS属性}，选择器之间用，隔开。优先级：也叫权重，当一个标签使用了多种选择器时，属于不同种类的选择器的匹配规则。选择器写法：选择器1选择器2{CSS属性}，选择器之间连写，没有任何符号。选择器写法：父选择器子选择器{CSS属性}，父子选择器之间用空格隔开。选择器的写法：父选择器>子选择器{CSS属性}，父子之间用>隔开。

2024-11-10 00:52:40 1123

2301_81351468的博客