06 2023 档案
摘要：知识点：token存储、路由守卫拦截、请求拦截 一、前端存储token 存储到状态管理中==》为了做变量判断 存储到cookie中==》设定过期时间 二、请求拦截 发送请求，获取个人信息，前端需要带有token，后端则返回需要的信息 需要单独的封装一个请求类，将token封装进去 三、路由守卫拦截
阅读全文
摘要：前端项目开发流程通常包括以下几个步骤： 1. 需求分析和规划：与项目团队一起明确项目的需求和目标，确定项目的功能和设计要求。 2. UI/UX设计：根据需求分析和规划的结果，进行用户界面和用户体验设计。这包括设计页面布局、色彩搭配、图标等。 3. 前端开发：根据UI/UX设计，使用HTML、CSS和
阅读全文
摘要：存储：uni.setStorage({key:“属性名”，data:“值”})接收：uni.getStorage({key:“属性名”,success(e){e.data//这就是你想要取的token}})
阅读全文
摘要：1、应用程序的生命周期方法：定义在根组件app.vue中 onLaunch() 应用程序启动onShow() 应用程序显示onHide() 应用程序隐藏 2、页面的生命周期方法--仿微信小程序 onLoad() 页面挂载完成onShow() 页面被显示onReady() 页面可以交互onHide()
阅读全文
摘要：笔记一地址：https://www.cnblogs.com/echoyya/p/14427845.html 笔记二地址：https://www.cnblogs.com/echoyya/p/14429616.html 参考地址:https://www.cnblogs.com/jun-qi/p/1177
阅读全文
摘要：①建立组件的模板，先把架子搭起来，写写样式，考虑好组件的基本逻辑 ②准备好组件的数据输入。即分析好逻辑，定好props里的数据、类型 ③准备好组件的数据输出。即根据组件逻辑，做好要暴露出来的方法 ④封装完毕了，直接调用即可
阅读全文
摘要：1、了解搜索引擎如何抓取网页和如何索引网页。 2、Meta标签优化。 3、如何选取关键词并在网页中放置关键词。 4、了解主要的搜索引擎。 5、主要的互联网目录 6、按点击付费的搜索引擎。 7、搜索引擎登录。 8、链接交换和链接广泛度（Link Popularity）。 9、标签的合理使用:标签的语义
阅读全文
摘要：一、登录权限控制 实现哪些页面能被未登录的用户访问，哪些页面只有用户登录后才能被访问 1、实现： 在路由对象中以添加meta的方式去实现登录页面权限控制 需要登录才能显示的页面设置meta.need_login属性 export const routes = [ { path: '/login',
阅读全文
摘要：参考地址：vue管理系统权限管理（从后端到前端整个流程） - 掘金 (juejin.cn)
阅读全文
摘要：1、模块化【代码逻辑角度划分】 用于保证每个模块的只能单一 比如药品管理，就是一个模块，包含了列 表，添加，修改，删除； 2、组件化【UI界面角度划分】 页面上的每个独立区域，都可作为一个组件，便于组件复用 3、区别 划分角度不同 4、为什么要使用模块化和组件化 开发和调试的效率更高 可维护性强 避
阅读全文
摘要：XSS：Cross Site Scripting【跨站脚本攻击】 一、概念 黑客向HTML文件或者DOM中添加恶意脚本 从而在用户浏览页面时利用插入的恶意代码，对用户实施攻击 二、分类 存储型XSS攻击 黑客向存在漏洞的服务器插入一段恶意JavaScript代码 当用户向服务器请求资源的时候就会请求
阅读全文
摘要：1. 首先应该考虑使用https协议，因为http协议是不安全的，一般来说购买服务器的时候厂商都会送 免费的https 的ssl证书，只需要在nginx配置就可以了。 2. 接口应该开启加密，分为对称加密和非对称加密 3. 对称加密：客户端和服务端使用同一个秘钥 4. 非对称加密： 5. 数据验签，
阅读全文
摘要：1、401状态码的含义 axios向服务器端发送请求时，服务器端有些api接口要求传递token，token失效或没有传递，就会报401错误 服务端要求传递token信息，而实际发送请求时没有传递。 发送请求时有传递token到达服务器端，但由于时间比较久，这个token在服务器中已经过期了(服务器
阅读全文
摘要：有的系统为了安全性会要求用户多长时间不操作的时候退出到登录页面 实现这个功能的时候是 我们是由前端实现的，接下来看一下我们是怎么实现的 1、实现的思路： 是记录用户操作的最后一次时间， 还有再次操作的时间， 后面的时间戳减去前面一次的时间戳，如果换算出来的时间内大于三十分钟，则退出到登录页面即可 2
阅读全文
摘要：一、前端缓存分类【http缓存|浏览器缓存】 1、http缓存分类：强缓存 协商缓存 都是服务端设置 HTTP Header 来实现的 （1）强缓存 不需要发送请求到服务端，直接读取浏览器本地缓存 // 在 Chrome 的 Network 中显示的 HTTP 状态码是 200 在 Chrome 中
阅读全文
摘要：1、创建Storage类 定义 对应的get set remove clear api 通过set函数添加过期时间参数来实现过期时间的记录 设置存储时存储当前值和过期时间 get取值的时候先验证当前值是否存在 以及时间是否大于过期时间 如果存在且不大于过期时间既可返回对应的值否则返回空 class
阅读全文
摘要：1、回流重绘的概念 回流：当Render Tree中部分或全部元素的尺寸、结构、或某些属性发生改变时，浏览器重新渲染部分或全部文档的过程 重绘：当页面中元素样式的改变并不影响它在文档流中的位置时，浏览器会将新样式赋予给元素并重新绘制它的过程 浏览器使用流式布局模型 (Flow Based Layou
阅读全文
摘要：1. js 中的声明 声明就是 变量的声明和函数的声明, 其目的是让 js 解释引擎知道有什么东西. 声明时不参与运算的, 是不参与执行的, 是在预解析阶段就完成的. 变量的声明 // 变量的声明就是 var 变量名. var num = 123; // 这是一个语法糖,可以理解成 var num;
阅读全文
摘要：// 1泛型的定义 // 泛型：在软件工程中，我们不仅要创建一致的定义良好的api，同时也要考虑可重用性。组件不仅能够支持当前的数据类型，还能支持未来的数据类型 // 在C#和Java这种语言中，可使用泛型来创建可重用的组件，一个组件支持多种类型的数据 // 2泛型函数 // T表示泛型，具体什么类
阅读全文
摘要：接口的作用：在面向对象编程中，接口是一种规范的定义，它定义行为和动作的规范。 在程序设计里面，接口起到一定的限制和规范作用。接口定义某一些类所遵守的规范，接口不关心这些类的内部状态数据，也不关心类里面方法的实现细节 它只规定这批类中必须提供某些方法，提供的这些方法就可以满足某些需求。 ts的接口同时
阅读全文
摘要：// 01.抽象类是提供其他类继承的基类，不能直接被实例化 // 02.用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类中实现 // 03.abstract抽象方法只能在抽象类中 // 04.抽象类和抽象方法用来定义标准：例如，要求Animal类的子类必
阅读全文
摘要：// 父类定义一个方法不去实现，让继承它的子类去实现，每一个子类有不同的表现多态属于继承 class Animal{ name:string constructor(name:string){ this.name = name } eat(){ console.log('吃的方法') } } cla
阅读全文
摘要：//1. function Person1(name,age){ this.name='zhangsan' this.age=20 this.run = function(){ alert('yundong') } } Person.prototype.sex = '男' Person.protot
阅读全文
摘要：1. ts函数定义 // es5函数声明 function run3(){ return 'run' } // es5匿名函数 var run4 = function(){ return 'run' } // ts函数声明 function run5():string{ return 'run' }
阅读全文
摘要：1.js有的类型 boolean类型、number类型、string类型、array类型、undefined、null 2.ts多出的类型 tuple类型（元组类型）、enum类型（枚举类型）、any类型（任意类型） 3.特别的类型 void类型（没有任何类型）表示定义方法没有返回值 never类型
阅读全文
摘要：一、使用Array.apply let arr= Array.apply(null, { length: 10 }).map((item,index)=>{ return index; }); console.log(arr); //(10) [0, 1, 2, 3, 4, 5, 6, 7, 8,
阅读全文
摘要：1、思路：定义一个新数组，并存放原数组的第一个元素，然后将元素组一一和新数组的元素对比，若不同则存放在新数组中 function unique(arr) { let newArr = [arr[0]]; for (let i = 1; i < arr.length; i++) { let repea
阅读全文
摘要：触发钩子的完整顺序： 将路由导航、keep-alive、和组件生命周期钩子结合起来的，触发顺序，假设是从a组件离开，第一次进入b组件： 1. beforeRouteLeave:路由组件的组件离开路由前钩子，可取消路由离开。 2. beforeEach: 路由全局前置守卫，可用于登录验证、全局路由lo
阅读全文
摘要：这个时候可以用this.$set(),给新添加的对象属性，或数组元素添加getter，setter方法 简单说即是：当你发现你给对象加了一个属性，在控制台能打印出来，但是却没有更新到视图上时，也 许这个时候就需要用到this.$set()这个方法了 methods:{ btn(){ Vue.set(
阅读全文
摘要：代码层面的优化 v-if 和 v-show 区分使用场景 computed 和 watch 区分使用场景 v-for 遍历必须为 item 添加 key，且避免同时使用 v-if 长列表性能优化 事件的销毁 图片资源懒加载 路由懒加载 第三方插件的按需引入 优化无限列表性能 服务端渲染 SSR or
阅读全文
摘要：因为JavaScript的特性所导致，在component中，data必须是以函数的形式存在，不可以是对象。 简单来说，就是为了保证组件的独立性和可复用性，如果 data 是个函数的话，每复用一次组件就会返回新的 data，类似于给每个组件实例创建一个私有的数据空间，保护各自的数据互不影响 若单纯的
阅读全文
摘要：父级 prop 的更新会向下流动到子组件中，但是反过来则不行，防止从子组件意外改变父级组件的状态 每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值 子组件想修改时，只能通过$emit 派发一个自定义事件，父组件接收到后，由父组件修改
阅读全文
摘要：【能够将开发代码转换为生产代码的工具称为构建工具】 webpack：是前端模块化方案，侧重模块打包。可以使用NPM打包 把开发中所有资源都看成模块，通过配置 loader 和 插件对资源进行处理。实现团队开发项目目录的统一 其他构建工具： Gulp：调前端开发的流程，需要进行很多配置。适合打包一些轻
阅读全文
摘要：它的功能是把对应的字符串解析成 JS 代码并运行； 应该避免使用 eval，不安全，非常耗性能（2次，一次解析成 js 语句，一次执行） eval("x=10;y=20;document.write(x*y)"); document.write("<br>" + eval("2+2")); docu
阅读全文
摘要：1、Map是键值对，Set是值得集合，当然键和值可以是任何得值 2、Map可以通过get方法获取值，而Set不能因为它只有值 3、都能通过迭代器进行for...of 遍历 4、Set的值是唯一的可以做数组去重，而Map由于没有格式限制，可以做数据存储
阅读全文
摘要：1、forEach 更多的用来遍历数组 2、for in 一般常用来遍历对象或json【循环出的是key】 3、for of 数组对象都可以遍历，遍历对象需要通过和Object.keys()【循环出的是value】
阅读全文
摘要：数组提供的API可以 sort() 属于算法的题 常见的排序算法：冒泡排序、快速排序、二分法... //冒泡排序 var arr = [23, 9, 78, 6, 45] for (var i = 0; i < arr.length - 1; i++) { // console.log(i) //
阅读全文
摘要：var a = [1, 2, 3, 1, 2, 3, 1, 1, 4, 4, 5, 4, 5, 2] // function unique(arr) { // var newArr = [] // arr.forEach((item) => { // // 新数组中是否含有该元素 // if (ne
阅读全文
摘要：JS中常用的类数组：arguments、dom操作中获取到一组节点元素 类数组也是数组的一种，将元素放入到了数组中，也是通过下标访问元素，也有length属性，但是类数 组中没有数组的API var aList = document.getElementsByTagName('li') // 转为数
阅读全文
摘要：1、普通函数中 指向window对象，严格模式下为undefined 2、对象中 指向调用函数的对象 3、构造函数和类中 配合new使用，new关键字将构造函数中的this指向实例对象 4、绑定事件函数 指向调用函数的对象 5、定时器中 指向window对象，因为定时器中采用回调函数作为处理函数，回
阅读全文
摘要：1、箭头函数更加简洁。 2、箭头函数没有自己的this,只会在自己作用域的上一层继承this 3、箭头函数继承来的this 指向永远不会变，使用call() | apply() | bind() 等方法不能改变 4、箭头函数不能作为构造函数使用，没有自己的arguments | prototype
阅读全文
摘要：varletconst 变量提升 √ × × 重复声明（同作用域） √ × × 赋初值 × × √ 变量 全局 局部 局部 var 声明的变量有变量提升的特性，而 let、const 没有 var 声明的变量会挂载到 windows 对象上，所以使用 var 声明的是全局变量，而 let 和 con
阅读全文
摘要：（1）ES5 // 构造函数 function Person(name) { this.name = name } // 原型 Person.prototype.say = function () { console.log('我是' + this.name) } // 子类构造函数继承父类构造函数
阅读全文
摘要：现在浏览器的缓存中查找是否存在 DNS解析，找到服务器 浏览器和WEB服务器建立连接：三次连接 建立连接后，客户端向服务端发送请求 服务器端收到请求，处理请求，将响应信息发送给客户端 客户端和服务器端断开连接：四次挥手 客户端解析响应的消息，最后渲染成一张网页
阅读全文
摘要：一、意外的全局变量 由于使用了未声明的变量，以外的创建了一个全局变量，此变量一直留在内存中无法被回收 二、被遗忘的计时器或者回调函数 设置了setInterval定时器，忘记取消。若循环函数又对外部变量的引用，此变量会一直留在内存，无法回收 三、脱离DOM的引用 获取了一个DOM元素的引用，而后面这
阅读全文
摘要：1）函数对象——就是平时称的对象； 2）实例对象——new出的对象或者{ }； 3）原型对象——所有的函数对象都有一定有一个对应的原型对象，所有的原型对象都是被Object函数对象创建出来的 所有的函数对象中都有一个名字叫prototype的引用类型变量，该引用类型变量是函数对象的成员，它的值是对应
阅读全文
摘要：一、概念 new 能创建一个实例对象; 这个对象是给定的构造函数 function Person(name, age){ this.name = name; this.age = age; console.log(this) // Person { name: 'Tom', age: 20 } }
阅读全文
摘要：（1）浅拷贝【新旧对象共享同一块内存】 let a = { age: 1 } let b = a a.age = 2 console.log(b.age) // 2 》如果给一个变量赋值一个对象，那么两者的值会是同 一个引用，其中一方改变，另一方也会相应改变 创建新对象 基本类型：拷贝基本类型的值
阅读全文
摘要：一、圣杯布局 圣杯布局需要将中间栏放在前面优先渲染 圣杯布局利用浮动、负边距、相对定位来实现 父元素 container 设置左右 padding 空出左右两栏位置。 三栏均设置向左浮动，中间栏设置 width: 100%; ，即与父元素宽度一样，将左右两栏挤到下面。 设置 margin 属性为负值
阅读全文
摘要：盒模型都是由四个部分组成的，分别是margin、border、padding和content 标准盒模型和IE盒模型的区别在于设置width和height时，所对应的范围不同： 标准盒模型：width = content + padding + border + margin IE盒模型：width
阅读全文
摘要：二者都是从父元素的子元素中匹配，或者说从同级兄弟元素中匹配，区别是主要是匹配规则不同； element:nth-child（n） 选中父元素的第几个子元素 , 计数时与元素的类型无关 是先根据 n 匹配规则，在此基础上匹配 element； 首先找到所有当前元素的兄弟元素，然后按照位置先后顺序从1开
阅读全文
摘要：（1）相邻两个盒子垂直方向上的margin会发生重叠，只会取比较大的margin （2）父盒子中给子盒子设置了上边距会出现在父盒子上方 解决： 设置padding代替margin 设置float 设置overflow 设置position：absolute 绝对定位 设置display： inlin
阅读全文
摘要：即开发者对浏览器的默认样式设置 原因： 浏览器兼容问题 为了提高编码的质量，减少代码体积
阅读全文
摘要：（1）src 指向的内容嵌入到文档当前标签所在位置。 （2）href 表示超文本引用，建立当前元素和文档之间的链接，并行进行
阅读全文
摘要：JS定时器动画 window.setTimeout() window.setInterval():指定某个任务每隔一段时间就执行一次，也就是无限次的定时执行 <h3>用setTimeout实现计数器功能</h3> <div id="result">0</div> <button onclick="s
阅读全文
摘要：BOM：浏览器对象模型==》 用来获取或设置浏览器的属性、行为。 例如：新建窗口、获取屏幕分辨率、浏览器版本号等 DOM ：文档对象模型==》用来获取或设置文档中标签的属性。 例如：获取或者设置input表单的value值
阅读全文
摘要：1.使用display: none; 隐藏dom；隐藏后不占位 2.使用visibility: hidden; 隐藏dom；隐藏后占位 3.使用z-index: -888; 把元素的层级调为负数，然后其他元素覆盖即可； 4.使用opacity: 0; 把元素的透明度调为0，也可以达到隐藏； 5.使用
阅读全文
摘要：（1）pt|px|em|rem pt（点）:绝对长度单位。常用与印刷中1pt=1/72英寸 px（像素）：相对长度单位。相对于显示器分辨率而言。 em：相对长度单位。相对于当前对象内文本的字体尺寸。【若父级使用了，且设置了文本大小，父级大小随文本改变，继承父级元素的字体大小】 rem:CSS3新增相
阅读全文
摘要：理论上最小的单位是1px 一、最优方法：transforms属性缩放 <!DOCType html> <html> <head> <meta charset="utf-8"> <style> .hr { width: 300px; background-color: #000; } .scale-h
阅读全文
摘要：一、border 二、llinear-gradient .triangle { width: 160px; height: 200px; outline: 2px solid skyblue; background-repeat: no-repeat; background-image: linea
阅读全文
摘要：一、概念 浮动元素脱离文档流，影响布局，需要清除浮动 二、方法 方法一：额外标签法 给谁清除浮动，就在其后额外添加一个空白标签 ，给其设置clear：both 方法二：父元素添加overflow:hidden 通过触发BFC方式，实现清除浮动 方法三：使用after伪元素清除浮动 #parent:a
阅读全文
摘要：文字：line-height=文字外盒子的高度 盒子： 定位： position：absolute top:0;bottom:0;left:0;right:0 margin:auto 弹性布局： display:flex justify-content:center align-items:cent
阅读全文
摘要：合适的地方使用合理的标签 一、HTML语义化 让页面的内容结构化，便于浏览器，搜索引擎解析，容易阅读 二、如何优化搜索引擎？ 【搜索引擎：SEO】 通过分析搜索引擎的排名规律，了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术 1、关键词分析（也叫关键词定位）
阅读全文
摘要：vue-axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 一、流程： 1. 拿到项目和后端接口，首先要配置全局代理； 2. 接着全局封装axios和request.js； 3. 过滤axios请求方式，控制路径，参数的格式，http.js；
阅读全文
摘要：一、SEO 搜索引擎化 通过分析搜索引擎的排名规律 了解各种搜索引擎怎样进行搜索、怎样抓取互联网页面、怎样确定特定关键词的搜索结果排名的技术 二、与前端有关的SEO配置 title keywords description <html> <head> <title>title</title> <me
阅读全文
摘要：ES5 添加 严格模式，使得JS在严格 好处： 消除 Javascript 语法的一些不合理、不严谨之处 减少一些怪异行为;消除代码运行的一些不安全之处，保证代码运行的安全 提高编译器效率，增加运行速度；为未来新版本的 Javascript 做好铺垫 缺点： 网站的 JS 都会进行压缩，一些文件用了
阅读全文
摘要：一、流式布局怎么实现 场景：关键词搜索、热门标签等场景 上面一行的的空间不够容纳新的 TextView 时候才开辟下一行的空间 按照页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变,使用%百分比定义宽度 高度大都是用 px 来固定，可以根据可视区域和父元素的实时尺寸来调整，尽可能适应各种分辨
阅读全文
摘要：一、Math API 二、数字对象 三、布尔对象
阅读全文
摘要：一、数据类型【JS 的基本数据类型有哪些？基本数据类型和引用数据类型的区别】 二、数据类型检测 三、数据类型转换【隐式转换、强制转换】 四、运算符 五、操作网页元素
阅读全文
摘要：一、flex弹性布局 二、flex容器属性 三、flex项目属性
阅读全文
摘要：一、高度崩塌 二、BFC与幽灵空白节点 BFC：让空间中的子元素不会影响到外面的布局 触发BFC： overflow: hidden display: inline-block position: absolute position: fixed display: table-cell displa
阅读全文
摘要：一、元素的显示与隐藏 二、元素的溢出与浮动 三、定位 四、浮动与定位总结 五、元素的美化与修饰
阅读全文
摘要：一、盒子模型 二、页面元素的显示模式 三、文本处理
阅读全文
摘要：一、CSS样式【CSS全称：Cascading Style Sheets 层叠样式表】 二、CSS选择器 三、伪元素 四、属性选择器和结构伪类 五、背景
阅读全文
摘要：一、概念相关 Async JavaScript And XML 是JS通过异步方式获取响应并且局部更新页面 二、XHLHttpRequest 【在AJAX中被大量使用】 是一个API，挂在window上。 为客户端提供了在客户端和服务器之间进行数据传输的功能 通过URL来获取数据，并且不会使页面整个
阅读全文
摘要：组长： 首先需要组长给项目创建一个dev分支 然后把项目传送到GitHub上 这时GitHub上有两个分支（master和dev，master是Git初始化自己创建的） 然后组长需要创建一个Organizations， 之后把组员邀请到Organizations里，并授权给组员有“写”的权限 组员：
阅读全文
摘要：一、基本原理 开发大型单页应用时使用 是一个专门为 Vue.js 应用程序开发的状态管理模式 最大的特点是响应式 在 Vuex 中存放一些需要在多个界面中进行共享的信息 Vuex 应用的核心就是 store（仓库），包含着应用中大部分的状态 ( state ) state中全局共享数据，更改stat
阅读全文
摘要：vue-router使用pushStat进行路由更新，不刷新页面，静态跳转； 使用diff算法，按需加载，减少dom操作， 同一个页面跳转或者路由跳转 异步加载this.$nextTick(()=>{获取url}) 使用location.href来跳转，简单方便，但是刷新了页面； 不同页面间跳转 可
阅读全文
摘要：一、分类 （1）全局守卫 router.beforeEach 全局前置守卫 进入路由之前 router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 router.afterEach 全局后置钩子 进入路由之后 （2）路由独享守卫 befo
阅读全文
摘要：一、原理 Vue的数据更新是一种延迟异步更新 是一个用于在DOM更新完成后执行回调函数的方法 其能够监听DOM更新完成 当数据更新了，在dom中渲染后，⾃动执⾏该函数 异步更新队列：当数据发生变化，Vue将开启一个异步更新队列，视图需要等队列中所有数据变化完成之后，再统一进行更新 二、作用 Vue在
阅读全文
摘要：一、计算属性【computed】 对于任何复杂逻辑，你都应当使用计算属性 是根据依赖关系进行缓存的计算，只有在它的相关依赖发生改变时才会进行更新 默认使用的是getter属性 当一个数据受多个数据影响时，可以使用computed <!-- 复杂运算 --> <div>{{message.split(
阅读全文
摘要：【key 是为 Vue 中 虚拟节点 的唯一标记，通过这个 key，diff 操作可以更准确、更快速】 （1）第一种情况是 v-if 中使用 key。 由于 Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。 因此当使用 v-if 来实现元素切换的时候，如果切换前后含有相同类型的
阅读全文
摘要：https://www.cnblogs.com/wind-lanyan/p/9061684.html
阅读全文
摘要：一、虚拟DOM 1、概念相关 是一个JavaScript对象，通过对象的方式来表示DOM结构，是对DOM的抽象 以对象的形式来描述真实DOM结构，最终渲染到页面 在每次数据发生变化前，虚拟DOM都会缓存一份，变化之时，现在的虚拟DOM会与缓存的虚拟DOM进 行比较 在vue内部封装了diff算法，通
阅读全文
摘要：一、底层原理 利用 v-bind 用来绑定value的值 用 v-on 去绑定input标准事件 是事件用来监听当输入域内容发生变化的时候来执行一些事情 具体事件： 通过$event这个事件对象获取到最新的输入域的值 把最新的值赋值给旧的值，进行数据更新。 》双向数据绑定 二、如何实现 （1）作用在
阅读全文
摘要：一、组件之间的关系 父子关系、兄弟关系、跨级关系 二、父子之间数据传递 1、父组件向子组件传递【使用 props】 第一步：在父组件中使用子组件时，给子组件绑定属性 第二步：在子组件中使用props接收绑定的属性值 2、子组件向父组件传递【使用 $emit】 第一步：在子组件中通过$emit触发指定
阅读全文
摘要：一、原理 二、流程 第一步，“数据劫持” vue 2.x 用 Object.defineProperty() 方法来实现数据劫持，为每个属性分配一个 订阅者集合的管理数组 dep vue 3.x 用 ES6 的 Proxy 构造函数来实现数据劫持。 第二步，“添加订阅者” 在编译的时候在该属性的数组
阅读全文
摘要：1.共同点 在 vue 中 v-show 与 v-if 的作用效果是相同的 当表达式都为 false 时，都不会占据页面位置 当表达式结果为 true 时，都会占据页面的位置 2.不同点
阅读全文
摘要：1、概念相关 列表页面 ——进入详情页 —— 后退到列表页（缓存列表页的原来数据以及滚动位置） 重新进入列表页面，获取最新的数据 2、实现 3、钩子函数 当组件被激活时，触发钩子函数 activated 当组件被移除时，触发钩子函数 deactivated
阅读全文
摘要：一、概念 Vue 实例有一个完整的生命周期。 也就是从开始创建、初始化数据、编译模版、挂载 Dom -> 渲 染、更新 -> 渲染、卸载等一系列过程，我们称这是 Vue 的生命周期 二、各个阶段 beforeCreate 组件实例被创建之初，组件的属性生效之前 created 组件实例已经完全创建，
阅读全文
摘要：一、代码层面优化 （1）v-if 和 v-show 区分使用场景 v-if和v-show的区别 区别v-ifv-show 手段 动态的向DOM树内添加或者删除DOM元素 通过设置DOM元素的display样式属性控制显隐 编译过程 有一个局部编译/卸载的过程 是简单的基于css切换 编译条件 初始条
阅读全文
摘要：1、概念 【SSR的本质就服务端返回渲染好的html文档】 vue在客户端将标签渲染成的整个 html 片段的工作在服务端完成 服务端形成的html 片段直接返回给客户端这个过程就叫做服务端渲染 2、优缺点 （1）优点 更好的 SEO 在 SPA 中是抓取不到页面通过 Ajax 获取到的内容 SS
阅读全文
摘要：一、MVVM开发模式 （1）前端的视图层概念=》由MVC演化 （2） M：model【模型层】：渲染页面所以来的数据源（通过ajax从服务端获取的数据） V：view【视图层】：将数据模型转换成UI展示给用户 VM：【视图模型层】：当监听到DOM变化时，会自动地更新数据源里面所依赖的数据 （修改了m
阅读全文
摘要：一、概念 event：事件 loop：循环，循环的是一个又一个的任务队列 任务队列：是一个先进先出的数据结构，排在前面的事件，优先被主线程读取 任务队列分为：宏队列，微队列，分别存放宏任务和微任务 二、宏任务【多个】、微任务【1个】 微任务一般比宏任务先执行，并且微任务队列只有一个，宏任务队列可能有
阅读全文
摘要：JavaScript 具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行 常见的垃圾回收方式：标记清除、引用计数方式。 一、标记清除方法 1、工作原理:【标记“离开环境”的就回收内存】 当变量进入环境时，将这个变量标记为“进入环境”。 当变量离开环境时，则将其标记为“离开环境”。 2、
阅读全文
摘要：一、promise【ES6新增】 语法上：promise是一个对象，从它可以获取异步操作的消息 本意上：它是承诺，承诺它过一段时间会给你一个结果 解决回调地狱 【如果想通过异步方法先后检测用户名和密码，需要先异步检测用户名，然后再异步检测密码的情况下就很适合 Promise】 1、创建 此构造函数包
阅读全文
摘要：一、功能 GET：从服务器上获取数据 PSOT: 向服务器传送数据（更新服务器资源） 二、REST服务角度 GET：幂等（读取同一资源，得到相同数据） 》不改变服务器上的资源 POST：不是幂等（每次请求的资源的改变不同） 》改变服务器上的资源 三、请求参数形式 GET：请求的数据会附在URL之后，
阅读全文
摘要：一、开发流程： 需求 >原型 >开发 >测试 >上线 1、开发 （1）版本控制：选用git版本 （2）技术选型：根据业务需求，选择合适技术 vue-cli | 制定统一编码规范，便于团队协作和代码维护，例如eslint, tslint （3）环境配置：初始化项目完成后，提交代码到远程库 （4）构建优
阅读全文
摘要：一、sessionstorage(会话存储) 1、添加数据：SessionStorage.setItem('key', 'value'); 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。 2、获取数据：SessionStorage.getItem('key')
阅读全文
摘要：1、概念 当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域 2、产生原因 浏览器的同源策略：页面请求的接口地址，必须与页面的url地址处于同域上 （即域名、端口、协议相同） 3、浏览器跨域报错 （1）发起 ajax请求 的那个页面的地址 和 ajax接口地址 不在同一个
阅读全文
摘要：1.浏览器的地址栏输入URL并按下回车。 2.浏览器查找当前URL是否存在缓存，并比较缓存是否过期。 3.DNS解析URL对应的IP。 4.根据IP建立TCP连接（三次握手）。 5.HTTP发起请求。 6.服务器处理请求，浏览器接收HTTP响应。 7.渲染页面，构建DOM树。 8.关闭TCP连接（四
阅读全文
摘要：1、forEach更多的用来遍历数组 var arr = [23, 9, 78, 6, 45] arr.forEach((item) => { // console.log(item) item = 'cc' }) 2、for in 一般常用来遍历对象或json【循环出的是key】 // var o
阅读全文
摘要：1、定义 指能够访问另一个函数作用域中的变量的一个函数（定义在一个函数内部的函数） 函数 A 返回了一个函数 B，并且函数 B 中使用了函数 A 的 变量，函数 B 就被称为闭包 function A() { let a = 1 function B() { console.log(a) } ret
阅读全文
摘要：1、首次登录，前端调用后端登录接口，发送用户名密码 2、后端收到请求，验证用户名密码。成功，返回给前端token和一个用户信息的值 （token：后台发的唯一标识，用来验证用户是否登录） 3、前端拿到token，将token存储到sessionStorage中，并跳转路由页面 4、前端每次跳转路由，
阅读全文
摘要：在dom操作中，在绑定事件触发频率上进行的控制 一、防抖【多次执行变成最后一次执行】 1、概念：等用户高频事件完了，再进行事件操作 （监听输入框的输入，不应该每次都去触发监听，应该是用户完成一段输入后在进行触发。） 2、流程： 事件触发 开启定时器 再次触发，清除上次，重写一次 定时到，触发操作 /
阅读全文
摘要：三者都可以改变函数的this对象指向 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window 三者都可以传参，但是apply是数组，而call是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入 bind
阅读全文
摘要：1、普通函数中 指向window对象，严格模式下为undefined 2、对象中 指向调用函数的对象 3、构造函数和类中 配合new使用，new关键字将构造函数中的this指向实例对象 4、绑定事件函数 指向调用函数的对象 5、定时器中 指向window对象，因为定时器中采用回调函数作为处理函数，回
阅读全文
摘要：一、普通函数 存在声明提升 1、定义： 关键字（function） 函数名 （参数）{ //参数是形参（形式参数） 函数体 return xxx } 2、调用： 函数名（参数） //参数是实参（实际参数） 3、形参|实参 实参：在调用函数的时候真正传进去要进行运算的值（真实的数据） 形参：占位的参数
阅读全文
摘要：一、须知 1、函数对象： new 出的对象是由函数对象创建的。 所有的函数对象中都有一个名为【prototype】的引用类型变量 所有的函数对象中都有prototype属性，原型对象和new 出来的对象中没有 其变量是函数对象的成员，其值为对应的原型对象的引用值 >【prototype指向原型对象】
阅读全文
摘要：VUE面试题 1、v-show 和 v-if的区别，v-show 和 keep-alive 的区别 答案：v-show是 CSS display 控制显示和隐藏 v-if 是组件真正的渲染和销毁，而不是显示和隐藏 频繁切换显示状态用 v-show，否则用 v-if keep-alive 是在vue
阅读全文
摘要：vue路由传参是指嵌套路由时父路由向子路由传递参数，否则操作无效 一、利用"router-link"路由导航 父组件： 使用 <router-link to = "/跳转路径/传入的参数"></router-link> 例如：<router-link to="/a/123">routerlink传参
阅读全文
摘要：一、路由、子路由、动态路由 子路由、动态路由类似，不同的是子路由同时有路由跳转和页面跳转的，动态路由只有路由跳转，没有页面跳转 举例如下：/customerHome 下有 item1 和 item2 两个子路由。 import { createRouter, createMemoryHistory,
阅读全文
浙公网安备 33010602011771号