- 博客(34)
- 收藏
- 关注
RSS订阅原创 2021-09-13
~element-ui + el-tree 树结构，未知层级，点一级请求下一级的树数据，带复选框，选择父节点不关联子节点。问题描述树结构形状图树结构懒加载的实现第一 树结构第二 el-tree清除已选中的选择项问题描述element中的el-tree树结构 需求是：①不知道这个树结构有多少层级，数据是点击一级发起一个请求，请求回来的是第二级的数据，点第二级发起一个请求，请求回来的是第三级的数据，以此类推，不知道这个树到底有多少个层级，我使用了el-tree中的懒加载。②每个树节点前带有一个复
2021-09-13 17:20:29
316
原创 说说你对 SPA 单⻚⾯的理解，它的优缺点 分别是什么
说说你对 SPA 单⻚⾯的理解，它的优缺点分别是什么？SPA(single-page application) 仅在web页面初始化时加载相应的HTML,JS,CSS.一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现HTML内容的变换，UI与用户的交互，避免页面得重新加载。优点：用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；基于上面这一点，SPA相对对服务器压力小；前后端职责分离，结构清晰，前端进行交互逻辑，后端
2021-02-01 08:28:56
624
原创 请描述一下 cookies，sessionStorage 和 localStorage 的区别？
请描述一下 cookies，sessionStorage 和 localStorage 的区别？1.背景介绍SessionStorage、LocalStorage、Cookie这三者都可以用来在浏览器端存储数据，而且都是字符串类型的键值对。区别在于前两者属于WebStorage，创建他们的目的便于客户端存储数据。而Cookie早在网景公司的浏览器中就开始支持，最初目的是为了保持HTTP的状态。Cookie（也叫Web cookie或者浏览器Cookie）是服务器发送到用户浏览器并保存在浏览器上的一块数
2021-01-29 21:59:29
260
原创 什么是MVVM?
什么是MVVM?MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。View层是视图层，也就是用户界面。前端主要由HTML和CSS来构建；Model层 是指数据模型，泛指后端进行的各种业务逻辑处理和数据操控，对于前端来说就是后端的提供的API接口；ViewModel层是视图数据层，一个同步View和Model的对象。在MVVM架构下，View和Model之间并没有直接的联系，而是通过ViewModel进行交互，Model和ViewModel之间的交互是双向的，因此Vi
2021-01-28 10:29:26
5768
1
原创 Vue 是如何实现数据双向绑定的？
Vue 是如何实现数据双向绑定的？Vue 数据双向绑定主要是指：数据变化更新视图，视图变化更新数据Vue 主要通过以下 4 个步骤来实现数据双向绑定的：实现⼀个数据监听器 Observer： 对数据对象进⾏遍历，能够对数据对象的所有属性进行监听，利⽤ Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。并通知订阅者实现⼀个指令解析器 Compile： 对每个元素节点的指令进行
2021-01-27 08:51:02
2880
原创 Proxy 与 Object.defineProperty 优劣对 ⽐
Proxy 与 Object.defineProperty 优劣对⽐Proxy的优势如下：Proxy可以直接监听对象而非属性；Proxy可以直接监听数组的变化；Proxy有多达13种拦截方法，不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的；Proxy返回的是一个新对象，我们可以只操作新的对象达到目的，而Object.defineProperty只能遍历对象属性直接修改；Proxy作为新标准将受到浏
2021-01-26 09:01:33
186
原创 、Vue 中的 key 有什么作⽤？
Vue 中的 key 有什么作⽤？key是为Vue中 vnode 的唯一标记，通过这个key,我们的diff操作可以更准确、更快速。Vue 的 diff过程可以概括为：oldCh 和 newCh 各有两个头尾的变量oldStartIndex、oldEndIndex和newStartIndex、newStartIndex，他们的新节点和旧节点会进行两两对比，即一共有4种比较方式：newStartIndex 和oldStartIndex 、newEndIndex 和 oldEndIndex 、newS
2021-01-25 09:43:08
454
原创 你有对 Vue 项⽬进⾏哪些优化？
你有对 Vue 项⽬进⾏哪些优化？①代码层面的优化 - v-if和v-show区分使用场景 - computed和watch区分使用场景 - v-for遍历必须为item添加key,且避免同时使用v-if - 长列表性能优化 - 事件的销毁 - 图片资源懒加载 - 路由懒加载 - 第三方插件的按需引入 - 优化无限列表性能 - 服务端渲染SSP 或 预渲染②Webpack层面的优化 - Webpack对图片进行压缩 - 减少ES6转为ES5的冗余代码 - 提取公共代码 -
2021-01-25 09:07:37
92
原创 对于即将到来的 vue3.0 特性你有什么了 解的吗？
对于即将到来的 vue3.0 特性你有什么了 解的吗？Vue3.0正在发布的路上，Vue3.0的目标是让Vue核心变得更小、更快、更强大，因此Vue3.0增加以下这些特性：①监测机制的改变3.0 将带来基于代理 Proxy 的 observer 实现，提供全语⾔覆盖的反应性跟踪。这消除了 Vue 2 当中基于 Object.defineProperty 的实现所存在的很多限制： - 只能监测属性，不能监测对象 - 检测属性的添加和删除； - 检测数组索引和⻓度的变更； - ⽀持 Map、S
2021-01-25 08:45:59
142
原创 v-model 的原理？
v-model 的原理？我们在vue项目中主要是用v-model指令在表单input、textarea、select等元素上创建双向绑定，我们知道v-model本质上不过是语法糖，v-model在内部为不同的输入元素使用不同的属性并抛出不同的事件：text和textarea元素使用value属性和input事件checkbox和radio使用checked属性和change事件select字段将value作为prop并将change作为事件 - 以input表单元素为例： - &
2021-01-21 08:54:14
207
原创 组件中 data 为什么是⼀个函数？
组件中 data 为什么是⼀个函数？为什么组件中的data必须是一函数，然后return一个对象，而new Vue实例里，data可以直接是一个对象？//datadata(){return {message:‘子组件’,childName:this.name}}//new Vue用为组件是用来复用的，且在JS里对象是引用关系。如果组件中data是一个对象，那么这样作用域没有隔离性，子组件中的data属性值会相互影响，如果组件中data选项是一个函数，那么每个实例可以维护一份被返回对象的独
2021-01-21 08:27:26
194
原创 谈谈你对 keep-alive 的了解？
谈谈你对 keep-alive 的了解？keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：一般结合路由和动态组件一起使用，用于缓存组件；提供include和exclude属性，两者都支持字符串或正则表达式，include表示只有名称匹配的组件会被缓存，exclude表示任何名称匹配的组件都不会被缓存，其中exclude的优先级比include高；对应的两个钩子函数activated和deactivated，当组件被激活时，触发钩子函数ac
2021-01-20 08:40:20
477
原创 在什么阶段才能访问操作DOM？
在什么阶段才能访问操作DOM？在钩子函数mounted被调用前，Vue已经将编译好的模板挂载到页面上，所以在mounted中可以访问操作DOM生命周期图如下：生命周期及各个阶段的理解在下面这个链接：https://blog.csdn.net/weixin_51348217/article/details/112797360...
2021-01-20 08:12:05
837
原创 在哪个⽣命周期内调⽤异步请求？
在哪个⽣命周期内调⽤异步请求？一般来说，可以在 created, mounted中都可以发送数据请求，但是，大部分时候，会在created发送请求Created的使用场景：如果页面首次渲染的就来自后端数据。因为，此时data已经挂载到vue实例了。可以在钩子函数 created、beforeMount、mounted中进行调用，因为在这三个钩子函数中，data已经创建，可以将服务端端返回的数据进行赋值。但最常用的是在created钩子函数中调用异步请求，因为在created钩子函数中调用异步请求有两
2021-01-19 08:56:45
440
原创 Vue 的⽗组件和⼦组件⽣命周期钩⼦函数执 ⾏顺序？
Vue 的⽗组件和⼦组件⽣命周期钩⼦函数执 ⾏顺序？Vue 的⽗组件和⼦组件⽣命周期钩⼦函数执⾏顺序可以归类为以下 4 部分：加载渲染过程父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子created -> 子 beforeMount -> 子mounted -> 父 mounted子组件更新过程父 beforeUpdate -> 子 beforeUpda
2021-01-19 08:37:28
333
原创 谈谈你对Vue生命周期的理解？
谈谈你对Vue生命周期的理解？（1）生命周期是什么？Vue实例有一个完整的生命周期，也就是从 开始创建、初始化数据、编译模板、挂载DOM–>渲染、更新–>渲染、卸载等一系列过程，我们称这是Vue的生命周期。（2）各个生命周期的作用beforeCreate:组件实例被创建之初，组件的属性生效之前created:组件实例已经完全创建，属性也绑定，但真实beforeMount:在挂载开始之前被调用：mounted:beforeUpdate:update:activited:dea
2021-01-19 08:25:06
901
原创 怎样理解 Vue 的单向数据流？
怎样理解 Vue 的单向数据流？数据从父级组件传递给子组件，只能单向绑定。子组件内部不能直接修改从父级传递过来的数据。所有的prop都使得其父子prop之间形成一个单向下行绑定：父级prop的更新会流动到子组件中，但是反过来不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。额外的，每次父级组件发生更新时，子组件中所有的prop都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变prop。如果你这样做了，Vue会在浏览器的控制台发出警告。子组件想修改时，只能
2021-01-15 08:52:28
687
原创 Class 与 Style 如何动态绑定？
Class 与 Style 如何动态绑定？class可以通过对象语法和数组语法进行动态绑定：对象语法：<div v-bind:class="{'active':isActive,'text-danger':hasError}"></div>data:{ isActive:true, hasError:false}数组语法：<div v-bind:class="[isActive?'activeClass':'',errorClass]"></d
2021-01-15 08:23:09
1196
原创 v-show 与 v-if 有什么区别？
v-show 与 v-if 有什么区别？v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当的被销毁和重建；也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。v-show就简单的多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS的“display”属性进行切换。所以，v-if适用于在运行时很少改变条件，不需要频繁切换条件的场景；v-show则适用于需要非常频繁切换条件的场景。...
2021-01-14 08:35:58
80
原创 js 数组类型中的常用方法
js 数组类型中的常用方法增删改截拼复排转 （截拼转 不影响原数组，其余都影响原数组）增①前增 unshift(元素，元素，。。。)作用：在数组的首部增加元素返回值：新增后数组的长度是否影响原数组：是var arr = [5,6,7,8,9]; console.log(arr.unshift(true,false,null)); // 8 console.log(arr) ;// [true,false,null,5,6,7,8,9]②后增 push(元素，元素，。。。)作用：在数组
2021-01-13 08:59:26
201
原创 关于 link 和@import 的区别
关于 link 和@import 的区别link是html标签，除了可以引入css文件外，还能引入其他文件；@import属于css范畴，只能引入css文件（老祖宗区别）link引入的css文件和页面同时加载；@import引入的文件在页面加载完成后载入（加载顺序不同）link是Html标签，无任何兼容性问题；@import是css2.1提出的，低版本浏览器不支持（是否兼容）link支持js控制DOM改变样式；@import不支持（对js支持不同）扩展：关于 link 和@import 的区
2021-01-12 08:47:50
477
原创 css修改滚动条样式
css修改滚动条样式HTML代码：<div class="element"> 内容</div>CSS代码：.element{ overflow-y:scroll; overflow-x:hidden;}/*修改滚动条样式*/.element::-webkit-scrollbar{ width: 10px; }.element::-webkit-scrollbar-thumb{ border-radius:10px; -webkit-box-sh
2021-01-11 14:52:39
58
原创 js中三种弹窗的单词以及三种弹窗的功能
js中三种弹窗的单词以及三种弹窗的功能alert,confirm,prompt三种弹窗介绍三种弹窗在系统中都是同步执行的，也就是说，三种弹框中的任一弹窗弹出，代码都不再执行，直到点击确认或取消，关闭弹窗后，代码继续执行。1.alert()提示框用途：一般用于提示信息或者警告框信息的展示。代码展示：alert('heheda~');2.confirm(option) ‘确认’ 或 ‘取消’ 消息框用途：用户点击 “确定” 或 “取消” 按钮时，弹窗会返回一个布尔值。确认返回true,取消返
2021-01-11 12:59:02
1959
原创 JS中的“&&”与“&”和“||”“|”有什么区别？
JS中的“&&”与“&”和“||”“|”有什么区别？在javascript中的 && 和 || 是逻辑运算符；& 和 | 是位运算符。四个运算符主要区别是 运算方法 不一样：①javascript中的位运算符：’&’运算方法：两个数值的个位分别相与，全都为1值为1，只要有一个为0就位0.eg: 10 & 2 结果为 2②javascript中的位运算符：’|’运算方法：两个位只要有一个为1，结果就为1，否则就为0eg:
2021-01-11 11:48:35
1121
原创 只允许使用 + - * / 和 Math.* ，求一个函数 y = f(x, a, b)；当 x ＞ 100 时返回 a 的值，否则返回 b 的值
只允许使用 + - * / 和 Math. ，求一个函数 y = f(x, a, b);当 x > 100 时返回 a 的值，否则返回 b 的值，不能使用 if else 等条件语句，也不能使 用 |,?:,数组。*function f(x, a, b) { var temp = Math.ceil(Math.min(Math.max(x - 100, 0), 1)); return a * temp + b * (1 - temp);}console.log(f(-10, 1, 2
2021-01-11 09:29:50
126
原创 JavaScript alert(0.4*0.2)；结果是多少？和你预期的一样吗？如果不一 样该如何处理？
JavaScript alert(0.4*0.2);结果是多少？和你预期的一样吗？如果不一 样该如何处理？有误差，应该比准确结果偏大。一般我会将小数变为整数来处理。之前遇到这个问题在网上查询发现有人用try catch return 写了一个函数，原理也是一致先转为整数再计算...
2021-01-11 08:56:16
289
原创 如何获取DOM对象并且转为jQuery对象
**一个 div，有几种方式得到这个 div 的 jQuery 对象？想直接获取这个 div 的 dom 对象，如何获取？dom 对象 如何转化为 jQuery 对象？**<div class='aabbcc' id='nodesView'></div>//获取DOM对象var domView = document.getElementById('nodesView');document.getElementsByClassName('aabbcc');document.
2021-01-11 08:43:17
499
原创 什么是 sql 注入，xss 漏洞？
什么是 sql 注入，xss 漏洞？SQL注入式攻击就是攻击者把SQL命令插入到Web表单的输入域或页面请求的查询字符串，欺骗服务器执行恶意的SQL命令。在某些表单中，用户输入的内容直接用来构造（或者影响）动态SQL命令，或作为存储过程的输入参数，这类表单特别容易受到SQL注入式攻击。预防方法：使用预编译语句，绑定变量，使用安全的存储过程，检查数据类型，使用安全函数XSS(Cross Site Script)跨站脚本攻击指恶意攻击者往web页面插入恶意脚本代码，而程序对于用户输入的内容未过滤，
2021-01-08 11:13:06
356
2
原创 2020-12-23
JS基础面试题（一）1.javascript的typeof返回哪些数据类型object number function boolean undefined stringeg:`typeof null; // object`typeof isNaN; // function typeof isNaN(123); // booleantypeof [] ; // objecttypeof Array.isArray(arr); // booleantypeof toString.call(
2020-12-25 08:57:14
123
1
原创 2020-12-14
web前端基础面试题（一）一、HTML、HTTP、web综合问题1.前端需要注意哪些SEO（搜索引擎优化）合理的 title 、description、keywords:搜索对这三项的权重逐个减小，title 值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description 把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可。语义化的html代码，符合W3C规范：语义化代码让搜索
2020-12-14 21:03:25
99
原创 修改NPM全局模式的安装路径完整过程
修改NPM全局模式的模式安装路径一般情况下，我们安装 node.js 环境，程序会自动把 npm 全局模块的路径设置在系统盘（通常是 C 盘下），我们在项目开发阶段不建议全局路径设置在系统盘，不但会影响电脑的性能，而且还很不安全。可以通过以下命令来设置默认下载的全局路径目录：输入命令，查看当前配置：npm config ls运行结果：如果是第一次使用 npm 安装包的话，在配置中只会看到 prefix 的选项，就是 npm 默认的全局安装目录 。但是如果有多次使用 npm 安装包的话，就会看到
2020-12-14 18:16:03
306
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人