- 博客(21)
- 收藏
- 关注
RSS订阅原创 VUE 双向数据绑定原理
vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式。通过Object.defineProperty（）来劫持各个属性的setter 、getter，在数据变动时发布消息给订阅者，触发相应监听回调。1. 什么是setter、getter答：首先，别误以为他们就是一会要说的get、set对象有两种属性：数据属性:就是我们经常使用的属性 访问器属性:也称存取器属性（存取器属性就是一组获取和设置值的函数）get和set就是关键字 它们后面各自对应一个函数，这个...
2021-12-22 15:53:04
902
7
原创 一文让你秒懂防抖与节流
一、函数防抖（debounce）就是指触发事件后，在 n 秒内函数只执行最后一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间具体代码演示<body> <input type="text" id='unDebounce'></body></html><script> //防抖函数 function debounce(fn, delay) { var delay = delay ||
2021-12-22 10:59:19
349
原创 document.addEventListener
document.addEventListener("事件名称", 函数, false);function 某函数(event){ // 方法执行}addEventListener里最后一个参数决定该事件的响应顺序；document.addEventListener("事件名称", 函数, true):如果为true时事件执行顺序为 addEventListener ---- 标签的onclick事件 ---- document.onclick documen...
2021-12-15 14:02:22
12339
原创 js中判断数组的方法（5个）
1、数组自带的 isArray() 方法（ES6新增）let arr = [];console.log(Array.isArray(arr)); // true2、instanceoflet arr = [];console.log(arr instanceof Array); // true3、constructorlet arr = [];console.log(arr.constructor == Array); // true4、__proto__co
2021-11-09 17:38:56
1208
原创 Vue的插槽（slot）
什么是插槽在子组件中用<slot></slot>划出一块区域来显示父组件中的页面结构，显示的结构在父组件的子组件标签中设置就行）插槽怎么显示数据显示的结构在父组件的子组件标签中设置就行 插槽分为几种默认插槽 具名插槽 作用域插槽 具名插槽（又称有名插槽）：通过 name 属性设置了名字的插槽//父组件<body-container> <div slot='header'> <!-- 我们希望把页头放这里 -..
2021-10-28 20:47:59
329
2
原创 js中数组方法
增:push() 在数组末尾追加的数组元素，数量不限unshift()在数组开头添加的数组元素concat()⾸先会创建⼀个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组删:pop() ⽤于删除数组的最后⼀项shift() ⽅法⽤于删除数组的第⼀项splice()传⼊两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组slice() ⽤于创建⼀个包含原有数组中⼀个或多个元素的新数组，不会影响原始数组改:splic
2021-10-28 20:41:04
140
原创 js中数组排序（冒泡、插队）
冒泡排序将数组中的相邻两个元素两两比较，通过比较移动大小位置function MaoPaoSort(arr) { for (var i = 0; i <= arr.length; i++) { for (var n = 0; n <= arr.length - i; n++) { if (arr[n] > arr[n + 1]) { var kong = arr[n]; ar.
2021-10-28 20:37:59
157
原创 数组的去重
数组去重的场景将数组var arr =[1,1,‘true’,‘true’,true,true,66,66,false,false,undefined,undefined, null,null, NaN, NaN, 0, 0, ‘a’, ‘a’,{},{}]中重复的值过滤掉1、ES6-set使用ES6中的set是最简单的去重方法<script> var arr=[1,2,3,4,1,2,3] //先将数组转换为set var set=new Set(arr)
2021-10-28 20:23:35
163
原创 Vue的diff算法
diff的概念每次再修改了数据之后，先算出修改数据之后的虚拟 DOM 结构，然后和原虚拟DOM 结构进行对比，找出不同的地方，然后只更新不同的地方进行 DOM 操作，这样就有效的减少了 DOM 操作以提高性能，这种比较新旧虚拟DOM找出不同点的算法就叫做 DIFF 算法diff的两个特点比较只会在同层级进行, 不会跨层级比较 在diff比较的过程中，循环从两边向中间比较diff 算法的在很多场景下都有应用，在vue中，作用于虚拟 dom 渲染成真实 dom 的新旧 VNode 节点比..
2021-10-28 19:34:43
141
原创 LocalStorage、SessionStorage、Cookie的区别？
1、LoocalStorage1.localStorage 生命周期是永久。2.这意味着除非用户显示在浏览器提供的UI 上清除 localStorage 信息，否则这些信息将永远存在。存放数据大小为一般为5MB。3.不参与和服务器的通信。 它们在服务器中的位置2、SessionStorage1.sessionStorage 仅在当前会话下有效，关闭页面或浏览器后被清除。2.存放数据大小为一般为 5MB,而且它仅在客户端（即浏览器）中保存。3.不参...
2021-10-22 19:17:33
160
原创 浏览器是如何渲染页面的？
1、浏览器获取HTML文件，然后对文件进行解析，形成DOM Tree2、与此同时，进行CSS解析，生成Style Rules3、接着将DOM Tree与Style Rules合成为 Render Tree4、接着进入布局（Layout）阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标5、随后调用GPU进行绘制，遍历Render Tree的节点，并将元素呈现出来...
2021-10-21 11:37:44
116
原创 TypeScript基础
一、原始数据类型1.布尔值是最基础的数据类型，在 TypeScript 中，使用boolean定义布尔值类型let isDone: boolean = false;2.数值使用number定义数值类型3.字符串使用string定义字符串类型let myName: string = '张作栋';let myAge: number = 21;let sentence: string = `Hello, my name is ${myName}.I'll be ${m...
2021-10-11 20:28:10
171
原创 简单易懂的js继承
继承在js中占有非常重要的地位，那么在js中有很多中继承的方式，不过每一种继承方式都有优缺点。下面就列举几种继承的方式。实现继承首先需要一个父类，在js中实际上是没有类的概念，在es6中class虽然很像类，但实际上只是es5上语法糖而已一、原型链继承核心：将父类的实例作为子类的原型优点：实例可继承的属性有：实例的构造函数的属性，父类构造函数属性，父类原型的属性缺点:1、新实例无法向父类构造函数传参。 2、继承单一。 3、所有新实例都会共享父类实例的属性。二、...
2021-09-23 20:16:11
155
原创 Js数据类型
一、js数据类型有哪些？ 1、基本数据类型（值类型） number(数值型) 整数，浮点数 string(字符串类型) 用引号包裹起来的数字或字母 Boolean(布尔类型) undefined(未定义) null(空值) symbol(es6新增的) 2、引用数据类型 Object 主要包含：Object，Array，Function 3、基本数据类型与引用数据类型的区别:...
2021-09-17 20:20:07
152
原创 HTML CSS面试题
一、盒模型1、什么是盒子模型？在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成。2、盒子模型有两种。1、标准模式下: 一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)2、怪异模式下： 一个块的总宽度= width + margin(左右)（即width已经包含了pad...
2021-09-08 20:24:08
419
原创 flex弹性布局
1、flex布局是什么？Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性2、基本概念：采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。3、flex容器的属性: flex-direction (决定容器的弹性方向) flex-wrap（是否切换行） justify-content.
2021-09-08 19:21:12
362
原创 Vue路由传参
总结：1、 router-link 进行页面按钮式路由跳转2、 this.$route.params获取路由传递参数3、this.$route.query获取路由传递参数1、使用router-link进行路由导航，传递参数 在父组件中，使用标签进行导航 child为子页面的路由，123是传递的参数 在子组件中使用this.$route.params.num来接收参数此时此刻页面上渲染出路由传递的参数num 为123路由配...
2021-09-02 20:19:02
283
原创 vuex的基本概念
1、什么是vuex？ Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组的状态，并以相应的规则保证状态以一种可预测的方式发生变化2、vuex的用途 能够实现组件之间数据的共享。3、vuex的工作原理：在组件中通过dispatch来调用actions中的方法，在actions中通过commit来调用mutations中的方法mutaions中的方法中可以直接操作state中的数据，只要state中的数据发生改变，就会立即响应到所有的组件...
2021-09-01 21:56:44
427
原创 axios配置封装
为什么要对axios封装？axios 封装了原生的 XHR，让我们发送请求更为简单，但假设在一个成百上千个 vue 文件的项目中，我们每一个 vue 文件都要写 axios.get()或 axios.post() 岂不是很麻烦？后期的维护也不方便，所以我们要对 axios 进行进一步的封装。（1）在src下面新建一个文件夹http 1.新建一个service文件service.interceptors.request.use里面设置请求头（token）请求拦截 ...
2021-08-30 11:51:26
544
1
原创 Git基本工作流程
1、Git是什么？ git是一个版本管理工具，采用的分布式版本控制系统，它可以在任何时间点，将文档的状态作为更新记录保存起来，也可以在任何时间点，将更新记录恢复回来，达到我们的目的。2、Git的工作区域git工作区域如下图（1）工作区(working directory) : 可以用来添加，编辑，修改文件等一些操作. (2)暂存区（stage）： 暂存已经修改了的文件，最后统一提交到Git仓库中。（3）Git仓库（gitr...
2021-08-29 14:08:16
987
2
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人