web前端基础
关注
分享
扫一扫
文章平均质量分 79
随机复习，巩固前端基础知识
Chen_Devin
每周一到两篇知识积累分享；
每月一篇月度实战工作总结；
前端的精彩 ， 是你我同在；
展开
-
ref，reactive& toRaw
ref，reactive,isRef,isReactive原创 2023-02-02 18:40:34 · 609 阅读 · 0 评论 -
js,css加载异步
js 异步 async defer当浏览器碰到 script 脚本的时候：<script src="script.js"></script>没有 defer 或 async，浏览器会立即加载并执行指定的脚本，“立即”指的是在渲染该 script 标签之下的文档元素之前，也就是说不等待后续载入的文档元素，读到就加载并执行。<script defer src="myscript.js"></script> 有 defer，加载后续文档元素的过程将和原创 2021-05-07 18:46:57 · 379 阅读 · 0 评论 -
对象与数组深拷贝
引用数据类型数据复制： 引用数据类型也就是对象类型Object type，比如：Object 、Array 、Function 、Data等。 javascript的引用数据类型是保存在堆内存中的对象。 与其他语言的不同是，你不可以直接访问堆内存空间中的位置和操作堆内存空间。只能操作对象在栈内存中的引用地址。 所以，引用类型数据在栈内存中保存的实际上是对象在堆内存中的引用地址。通过这个引用地址可以快速查找到保存中堆内存中的对象。对象复制json方法JSON对象的深度克隆。方原创 2020-12-25 09:25:21 · 141 阅读 · 0 评论 -
default-first-option无需配合filterable或remote
<el-select v-model="value" ref="selectRef" @visible-change="visibleChange('selectRef')" placeholder="请选择"> <el-option v-for="item in options" :key="item.value" :label="item.label" :value="...原创 2020-07-02 14:04:16 · 3292 阅读 · 0 评论 -
js基础之-语法，数据类型
### js基础#### 语法：JavaScript严格区分大小写，如果弄错了大小写，程序将报错或者运行不正常。JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{...}。但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。js代码行末自动添加分号机制：return ， break...原创 2020-04-28 09:13:56 · 199 阅读 · 0 评论 -
详解DOM节点及属性API
DOM节点目录DOM节点HTML DOM 节点树节点父、子和同胞节点节点类型节点设置与获取children 与 childNodesnextSibling 与nextElementSiblingpreviousSibling 与 previousElementSiblingfirstChild 与firstElementChildlast...原创 2020-01-09 08:54:39 · 506 阅读 · 0 评论 -
2019年12月前端工作实战整理
目录目录目录js常见的排序方法冒泡排序选择排序插入排序前段常见的循环方法for 循环while循环Do-while 循环Jquery $.each() 循环两个关键字： break, continueinnerHTML ，innerText，textContent对比innerHTMLinnerTexttextContent...原创 2020-01-06 09:10:30 · 303 阅读 · 0 评论 -
SVN代码合并流程记录
业务中有对代码进行SVN合并，故记录流程分享：在分支（需要合并的分支或者主干）目录下，右键选择tortoiseSVN - 合并选项，弹出弹窗； 分支合并到主干或者主干合并到分支时，都是选择第一个：“合并一个版本范围”； 只有当两个不同功能的分支（一个分支往另一个分支）合并时才选择第二个选项：“合并两个不同的树”。点击下一步； 合并的源选择主干路径（另一个需要合并的路径）； 合并的版本...原创 2020-01-07 15:19:28 · 1949 阅读 · 0 评论 -
innerHTML ，innerText与textContent对比
innerHTML ，innerText，textContent对比 innerHTML innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。语法： HTMLElementObject.innerHTML=text<body> <div> <span> <spa...原创 2020-01-02 09:03:55 · 531 阅读 · 0 评论 -
js设置，获取，删除属性(setAttribute, getAttribute, removeAttribute)
设置，获取，删除属性setAttribute()setAttribute() 方法添加指定的属性，并为其赋指定的值。如果这个指定的属性已存在，则仅设置/更改值。 getAttribute() getAttribute() 方法返回指定属性名的属性值。 removeAttribute() removeAttribute() 方法删除指定的属性。<body&g...原创 2019-12-31 14:39:11 · 3041 阅读 · 0 评论 -
js常见的循环方法（for, while, do-while, $.each）
前段常见的循环方法for 循环 var arrayOne = [5, 8, 6, 4, 3, 1, 2, 9, 7]; for (var i = 0; i < arrayOne.length; i++) { console.log("当前的索引为：" + i); console.log("当前索引的值为：" + arrayOne[...原创 2019-12-28 15:24:42 · 379 阅读 · 0 评论 -
element UI select下拉选项位置问题
element UI select下拉选项位置问题在使用elementUI下拉选项时，可能存在下拉时下拉列表选项框的位置距离下拉框所在的位置距离过大，这个是由于elementUI自己设置的根据下拉框位置定位，而他可能是根据position:absolute;来进行定位的,而我们要在全局设置他的 position:fixed !important;即可。(注意使用!important增加权重)...原创 2019-04-12 09:44:23 · 18238 阅读 · 2 评论 -
正则表达式总结
正则表达式(Regular Expression)正则表达式基本概念正则表达式：使用单个字符串来描述、匹配一系列符合某个句法规则的字符串搜索模式。什么是正则表达式：正则表达式描述了字符的模式对象。当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。简单的模式可以是一个单独的字符。更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。您可以规...翻译 2019-04-24 10:51:52 · 396 阅读 · 0 评论 -
数组的操作方法大全
数组的操作方法数组的查询includes函数，函数的参数为查找的值，如果数组中有被查找的值，则函数输出“true”var movePos=[11,22];movePos.includes(11)//truemovePos.includes(33)//falseindexOf函数，方法arr.indexOf(find,start);find:要找的内容，必须；start:查找开始下...翻译 2019-07-19 16:19:52 · 1207 阅读 · 0 评论 -
面试实战问题解答（3）
面试问题解答vue传值汇总父子传值：父组件： 在引用子组件的时候输入 ：传值名称="传递数值"子组件： 在javaScript中 poprs:['传值名称']中央事件总线传值：首先建立事件bus，我会新建一个bus.js文件；注册bus。分别在组件中使用emit和on实现数据之间的通信；发送方： Bus.$emit('传值名称',传值数值,传递数值) //注意：此处可...原创 2019-07-29 23:52:08 · 289 阅读 · 1 评论 -
模块化开发AMD与CMD
模块化开发什么是模块化将一个复杂的程序依据一定的规则(规范)封装成几个块(文件), 并进行组合在一起块的内部数据与实现是私有的, 只是向外部暴露一些接口(方法)与外部其它模块通信为什么需要模块化应用越大那么代码也越复杂模块化利于解耦，降低复杂性和提高可维护性应用部署可以优化代码，减少 http 请求（避免多模块文件造成的多请求）。代码量比较大，可能会有几个人同时写一个页面，同样写...翻译 2019-08-01 21:34:17 · 313 阅读 · 0 评论 -
vue锚链接scrollBehavior
vue锚链接scrollBehavior通常后台管理系统开发中我们很少会对页面回退或前进进行操作，但在浏览器用户界面上提供有前进、回退按钮。根据浏览器的原理。页面跳转到离开页面之前的位置，而不是重新刷新页面，而在很多时候，我们的数据会发生变化或者需求是重新刷新页面，这个时候，就需要我们自己设置返回跳转。方法一： 使用导航守卫：``` router.beforeEach((to, ...原创 2019-04-18 18:24:26 · 303 阅读 · 0 评论 -
浅谈session,cookie,token,webStorage区别
浅谈session,cookie,token,webStorage区别了解session,cookie,token与webStorage1：sessionsession的中文翻译是“会话”，当用户打开某个web应用时，便与web服务器产生一次session。服务器使用session把用户的信息临时保存在了服务器上，用户离开网站后session会被销毁。这种用户信息存储方式相对cookie来说...翻译 2019-04-27 15:11:23 · 325 阅读 · 0 评论 -
js运算符详解
运算符逻辑运算符 && || !&&从左向右寻找转布尔为false的值，找到返回这个值，找不到返回最后一个值。注意：返回的结果不一定是true或false||从左向右寻找转布尔为true的值，找到返回这个值，找不到返回最后一个值。注意：返回的结果不一定是true或false!一个!可对数据取反两个!求数据布尔值注意：返回值...翻译 2019-04-15 20:19:05 · 389 阅读 · 0 评论 -
http与https详解
HTTP和HTTPSHTTP协议通常承载于TCP协议之上，在HTTP和TCP之间添加一个安全协议层（SSL或TSL），这个时候，就成了我们常说的HTTPS默认HTTP的端口号为80，HTTPS的端口号为443为什么HTTPS安全• 因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因...翻译 2019-04-12 12:05:32 · 357 阅读 · 0 评论 -
http状态码及其含义及常见状态码
http状态码及其含义简单版[ 100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息 200 OK 正常返回信息 201 Created 请求成功并且服务器创建了新的资源 202 Accepted 服务器已接受请求，但尚未处理 ...转载 2019-04-12 11:40:27 · 513 阅读 · 0 评论 -
element UI 组件默认传参和自定义传参的解决方法
element UI 组件默认传参和自定义传参的解决方法如下代码 <div v-for="(item,index) in object.cooperationDepartmentNumber"> <div class="entrustingPartyList"> <el-row> ...原创 2019-04-12 09:45:56 · 7134 阅读 · 0 评论 -
ES6基本入门学习
es6变量的结构赋值解构基本用法ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构（Destructuring）。以前，为变量赋值，只能直接指定值。``` let a = 1; let b = 2; let c = 3; ES6 允许写成下面这样。 let [a, b, c] = [1, 2, 3];```上面代码表示，可以从数组中提取值，...翻译 2019-04-11 14:54:15 · 175 阅读 · 0 评论 -
web前端数据类型详解
数据类型数据类型JavaScript 拥有动态类型：字符串、数字、布尔、数组、对象、Null、UndefinedECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。typeoftypeof 运算符有一个参数，即要检查的变量或值。例如：``` var sTemp = "test st...原创 2019-04-11 14:50:33 · 5074 阅读 · 0 评论 -
GIT管理工具命令使用
版本管理工具版本管理工具分为集中式和分布式：集中式版本控制系统：版本库是集中存放在中央服务器的，而干活的时候，用的都是自己的电脑，所以要先从中央服务器取得最新的版本，然后开始干活，干完活了，再把自己的活推送给中央服务器。中央服务器就好比是一个图书馆，你要改一本书，必须先从图书馆借出来，然后回到家自己改，改完了，再放回图书馆。 集中式版本控制系统最大的毛病就是必须联网才能工作，如果在局域网内还...原创 2019-04-11 14:45:38 · 214 阅读 · 1 评论 -
CDN内容分发网络原理解读
CDN的全称是Content Delivery Network，即内容分发网络其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节，使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目...原创 2019-04-11 14:43:33 · 719 阅读 · 0 评论 -
面向对象与面向过程
面向对象与面向过程优缺点面向对象缺点通常比面向过程消耗内存，因为有很多实例要存储前期开发比较缓慢，但是复用性强，后期开发与维护进度会逐渐加快优点变量的管理比较清晰，可读性较高因为代码与对象间的职责比较清晰，所以后期可维护性和可扩展性也比较高复用性更强面向过程缺点变量混乱，可读性较差通常有新需求出现，代码改动比较大，所以可维护性和可扩展性比较差优点...转载 2019-04-15 20:34:59 · 131 阅读 · 0 评论 -
Web前端作用域详解
作用域概念变量的有效范围。全局变量在全局都有效的变量。定义方式：函数外定义。生命周期：从定义开始，到页面被卸载结束。局部变量只在局部有效的变量。定义方式：函数内定义。生命周期：一般情况下，是从定义开始，到函数执行完毕结束。函数作用域只有函数才可以产生新的作用域只有函数可以限定变量的有效范围块级作用域 ==> js没有凡是代码块就可以产生新的作用...翻译 2019-04-15 20:58:23 · 2746 阅读 · 0 评论 -
jQuery选择器整理集合
jQuery选择器所有选择器获取的对象均为包装集，需通过[index]或get(index)获取，jQuery内部有隐式迭代，通过$.each()实现基本选择器id选择器$(#id) 选中对应id的标签类名选择器$(.className) 选中对应类名的标签，获得为多个标签选择器$(tagName) 选中对应标签名的标签，获得为多个交集选择器$(tagName....翻译 2019-04-12 18:53:05 · 390 阅读 · 0 评论 -
动态增加和删除对象的属性
对象动态增加和删除属性在实际项目过程中，难免要对对象属性进行操作。特别是动态添加和删除对象属性，增加对象的属性用push来动态拼接。``` for(let i=0;i<this.reimMachineInvoice.length;i++){ for(let j=0;j<this.reimMachineInvoice[i].reimMachineI...原创 2019-04-17 18:17:37 · 4093 阅读 · 0 评论 -
npm运行报错operation not permitted
在使用npm下载axios时。报以下错误× Install fail! Error: EPERM: operation not permitted, symlink 'D:\yiduo\program\BlockADM\blockAdm\node_modules\_follow-redirects@1.7.0@follow-redirects' -> 'D:\yiduo\program\...原创 2019-04-26 16:20:35 · 2364 阅读 · 0 评论 -
npm 和node版本更新
#### npm 和node版本更新##### npm 版本更新查看当前版本：npm -v更新npm版本：npm install -g npm#### node 版本更新下载你想要的版本或者最新的版本，node.js官网下载 下载完成后点击安装，傻瓜式安装，什么都不用变； 安装完成，输入 node -v 查看当前安装版本...原创 2019-04-22 11:58:27 · 1771 阅读 · 0 评论 -
hexo博客搭建及github备份全记录
#hexo使用介绍Hexo是1个工具,可以快速的将markdown文件转换为一个博客网站.Hexo官网台湾人开发. 有比较详尽的中文文档.hexo是基于nodejs开发的一个工具.1. 简单使用使用npm工具全局安装hexo环境npm install hexo-cli -gcli --commandline 命令行. ping npmgui 图形界面....翻译 2019-04-16 20:54:20 · 619 阅读 · 0 评论 -
npm发包流程及注意事项
npm发包由于工作需要，发布一个npm包供我们使用发布npm 包的过程实际上就是把你本地的node 项目上传，供自己或者别人使用的过程。所以发布操作包含以下三个部分：本地创建node 项目编写代码、申请npm 账号、本地进行发布。创建项目vue init webpack project-name此命令创建我们的项目的目录，创建文件夹和文件，目录结构如下：安装element-ui和...原创 2019-04-13 10:03:39 · 2055 阅读 · 0 评论 -
移动web开发rem,em及像素知识详解
基础知识移动设备与PC设备最大的差异在于屏幕，这主要体现在屏幕尺寸和屏幕分辨率两个方面。通常我们所指的屏幕尺寸，实际上指的是屏幕对角线的长度（一般用英寸来度量）分辨率则一般用像素来度量，表示屏幕水平和垂直方向的像素数，长度单位web开发中可以使用px(像素),em，rem,pt(点),in(英寸),cm(厘米)作为长度单位，但是我们最常用的还会px作为长度单位em: 相对长度单...原创 2019-04-13 09:53:22 · 451 阅读 · 0 评论 -
jQuery动画功能集合
动画所有speed参数均可传入字符串或是数字，对应slow=600，normal=400，fast=200，不传或是传入字符串不对则默认normal(show及hide方法例外)。如果为number类型，则表示动画的持续时间毫秒值。所有的动画都可带回调函数，当动画结束时调用。隐藏和显示、切换show()无参数 此时表示显示对象，注意无动画效果，相当于css(“display”,"bl...翻译 2019-04-13 09:48:28 · 120 阅读 · 0 评论 -
jQuery动态创建元素
动态创建元素创建方式使用$(“这是一个a标签”)html() 不传参数则获取标签内容，传参数为设置内容，同innerHtml。添加元素方法append()与appendTo() 同appendChild()方法，调用举例： $parentNode.append($node)同$node.appendTo($parentNode) 同parentNode.appendCh...翻译 2019-04-13 09:43:08 · 1238 阅读 · 0 评论 -
ajax请求原理分析
浏览器输入url发生了什么DNS域名解析在浏览器DNS缓存中搜索在操作系统DNS缓存中搜索查找系统host文件看是否有对应IP路由器缓存搜索向本地首选DNS服务器发送域名解析请求建立TCP连接三次握手发送端首先发送一个带SYN（synchronize）标志的数据包给接收方，接收方收到后，回传一个带有SYN/ACK(acknowledegment)标志的数据包以示传达确认信...原创 2019-04-11 14:26:17 · 1675 阅读 · 1 评论