恩予哥哥-优快云博客

原创隐藏元素的方法

将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。：使用元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。：渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。：通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。：元素在页面中仍占据空间，但是不会响应绑定的监听事件。

2025-05-07 11:11:38 200

原创吃透行内元素和块级元素的区别和转换

元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；会独占一行，多个元素会另起一行，可以设置width、height、margin和padding属性；将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内。可以设置水平方向的margin和padding属性，不能设置垂直方向的padding和margin；设置margin和padding都有效；

2025-05-07 11:06:37 195

原创 css中盒模型有哪些

在标准盒模型中，元素的width和height只包括内容区域，不包括内边距、边框、外边距。也就是元素的实际宽高是内容区域加上内边距、边框、外边距。例如：一个元素的宽度设置为100px，内边距为10px，边框为5px，那么该元素的实际宽度将是130px（100 + 10*，在怪异盒模型中，内容区域会比在标准盒模型中小，因为内边距和边框也被包含在内。在怪异模式下，一个块的总宽度等于。属性不仅包括内容区域，还包括内边距和边框，但不包括外边距。这意味着，如果你设置了相同的。怪异盒模型与标准盒模型不同，它的。

2025-05-01 08:39:51 391

原创 webpack 中常用的loader和plugin

在 Webpack 中，loader 和 plugin 都是用于扩展其功能的机制，但它们的作用和使用方式有所不同。loader 用于将不同类型的文件转换为 Webpack 能够处理的模块。例如，将 CSS 文件转换为 JavaScript 模块，或者将图片文件转换为数据 URL。loader 本质上是一个函数，它接收文件内容作为输入，并返回转换后的结果。常见的 loader 包括 babel-loader、css-loader、file-loader 等。

2024-07-24 19:02:13 1212

原创 react 的条件渲染

可以在 JSX 中使用普通的 JavaScript `if`/`else` 语句来进行条件渲染。在 React 中，还可以使用逻辑 `&&` 运算符进行简单的条件渲染。另一种常见的方式是使用 JavaScript 中的三元运算符来进行条件渲染。有时需要更复杂的条件逻辑，可以使用条件运算符 (`?##### 使用 if/else 语句。##### 使用三元运算符。##### 使用条件运算符。使用逻辑 && 运算符。

2024-07-10 10:28:12 450

原创 vue路由传参和react 路由传参

1、声明式导航 <router-link to="导航的地址">2、编程式导航编程式导航有三种方法来进行导航。

2024-06-28 20:28:20 953

原创前端存储都有哪些

html5 提供的一种浏览器本地存储的方法，它借鉴了服务端session的概念，代表的是一次会话中所保存的数据。它一般能够存储5M或者更大的数据，它在当前窗口关闭后就失效了，并且sessionStorange只能被同一个窗口的同源页面所访问共享。它和sessionStorange不同的是，除非手动删除它，否则它不会失效，并且localStorage也只能被同源页面所访问共享。它的优点有缩短网页请求资源的距离，减少延迟、节省流量，由于缓存文件可以重复利用，减少服务器的压力，提高客户端的响应。

2024-06-28 19:17:57 620

原创 vue 的内置指令

1、v-bind:用于动态地绑定一个或多个属性。可以简写为2、：根据表达式的值条件性地渲染元素。3、：在v-if上使用，表示条件不满足时显示的内容。4、：根据表达式的值条件性地显示元素，通过 CSS 的 display 属性来控制元素的显示和隐藏。5、：基于源数据多次渲染元素或模板块。6、：绑定事件监听器，用来监听 DOM 事件。可以简写为。7、：在表单元素上创建双向数据绑定。8、：跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。9、：这个指令保持在元素上直到关联实例结束编译。

2024-06-26 09:36:47 582

原创 vue 中computed和watch的区别

但是vue提供了一种immediate的属性，开启初次加载时执行，还有一个开启深度监听的属性deep（开启深度监听，监听的引用类型的数据，即对象的子属性发生变化，就会触发watch）。computed的计算属性它支持缓存，只有当依赖项发生改变的时候，它才会重新计算，否则它用的就是缓存的值。watch不支持缓存，当被监听的数据发生变化的时候，watch 才会执行。computed是一个属性受到多个属性的影响，用的最多的就是购物车，watch 一个数据影响多条数据，如搜索，高性能的消耗操作，watch为最佳。

2024-06-25 15:55:16 467

原创盒模型的分类

盒模型分为标准和模型和IE盒模型在标准盒模型中，元素的总宽度和高度由内容区域（content）、内边距（padding）、边框（border）和外边距（margin）共同组成。

2024-06-24 21:21:08 240

原创 vue3 ref与reactive的区别

refref主要用于创建对基本类型（如字符串、数字、布尔值等）的响应式引用，同时也可以用于包装对象，使其变得响应式。ref返回一个包含单一值的响应式对象，这个对象有一个.value属性来存储实际值。: 当你需要处理简单的基本类型或希望明确表示某个值是一个响应式引用时，使用ref。reactive用于创建响应式对象，包括嵌套的对象和数组。reactive返回一个响应式代理对象，你可以像普通对象一样直接操作它。: 当你需要处理复杂的对象结构，包括嵌套对象和数组时，使用reactive。

2024-06-21 14:17:49 727

原创深拷贝VS浅拷贝 ,合并对象

深拷贝是将一个对象从内存中完整的拷贝一份出来。从堆内存中开辟一个新的区域存放新的对象(新旧对象不共享同一块内存)，且修改新对象不会影响到原来的对象。(深拷贝是在堆内存申请新的空间来存储数据，避免指针悬挂)

2024-06-16 11:45:46 707 4

原创正则的介绍

d：匹配任意一个数字字符，相当于[0-9]。\D：匹配任意一个非数字字符，相当于[^0-9]。\w：匹配任意一个字母、数字或下划线字符，相当于。\W：匹配任意一个非字母、数字或下划线字符，相当于。\s：匹配任意一个空白字符，包括空格、制表符、换行符等。\S：匹配任意一个非空白字符。

2024-06-16 09:44:11 604

原创字符串常用的方法

将一个或多个字符串与原字符串连接合并，形成一个新的字符串。返回字符串中最后一次出现指定值的索引，如果未找到则返回。返回字符串中第一次出现指定值的索引，如果未找到则返回。从字符串中提取从指定位置开始的指定数目的字符。提取字符串的某个部分，并返回新的字符串。通过指定的分隔符将字符串分割成数组。提取字符串中两个指定索引之间的字符。判断字符串是否包含指定的子字符串。使用正则表达式与字符串相比较。返回字符串中指定位置的字符。替换字符串中匹配的子字符串。移除字符串两端的空白字符。将字符串转换为小写。

2024-06-16 09:22:52 406

原创 vue2和vue 3 的响应式原理

在 Vue 3 中，响应式系统的核心是使用了 ES6 的对象来实现对数据的拦截和响应式更新。在上面的代码中，对象定义了两个拦截器方法：和。这两个方法分别用于拦截属性的读取和设置操作。方法在属性被访问时触发。它接收三个参数：目标对象（）、属性名（）和代理对象（）。在方法中，你可以执行一些操作，比如追踪依赖（），然后返回属性的值。方法在属性被设置时触发。它接收四个参数：目标对象（）、属性名（）、新值（）和代理对象（）。在方法中，你可以执行一些操作，比如触发依赖更新（），然后返回一个布

2024-06-15 12:30:52 1393

原创从输入URL到页面加载完中间发生了什么？

浏览器根据接收到的响应内容，对页面进行渲染。：浏览器向服务器发送一个 HTTP 请求，请求中包含了要获取的资源的信息，如请求方法（GET、POST 等）、路径、请求头、请求体等。：服务器处理完请求后，生成一个包含要返回给浏览器的资源的 HTTP 响应。：浏览器会解析新的 URL，并将其拆分为不同的组成部分，包括协议（例如 http://）、域名、路径、查询参数等。：浏览器接收到服务器返回的响应，包括状态码、响应头和响应体等内容。：最终，浏览器将渲染好的页面显示给用户，并开始处理用户的交互事件。

2024-06-14 11:59:47 304

原创神奇的promise 和async await

promise是用于处理异步操作的一种机制。它有三种状态Pending(等待中)、Fulfilled(已成功)、一旦 Promise 进入 Fulfilled 或 Rejected 状态，它就不再改变状态，这种特性称为“不可变性”。这意味着一个 Promise 只能成功或失败一次。then()方法第一个参数是resolve回调函数，第二个参数是可选的是reject状态回调.then() 返回一个新的promise实例，可以采用链式编程。

2024-06-12 20:59:13 758

原创常用Object的方法

方法用来判断两个值是否相等，它接收两个参数，分别是需要比较的两个值。Object.is中的NaN与NaN是相等的。同时Object.is也不会强制转换两边的值的类型，Object.is与===的区别主要体现在+0和-0以及对NaN的比较上。

2024-06-12 20:17:14 917

原创前端路由的介绍

是用于实现页面间导航的一种技术，在不重新加载整个页面的情况下，通过改变地址栏的URL来更新内容。前端路由通常用于单页应用中，为用户提供更流畅的体验。

2024-06-12 17:38:29 797

原创 vite 和webpack 的区别

Vite 以其快速的开发服务器启动和热模块替换而著称，特别适合现代前端项目。Webpack 则以其强大的插件系统和广泛的社区支持而闻名，适合需要高度定制的项目。选择哪一个取决于你的项目需求、团队偏好以及对构建速度和配置复杂性的容忍度。对于大型项目，Webpack 通常是一个更稳妥的选择，因为它拥有成熟的生态系统和丰富的插件支持，可以满足复杂项目的需求。Webpack 的高度可定制性使得它能够适应各种大型项目的构建需求，包括但不限于代码分割、代码优化、静态资源处理等。

2024-06-11 20:03:11 887

原创 js的数据类型以及数据类型的判断

在ECMAScript中有5中简单数据类型(基本数据类型) 分别是 Undefined, Null,Boolean,Number,String。在es6中引入了一个新基本数据类型是symbol。还有复杂数据类型(引用类型) Object,本质上是由一组无序键值对组成的， Object, Array, function。

2024-06-11 19:48:46 693

原创对数字的几种处理操作

静态方法解析参数并返回浮点数。如果无法从参数中解析出一个数字，则返回。静态方法解析一个字符串参数并返回一个指定基数的整数。不会尝试将参数转换为数字，因此非数字总是返回。方法使用定点表示法来格式化该数值。，如果输入不是数字类型，则返回。静态方法判断传入的值是否为。

2024-06-11 16:56:32 416

原创常用的math 方法

静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。静态方法总是向上舍入，并返回大于等于给定数字的最小整数。该示例返回一个在指定值之间的随机数。函数返回作为输入参数的数字中最小的一个，如果没有参数，则返回。函数总是返回小于等于一个给定数字的最大整数。函数返回作为输入参数的最大数字，如果没有参数，则返回 -方法会将数字的小数部分去掉，只保留整数部分。函数返回一个数字的绝对值。函数返回一个数字四舍五入后最接近的整数。的向上取整数），且小于（但不等于）

2024-06-11 16:51:00 691

原创 splice()、slice()、split()三种方法的区别

/ ["ant", "bison", "camel", "duck", "elephant","dog"] 如果不传截取的数目，就是对原数组的拷贝。// ["bison", "camel", "duck", "elephant"] 从下标1开始截取，到下标5结束，不包含5。// myFish 是 ["parrot", "anemone", "blue", "trumpet", "sturgeon"]// myFish 是 ["angel", "clown", "drum", "sturgeon"]

2024-06-10 21:36:58 1135

增删改查的部分代码了解一下

JavaScript 算法题

react hooks的简单介绍

mockjs的使用案例

node koa express

gitte仓库的操作步骤

vue经常使用的组件通信的方法

空空如也