Demon_and_anger的博客

原创 完成表单嵌套

使用el-form-item里面套el-form-item。

原创 plus组件库选择器

在使用elemntplus组件库时，发现选择器el-select无法调整高度。虚拟选择器具有height属性和item-height属性。即可调整选项过多时高度影响。在组件库发现使用虚拟选择器就可以解决该问题。覆盖不生效，没有找到解决办法。

原创 webpack打包报错The ‘mode‘ option has not been set,

将 'mode' 选项设置为 'development' 或 'production' 以启用每个环境的默认值。'mode' 选项尚未设置，webpack 将针对此值回退到 'production'。您还可以将其设置为 'none' 以禁用任何默认行为。配置中的 WARNING。

原创 表单触发验证方式trigger的两种方式blur和change

备注：没有进行任何输入，不会触发change事件，一定会触发blur事件。change：数据改变时触发。blur：焦点失去时触发。

原创 vue3elementPlus组件库upload使用

before-upload="beforeupload" 上传文件之前的钩子，参数为上传的文件， 若返回。file-list / v-model:file-list 默认上传文件 UploadUserFile[]on-exceed="handleExceed"当超出限制时执行的方法。在这个钩子里面我们可以对上传文件的大小进行限制。show-file-list是否显示已上传文件列表默认true。limit="1":限制上传文件个数。允许上传文件的最大个数。且被 reject，则停止上传。

原创 FileReader对象详解

FileReader 是浏览器提供的 JavaScript API，用于异步读取用户计算机上的文件内容（如文本、图像等）。它是处理文件上传和预览的核心工具之一。

原创 formdata对象

formdata对象提供了一种简单方式来构造一组表示表单字段及其值的键值对，可以通过xmlhttprequest或fetch API发送这些数据。formdata是浏览器提供的WebAPI,用于构造表单数据格式的键值对，特别适合用于文件上传和表单数据提交。

原创 上传文件的使用

- 自定义上传 --><el-upload<el-button type="primary">点击上传</el-button>// 自定义上传逻辑// 参数解构// 上传文件对象 进度回调函数用于更新上传进度 成功回调函数 失败回调函数try {//创建formdata对象，浏览器提供的用于表单数据提交的api//将文件添加到表单数据中，字段名为file// 添加其他字段headers: {},});onSuccess('上传成功',res.data);

原创 检查更新时出错: 无法连接到 Internet。如果使用防火墙，请将 MicrosoftEdgeUpdate.exe 加入允许列表中。

Windows Defender 防火墙。无法连接到互联网，可能是由于。（需要管理员权限）。

原创 Vue i18n国际化

国际化：项目能够根据不同国家的语言进行翻译，进行切换，方便不同国家使用。

原创 element-plus安装

【代码】element-plus安装。

原创 报错 vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6. You may want to

此处应为vue的版本存在更新，需要先卸载vue cli2,然后重新安装vue cli 3。

原创 vue3组件库form表单的使用

表单组件中常见的表单项有输入框，单选框，多选框，下拉菜单，开关，时间选择器，上传，按钮等......：用于提交表单数据，需要指定一个回调函数，该函数在提交成功或失败时被调用。：用于触发表单验证，如果验证成功，执行回调函数并传递。字段作为输入项的容器，用于获取值与验证值。：用于重置表单数据和验证状态。：用于触发指定表单元素的验证。：用于清除表单验证状态。

原创 iframe的使用

iframe允许你在网页中嵌入其他独立页面或内容。用途广泛，需要注意潜在安全风险。通过合理使用sandbox属性(iframe的内容权限)，响应头，postMessage(实现安全跨域)等机制，你可以确保iframe的安全性。

原创 javascript数据类型以及判断数据类型

字符串（String）、数字(Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol 、bigint。：对象(Object)、数组(Array)、函数(Function)，还有两个特殊的对象：正则（RegExp）和日期（Date）。3.对象原型链判断方法：Object.prototype.tostring.call()4.构造器constructor。

原创 响应式布局

1.媒体查询概念：为不同尺寸的屏幕设置不同的 CSS 样式当屏幕符合时，会使用里面的样式，如果外部设置过，则会替换里面的样式，不同的样式会继承@media 常用参数2.flex弹性布局Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”。

原创 rem和em的区别

rem：指相对于根元素的字体大小的单位。em:指相对于父级的字体大小的单位。

原创 作用域和作用域链

当在Javascript中使用一个变量的时候，首先Javascript引擎会尝试在当前作用域下去寻找该变量，如果没找到，再到它的上层作用域寻找，以此类推直到找到该变量或是已经到了全局作用域。如果在全局作用域里仍然找不到该变量，它就会在全局范围内隐式声明该变量(非严格模式下)或是直接报错。Javascript中的作用域说的是变量的可访问性和可见性。：像Javascript中函数可以在一个函数内部声明另一个函数一样，作用域也可以嵌套在另一个作用域中。

原创 pinia底层实现原理

当你只使用 store 的状态而不调用任何 action 时，它会非常有用。它的第一个参数要求是一个独一无二的名字(也被用作id)，第二个参数可接受两类值：setup函数和option对象。与vue的组合式api的setup函数类似，我们可以传入一个函数，该函数定义一些响应式属性和方法，并且返回我们想暴露出去的属性和方法的对象。与vue选项式api类似，我们可以传入带有state，actions，getters属性的option对象。Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。

原创 闭包的使用

内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后。声明在一个函数中的函数，叫做闭包函数。

原创 grid布局

Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是。默认情况下，容器元素都是块级元素，但也可以设成行内元素(display:inline-grid)。grid布局：将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。关键字（fraction 的缩写，意为"片段"）。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是。有一定的相似性，都可以指定容器内部多个项目的位置。设为网格布局以后，容器子元素（项目）的。函数，简化重复的值。

原创 ref和reactive的区别

原始数据类型：null undefined boolean string number symbol bigint。ref和reactive都会让组件具有响应式，对变化作出反应。（最常见的是布尔值、字符串和数字）以及对象作为参数，而。函数可以替换整个对象实例，但是在使用。）时，会被解包，因此你不需要在那里写。函数只能接受对象作为参数。属性获取内容，但是使用。

原创 flex布局

传统布局,基于盒状模型，依赖于display+float+position。flex意为弹性布局。任何一个容器都可以指定为flex布局。属性一样的值（比如350px），则项目将占据固定空间。webkit内核浏览器，必须加上—webkit前缀。采用flex布局的元素，称为flex容器，简称。所有子元素为容器成员成为flex项目，简称。注意：设为 Flex 布局以后，子元素的。指定段落的左侧或右侧不允许浮动的元素。行内元素也可以使用flex布局。项目也就是子容器也有六个属性。flex布局的容器有六个属性。

原创 html5新特性

原创 事件冒泡和事件委托

利用了事件冒泡的特性。当事件在 DOM 树中的某个元素上触发时，该事件会沿着DOM树向上传播，直至根节点。因此，当我们将事件处理程序绑定到父元素上时，父元素可以代理处理子元素上的事件，这就是事件委托的原理。鼠标点击、鼠标移动、鼠标滚动、按下键盘，浏览器窗口大小的改变，网页加载完成，关闭网页等等都会发生事件。事件流被分为三个阶段(1~ 5)捕获过程、(5~ 6)事件触发过程、(6~ 10)冒泡过程。如果它的父级元素也有某个事件函数，当执行完它的事件函数后，也就会执行它父级的事件函数。

原创 hash模式和history模式区别

原创 watch 和computer区别

2、computed支持缓存，当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值；watch不支持缓存，当对应属性发生变化的时候，响应执行。3、computed不支持异步，有异步操作时无法监听数据变化；watch是监听，监听data中的数据变化。watch默认第一次加载时不监听。监听的属性是对象的话 不开启deep 对象子属性变化不会触发watch。数据变化响应，执行异步操作，或高性能消耗的操作，watch为最佳选择。watch：一个数据影响多条数据，如：搜索数据。

原创 原型和原型链

当访问一个对象的属性时，先在对象的本身找，找不到就去对象的原型上找，如果还是找不到，就去对象的原型（原型也是对象，也有它自己的原型）的原型上找，如此继续，直到找到为止，或者查找到最顶层的原型对象中也没有找到，就结束查找，返回。每一个对象从被创建开始就和另一个对象关联，从另一个对象上继承其属性，这个。

原创 改变this指向三种方法

bind()使用参数列表 函数被借用时，不会立即执行，而是返回一个新的函数。需要自己手动调用新的函数来改变this指向。apply() 使用参数数组 函数被借用时，会立即执行，并且函数体内的this会指向借用者或调用者。call() 使用参数列表 函数被借用时，会立即执行，并且函数体内的this会指向借用者或调用者。

原创 深拷贝和浅拷贝

浅拷贝是按位拷贝对象，它会创建一个新对象，这个对象有着原始对象属性值的一份精确拷贝。一个对象赋值给一个新的变量时，赋的其实是该对象的在栈中的地址，而不是堆中的数据。也就是两个对象指向的是同一个存储空间，无论哪个对象发生改变，其实都是改变的存储空间的内容，因此，两个对象是联动的。但是 Object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象，是“值”而不是“引用”（不是分支）

原创 css选择器优先级

例如，#id{margin:0;}会覆盖.classname{margin:3pxl}如.classname{margin:3px}会覆盖div{margin:6px;如div{marigin:6px;}覆盖*{margin:10px；它会覆盖页面内任何位置定义的元素样式。ie6不支持该属性。第一优先级：无条件优先的属性只需要在属性后面使用。一个或多个类型选择器（标签选择器），如*{marigin:6px;类选择器、属性选择器、伪类选择器。第三优先级：由一个或多个。第四优先级：由一个或多个。

原创 HTTP 与 HTTPS 区别

原创 http状态码

当浏览者访问一个网页时，浏览者的浏览器会向网页所在服务器发出请求。当浏览器接收并显示网页前，此网页所在的服务器会返回一个包含 HTTP 状态码的信息头（server header）用以响应浏览器的请求。服务器无法根据客户端的请求找到资源（网页）。通过此代码，网站设计人员可设置"您所请求的资源无法找到"的个性页面。服务器成功处理，但未返回内容。在未更新网页的情况下，可确保浏览器继续显示当前文档。充当网关或代理的服务器，未及时从远端服务器获取请求。客户端请求的语法错误，服务器无法理解。请求要求用户的身份认证。

原创 const let var 三者区别

在javascript中 var const let 都是用于声明变量的关键字。3.重复声明：var 在同一作用域内重复声明变量，后续会覆盖之前的声明。const let 存在暂时性死区 即变量在声明前不可以使用。const let 不允许在同一作用域内重复声明同一个变量。5.全局对象: var 声明的变量可以成为全局对象的属性。const let 不存在变量提升，必须先声明后使用。const let 声明的变量不会成为全局对象的属性。2.变量提升：var存在变量提升，可以先声明后使用。

原创 script标签中defer属性和async属性

当浏览器遇到带有 defer 属性的 script 时，获取该脚本的网络请求也是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器不会暂停解析并执行 JS 代码，而是等待 HTML 解析完毕再执行 JS 代码。请求该脚本的网络请求是异步的，不会阻塞浏览器解析 HTML，一旦网络请求回来之后，如果此时 HTML 还没有解析完，浏览器会暂停解析，先让 JS 引擎执行代码，执行完毕后再进行解析。时，浏览器会在解析见面时过程中异步加载下载该脚本，立即执行。

原创 纯css画三角形

使用 border属性画三角形。

原创 判断对象是一个空对象

2.使用es6新增的方法object.keys()1.使用json.stringify()方法。

原创 javascript中的new操作符原理

2.设置原型链 obj.__proto__=构造函数.prototype。3.绑定this 并执行构造函数。1.创建一个空对象 obj。

原创 解决fetch-pack: unexpected disconnect while reading sideband packet fatal: early EOF fatal: fetch-pack

在克隆仓库或者拉取代码的时候出现类似如下错误：主要是因为仓库内容比较大，或者仓库中有比较大的文件，由于 http 协议 或者 传输数据大小限制导致的，可以通过设置如下参数解决：

原创 解决：git SSL certificate problem: unable to get local issuer certificate

问题描述：执行命令的时候，出现“SSL certificate problem：* * * ”报错，一般在执行“git push”（推送分支）或者“git clone”（克隆仓库）时出现。原因是因为SSL安全验证问题，不能获取到本地的证书。2.验证：执行命令 “git config --global --list”，“http.sslverify = false”表示成功。3.解决完毕：可以正常执行“git push”（推送分支）或者“git clone”（克隆仓库）啦！