- 博客(48)
- 收藏
- 关注
RSS订阅原创 [小知识] v-model 的原理 和 .sync修饰符
<!-- v-model 双向绑定指令就是一个语法糖, 本质上做了两件事情 --> <!-- 1. 给子组件绑定一个 value 属性, 对应一个变量 --> <!-- 2. 给子组件绑定一个 input 事件, 在事件处理函数中给变量赋值 --> <!-- .sync 修饰符 可以绑定多个 --> <!-- 由于 v-model 只能在组件或标签上设置一次, 如果需要有多个变量双...
2022-05-06 08:52:29
354
原创 【小知识】删除分页最后一个不跳转的bug
处理删除分页的问题 最后一页只有一个元素时,删除页面不跳转 if (this.roles.length === 1 && this.pageParams.page > 1) {this.pageParams.page--}
2022-05-05 18:16:24
285
原创 [小知识] 处理异常的方法
// 处理异常: // 所有异步操作原则上来讲都需要处理异常 // 方案1: try - catch (需要嵌套一层) // try { // const result = await this.$confirm('确定删除该角色吗?', '提示', { // type: 'warning' // }) // console.log(result) // confirm //...
2022-05-05 17:41:10
324
原创 一文搞懂跨域的所有问题
前言:目前很多应用开发都是多客户端的，前端调用后端提供的 API 来获取数据，很多都是前后端分离的架构，但这样相比之前的单应用系统会带来跨域的问题。一、 什么是跨域?当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域. 跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器JavaScript实施的安全限制。 这里说明一下，无法跨域是浏览器对于用户安全的考虑，如果自己写个没有同源策略的浏览器，完全不用考虑跨域问题了。是浏览器的锅。...
2022-04-29 20:12:26
315
原创 less 和 scss 的 优缺点
简述sass和less都是css的预编译处理语言，他们引入了mixins，参数，嵌套规则，运算，颜色，名字空间，作用域，JavaScript赋值等 加快了css开发效率,当然这两者都可以配合gulp和grunt等前端构建工具使用 sass和less主要区别:在于实现方式 less是基于JavaScript的在客户端处理，引入less.js就可以处理，sass是基于ruby所以在服务器处理。less优点可以在浏览器中运行，实现主题定制功能；less缺点编程能力弱，不直接支持对象，循环，判
2022-04-27 21:09:34
6335
原创 常见的开源协议有哪些
开源软件(Open source software)的源代码对有追求的程序员来说是一无尽的宝藏，此外正确的使用开源软件，可以提高开发软件时的效率、提升软件质量。但是在使用和借鉴开源软件的时候，我们不得不关心一下它对使用者的诸多限制，比较常见的方式即协议授权(licence)，这些协议中明确说明了使用者应该遵循的原则现在开源协议众多，大概有50多种，下面只对几种常见协议做介绍。1 BSD开源协议BSD开源协议是一个给于使用者很大自由的协议。基本上使用者可以”为所欲为”,可以自由的使用，修改.
2022-04-27 20:47:44
1650
原创 常见的前端编辑器,除了VSCODE 你还了解过哪些
前言后端程序员们常常会争论“什么是最好的语言”，而对于前端来说，我们没有选择，无论爱与恨，我们只能选择 JavaScript 。所以前端日常的争论就变成了“什么是最好的框架”以及“什么是最好的编辑器” 。所谓工欲善其事，必先利其器。对于前端来说，编辑器是除了chrome浏览器以外，每天打开时间最长的软件。选择一款功能强大又趁手的工具，可以让开发效率提升，达到事半功倍的效果。 所以 前端常用的编辑器,你知道哪些???代码编辑器主要分两种：IDE（集成开发环境）和轻量编辑器。ID.
2022-04-27 20:39:31
3666
原创 文件上传有两种格式，你都清楚吗
用户进行文件上传的时候，img的src只能设置成BASE64 或 URL ，所以有两种方案转成BASE64 或 URL方案1 将文件 转成 BASE64 代码如下首先 获取用户选择的文件const file = e.target.files[0]if(file){1 创建对象const fr = newFileReader()2 读文件fr.readAsDataURL(file)3 获取结果fr.onload = e =>{4 设置给img的 srcthis.cov
2022-04-25 10:34:31
694
原创 Vuex 中 modules 的大总结 你都会了吗?
// 为什么要使用 modules 来分子模块?// 如果不分子模块, 后期业务量大了之后, 所有的数据都要放到全局 state 中存储, 所有的 state 都有配套的 mutations / actions / getters, 维护起来难度太大// 划分子模块后, 每个模块都可以把自己的数据放到其中, 配套的 mutations 等都可以独立在自己模块内, 方便后期维护// 在中大型项目中一定会分子模块!// 如何划分子模块?// 1. 定义子模块 -> 创建一个对...
2022-04-19 09:28:23
407
原创 vue生命周期总共分为几个阶段？（必会）
1 什么是vue的生命周期vue实例 创建到销毁的过程.2.Vue-钩子函数2.1 Vue-钩子函数是什么? Vue 框架内置函数，随着组件的生命周期阶段，自动执行. 通过钩子函数 知道vue生命周期到达了哪个阶段2.2Vue-钩子函数作用是? 特定的时间点，执行特定的操作2.3Vue-钩子函数 的分类 4大阶段8个方法 初始化 挂载 更新 销毁3.Vue-初始化阶段1 ...
2022-04-19 08:58:40
2513
原创 vue 脚手架
学习Vue的三点好处是什么?开发更快速, 更高效企业开发都在使用前端工程师必备技能, 高薪Vue 是什么?渐进式javacript框架, 一套拥有自己规则的语法官网地址: https://cn.vuejs.org/ (作者: 尤雨溪)库: 封装的属性或方法 (例jQuery)框架: 拥有自己的语法规则和元素, 比库强大的多 (例Vue)@vue/cli脚手架脚手架是为了保证各施工过程顺利进行而搭设的工作平台代码里体现: 一套固定标准文件夹+文件+webpack配置代好处:开箱
2022-04-17 19:33:34
425
原创 vue-router（路由）详细教程
由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，实际上就是组件的切换。路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。 有的小伙伴会有疑虑，为什么我们不能像原来一样直接用a标签编写链接呢？因为我们一般用Vue做的都是.
2022-04-17 18:03:36
1028
原创 全网最详细的 git 教程
git基础：1 什么是git?Git 是一个开源的分布式版本控制系统，是目前世界上最先进、最流行的版本控制系统。可以快速高效地处理从很小到非常大的项目版本管理。特点：项目越大越复杂，协同开发者越多，越能体现出 Git 的高性能和高可用性！2 Git 中的三个区域 工作区 处理工作的区域 暂存区 已完成的工作的临时存放区域，等待被提 Git 仓库 最终的存放区域3 Git 中的文件三种状态已修改 ...
2022-03-30 20:47:00
200
原创 node.js (自定义模块 和内置模块)
Node中的模块分类：自定义模块：用户自己创建的每个JS文件，都是自定义模块 内置模块（核心模块）：Node安装后，即可使用的模块，Node环境自带。 第三方模块：其他人或公司、组织开发的模块，发布到 npm 网站，我们需要下载使用的模块Node.js可以做什么：基于 Express/Koa 框架(http://www.expressjs.com.cn/)，可以快速构建 Web 应用 基于 Electron 框架(https://electronjs.org/)， 可以构建跨平台的桌面..
2022-03-30 20:41:47
1737
原创 npm 介绍 及 require加载机制 ( 高薪必会 )
npm （node package manager），直译为 Node包管理器:这里的模块，指第三方模块所以，npm是管理第三方模块的工具下载安装模块 卸载模块 发布自己的模块 ……第三方模块 ( 本地模块和全局模块 )本地模块下载和安装:npm初始化 下载第三方模块之前，必须先初始化 npm init -y 下载第三方模块 npm install 模块名 模块名 模块名 …… npm i 模块名 模块名 模块名 …… 卸载模块 npm uninstall
2022-03-30 20:09:00
895
原创 Ajax 详解 网页从输入url到渲染的流程 同步 异步 你想要的全都有
#1 前后端交互流程 了解服务器 了解前端 了解什么是ajax 前后端交互的三个流程 提供某种服务器的机器(计算机)##了解前端 访问 服务器的几种方式直接在地址栏输入网址 网页会跳转 全局刷新 a标签的herf属性 网页会跳转 全局刷新 location.herf= 'url' 网页会跳转 ...
2022-03-18 20:28:45
1127
1
原创 都2022年了，再不学ES6你就out了 —— 一篇文章搞懂ES6
var let ： 1. ES5声明变量 varvar 1 会预解析 2 没有块级作用域2.ES6声明变量 let constlet1 不会预解析 2 有块级作用域let const 的区别：let 是变量 可以修改 const 是常量 不能修改 **实际开发过程中,只要不修改的话就用常量,需要改的时候用let对象数组解构：解构赋值 : 变量赋值的简写(解构的精髓:当变量名和属性名一致的时候只需要写一个)取出对象的属性,赋值给变量 语法 let {对象...
2022-03-14 16:50:10
259
1
原创 面试必问 this指向 和 闭包 以及递归函数 你都知道吗?
浅拷贝和深拷贝：浅拷贝: 拷贝的是地址,修改拷贝后的数据之前的数据也会变化 深拷贝: 拷贝的是数据,修改拷贝后的数据之前的数据不会发生变化深拷贝有两种实现方法:推荐使用json转换方法 ~ 先把js对象转成json格式字符串 json.stringify(js对象) ...
2022-03-11 20:00:05
1018
原创 js 购物车价格筛选的4种方式
第一种方式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title
2022-03-09 22:03:30
795
原创 JS三座大山之原型链 (附原型链的应用)
面向对象的三个特征：1 封装 把代码放到对象的方法中2 继承 一个对象 拥有另一个对象的所有成员3 多态 一个对象在不同情况下不同状态原型继承：继承 : 一个对象 拥有 另一个对象 所有的 成员原型继承 把父元素 作为子对象构造函数 的原型原型链：什么是原型链? 每一个函数都有原型,而原型也是对象,也会有自己的原型,依次类推形成链式结构,称之为原型链对象访问原型链的规则: 就近原则 对象先访问自己的，自己没有就找原型的，原型没有就找原型的原型，一直..
2022-03-09 21:44:06
793
原创 看这一篇就够了 原型对象
# 面向对象 是一种注重结果的思维方式.``````面向对象的本质是面向过程的封装## 内置对象``````数组对象arr.concat() 拼接数组应用场景: 一般用于长列表(下一页),不断往后拼接数组arr.reverse() 翻转数组应用场景: 价格从高到低,从低到高,翻转数组即可arr.join() 分隔符应用场景: 有些歌曲多人唱的,服务器会给我们一个数组,这个时候需要我们用分隔符拼接起来在页面展示arr.sort(function(a,b){return.
2022-03-09 14:29:44
37
原创 常用正则表达式合集,这一篇就够了,记得点赞收藏哟
量词量词的作用:检查字符串出现的次数? 出现零次或一次(最多出现一次 <=1)* 出现零次或多次(任意次)+ 出现一次或多次(至少出现一次 >=1){n} 出现n次{n,m} 出现n到m次{n,}
2022-03-06 20:53:33
449
原创 网页特效的三大家族
offset家族 获取‘元素自身’真实宽高与位置offsetWidth / offsetHeight . 自身宽度 width padding borderoffsetLeft / offsetTop 自身左.上边框到定位父元素自身左.上边框距离scroll家族 获取元素内容,真实宽高与位置scrollWidth /scrollHeight . 元素内容宽高scrollLeft / scrollTop 滚动条左/上滚动的距离应用: 固定导航回到顶部 设置页面scrollTop 为
2022-03-06 14:56:11
75
原创 BOM的五个对象 和 存储对象
1 window:浏览器窗口特点:js中的顶级对象,所有的全局函数和全局对象都是window的成员.window的成员使用时可以省略windowwindow对象方法 打开窗口 window.open()关闭窗口 window.close()window对象事件 window.onload() dom树 +外部资源 加载完毕window.onbeforeunload() 页面关闭前2 location 浏览器地址栏跳转网页 location.herf = 'url' (属...
2022-03-06 14:55:41
119
原创 事件冒泡原理
dom中注册事件有两种语法点语法 事件源.事件类型 = 事件处理函数点语法 不能注册同名事件 后者覆盖前者addEventListener 能注册 多个 同名事件语法 事件源.addEventListener( ' 事件类型 ' ,事件处理函数)移除事件点语法移除事件 事件源.事件类型 = nullremoveEventListener语法移除事件 事件源.removeEventListener( ' 事件类型 ' ,事件处理函数)阻止默认事件1.默认事件:在htm1中，.
2022-03-02 21:30:39
473
原创 节点 及 倒计时你会写吗
网页内容由节点(node)组成 元素节点, 属性节点, 文本节点, 注释dom 节点操作语法重点 元素节点定时器 一段代码 间隔时间 重复执行定时器 语法 ( 回掉函数,)**如果一个函数的参数是函数,这个参数函数叫 回调函数另外一个是 ( number )类型,间隔时间 单位毫秒ms 1s =1000ms永久定时器 setInterval 一旦开启永久重复执行,只能手动开启 let timeID = setInterval(function () {}, 间
2022-03-01 20:46:24
99
原创 排他思想 开关思想 Attribute语法 你都知道吗
排他思想 多个元素 只能选中一个style方式用循环排他 一 循环干掉所有兄弟 二 复活自己 <body> <button>按钮1</button> <button>按钮2</button> <button>按钮3</button> <button>按钮4</button> <button>按钮5</button></body>..
2022-02-28 13:40:18
115
原创 关于 webAPI 你不知道的事
首先,小伙伴知道什么是webAPI吗?wep就是DOM(页面的内容) + BOM(浏览器窗口)api 就是js预先定义的 函数,webapi就是; 操作DOM(页面的内容) + BOM(浏览器窗口)的函数我们获取页面内容------通过DOM来获取, 那么问题来了DOM是什么???DOM就是浏览器提供的一套专门用来 动态操作网页内容 的API(函数)DOM 的工作流程, 代码会被读取到内存中 然后生成DOM树(DOM语法增删改查, 渲染也会改变), 再渲染引擎,渲染DOM树,呈...
2022-02-26 21:45:15
261
原创 ( 敲重点 ) 值类型与引用类型, 你知道吗?
js数据类型有很多种,分为两大类 1.值类型(简单数据类型string boolean number undefined null) : 栈中存储数据,赋值拷贝的是数据,修改拷贝后的数据对原数据没有影响. 2.引用类型(复杂数据类型 array function object) : 栈中存储地址,堆中存储数据。赋值拷贝的是地址,修改拷贝后的数据对原数据有影响...
2022-02-24 20:43:23
119
原创 对象(object)
1.对象介绍对象是一种复杂的数据类型, 是一种无序的数据类型 对象的作用:以键对值的方式存储多个数据对象和数组的异同点:相同点: 都是复杂的数据类型不同点: 数组 是有序存储对象 是无序存储 (键对值)2 对象语法1 声明对象 let 对象名 ={属性名 : 属性值 ,属性名 : 属性值}2 取值语法 对象名.属性名3 ***细节: 对象中的属性值是什么类型,取出来的时候就可以使用这个类型的所有语法 如，对象的属性值是 数组， 则可以： 对象...
2022-02-24 20:41:26
1165
原创 需求：写一个函数，可以求任意数组的 最大值 或 最小值
第一个参数: 数组 第二个参数:布尔类型 true:最大值 false:最小值方法1function getNum(arr, bol) { let num = arr[0] for(let i = 0;i<arr.length;i++){ if( bol ? arr[i] > num : arr[i] < num ){ num = arr[i] } ...
2022-02-23 20:34:54
1926
原创 函数语法和作用域
1 函数介绍2 函数传参2.1 函数语法: 函数是一种用于储存代码块的复杂数据类型作用:解决代码复用的问题.2.2 声明函数: 声明函数只是把代码封装起来,不会执行函数代码体.function 函数名(){函数体代码: 需要存储的一段代码}2.3 调用函数 : 执行函数代码体(函数不调用,代码体不执行)函数名()2.4 函数参数:调用者 传递数据 函数函数默认参数(自己在开发中使用不多 ,后面了解 很多js框架函数默认参数底层原理)函数默认参数 使用 逻辑运算
2022-02-23 20:24:59
186
原创 程序三大流程控制语句,你都知道吗?
什么是流程控制：所谓流程控制就是指“程序怎么执行”或者说“程序执行的顺序” 以前我们写的代码，写几句就从上往下执行几句，这种叫顺序结构 有的时候要根据条件选择执行代码，这种就叫分支结构 某段代码被重复执行，就叫循环结构 1 流程控制-分支语句1.1 语句与表达式表达式 : 由运算符组成的式子,一定会有运算结果(运算数据)语句: 让编译器去做一件事 (执行功能) 例如 分支语句 循环语句1. if单分支结构 一个条件语法: if...
2022-02-20 20:05:42
2019
原创 数据类型的转换,不会的小伙伴看过来
为什么要数据转换?编写程序时过度依靠系统内部的隐式转换是不严禁的，因为隐式转换规律并不清晰，大多是靠经验总结的规律。 为了避免因隐式转换带来的问题，通常根逻辑需要对数据进行显示转换。通俗来讲就是 , 因为数据类型不一样, 得不到自己预想的数据.1. 隐式转换隐式转换 ： 当运算符两边的 ‘数据类型不一致’ 的时候，编译器会转成一致后运算(1)转换数字 ： 算术运算符 + - * / %(2)转换字符串 ： 连接符+ (+号两边只要有一边是字符串，此时+就是连接符)(3)转换布尔:
2022-02-20 19:39:11
456
原创 js基础知识（变量和运算符与表达式）
1 js入门JavaScript是运行在浏览器编程语言js三要素：ECMAscript DOM BOMjs的书写位置（3种）行内式内联式外链式js的两种注释方式1 单行注释 // 快捷键 ctrl+/2 块注释 /* */ 快捷键 shift+alt+ajs的输入与输出// 1 弹出一个提示框 alert('你好') // 控制台打印 co...
2022-02-19 19:36:11
680
原创 Bootstrap
Bootstrap 是由 Twitter 公司开发维护的前端 UI 框架，它提供了大量编写好的 CSS 样式，允许开发者结合一定 HTML 结构及JavaScript，快速编写功能完善的网页及常见交互效果。中文官网: Bootstrap中文网现在有更好用的框架 Element 和vant下载安装包。开发中，我们都是按需导入，简单理解，需要用到啥，我们复制那个文件，没有必要都放入，提高性能。使用步骤 1. 引入： BootStrap提供的CSS代码 <li...
2022-02-17 21:03:25
350
原创 媒体查询~~~~~
做响应式页面就需要使用媒体查询,1 那媒体查询是什么呢?1. 媒体指的就是各种设备 (移动设备, PC设备)2. 查询指的是要检测属于哪种设备3. 媒体查询: 通过查询当前属于哪种设备, 让网页能够在不同的设备下正常的预览.媒体查询能够检测视口的宽度，然后编写差异化的 CSS 样式 当某个条件成立, 执行对应的CSS样式2 媒体查询的语法?body { background-color: gray;}/* 大于等于768px 为粉色 */@medi.
2022-02-17 20:45:05
125
原创 移动适配 ( VW )
1 vwvw就是视口的宽度，vw 是个相对单位。不管在什么屏幕下， 我们把屏幕分为平均的 100等份。1vw = 1 / 100 屏幕的宽度1vw 和 1%widith: 1vw;width: 1%;vw 和 1% 有没有区别： vw 永远是以视口的宽度为准。· 在 375设计稿下， 1vw 永远是 3.75px 百分比以父盒子为准。 假如父盒子是 200px，则 1% 是 2px 2width: (68 / 3.75vw);height: (29 .
2022-02-16 21:50:45
1422
原创 移动适配方案
1 适配方案移动端的适配方案： flex + rem单位 做适配效果 （比如淘宝和小米移动端） flex + vw/vh单位 做适配效果 （比如 B站移动端 ） 让flex做布局（盒子摆放），让rem或者vw/vh 实现网页元素的尺寸（宽度和高度）适配屏幕2 rem 适配2.1 rem 单位rem 是一个相对单位，1rem 就是 html 文字的大小html { font-size: 35px;}则此时 1rem 就是 35像素。2.2...
2022-02-14 20:12:25
638
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人