winxin_58206976的博客

原创 平铺数组结构数据怎样转换成树形结构

使用非递归的方式实现<script> /** * 把平铺的数组结构转成树形结构 */ const arr = [ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部' }, { 'id': '2f', 'pid': '2c', 'name': '薪资管理部' },

原创 vue实现点击追加选中样式效果

vue实实现现点点击击追追加加选选中中样样式式效效果果 今天小编就为大家分享一篇vue实现点击追加选中样式效果，具有很好的参考价值，希望对大家有所帮助。一起 跟随小编过来看看吧 DOM部部分分 <ul><li class="liMenu" :class="idx==index?'hover':''" @click="son(item,idx)" v-for="(item,idx) in menu" :key

原创 Js 的原型及原型链详解

一、prototype在JavaScript中，每个函数都有一个prototype属性，这个属性指向函数的原型对象。例如：function Person(age) { this.age = age }Person.prototype.name = 'kavin'var person1 = new Person()var person2 = new Person()console.log(person1.name) //kavinconsole.log(perso

原创 面试题之常见 JS 代码笔试题

1.用 js 实现随机选取 10 –100 之间的 10 个数字，存入一个数组并排序 var arr = [2, 3, 4, 1, 5] console.log(arr.sort()); console.log(parseInt(Math.random() * (100 - 10 - 1) + (10 + 1))); function randomNub(arr, num, min, max) { // 判断数组长度是否为10 为10退出 if (arr.l...

原创 TypeScript之基础快速入门

1. TypeScript 介绍TypeScript 是javaacript 的严格版模式,是微软进行开发的开源编程语言 ,javascript有的东西他都有,所以TypeScript 的功能更加强大,但是TypeScript的代码比较奇怪,比如:{ type Ns = number | string; var xiaozhi = (name: Ns = "小智", age: number = 20): Ns => { return name + "今年" + age

转载 深入了解 JavaScript 内存泄露

这篇文章是针对浏览器的 JavaScript 脚本，Node.js 大同小异，这里不涉及到 Node.js 的场景。当然 Node.js 作为服务端语言，必然更关注内存泄漏的问题。用户一般不会在一个 Web 页面停留比较久，即使有一点内存泄漏，重载页面内存也会跟着释放。而且浏览器也有自动回收内存的机制，所以我们前端其实并没有像 C、C++ 这类语言一样，特别关注内存泄漏的问题。但是如果我们对内存泄漏没有什么概念，有时候还是有可能因为内存泄漏，导致页面卡顿。了解内存泄漏，如何避免内存泄漏，也是我们提升

原创 react 的访问权限控制(没有token是不应该出现从url 中修改地址短暂跳转到登录之后的页面中的情况)

扩展 renderreact 的访问权限控制这两种写法都可以正常跳转到 Layout 页面但第二种render写法是一个函数,我们可以在里面写一些逻辑判断这样一写就实现了访问权限控制的功能封装一个权限控制上面的写法不方便复用,我们可以封装一个访问权限控制在 components(公共组件文件夹)文件中创建一个AuthRoute.js 文件...

原创 react 中token失效Router路由跳回login页面的(history出现白屏)解决方案

react 的路由使用react 也有两种模式 hash 和 history 模式,使用方式是:按照以下方式导入即可在App.js中引入使用方式,<Router></Router>只需要在一级路由使用一次即可,也就是在App.js 中使用一次就可以了回归正题当用户的token过期,后台报401 错误时 , 我们需要清空token 和信息的同时也需要将页面跳转回login页面但两种模式的处理方案不同hash 模式的处理方案...

原创 vue面试题之什么是mvvm

Model层: 数据模型层通过 Ajax ,fetch等 API 完成客户端和服务端业务模型的同步。

原创 面试题之 说一下 ES6 的导入导出模块（高薪常问）

ES6 的导入导出分为三种模式,分为按需导出导入,默认导出导入和直接导入,其中按需导出导入和默认导出导入可以同时使用,但一个模块只能用一次 export defaut ,默认导入和按需导入 可以使用一个improt ,但需要用逗号隔开1. 默认导出,导入 默认导出语法: export defaut{ } 默认导出的成员时,将需要导出的成员用花括号包裹起来,用逗号隔开,export defaultt在整个模块中只能出现一次,否则会报错 默认导入默认导入的语法使用 import 接收名称

原创 vue的.sync修饰符用法及原理详解

vue .sync的历史vue .sync 修饰符最初存在于 vue 1.0 版本里，但是在 2.0 中被移除了。但是在 2.0 发布之后的实际应用中，vue 官方发现 .sync 还是有其适用之处，比如在开发可复用的组件库时。开发者需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起官方重新引入了 .sync 修饰符，但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。vue 修饰符sync的功能是：当一个子组件改变了一个 pro

原创 vue面试题之常用的指令/修饰符

Vue 生命周期总共分为几个阶段？总的来说：Vue 实例从创建到销毁的过程，就是生命周期。它主要分为四个阶 段 初始化、挂载、更新以及销毁阶段。 每一个阶段会触发不同的钩子函数。生命周期钩子函数总共有 11 种（常用 8 种）1.初始化前后：beforeCreate、created2.挂载前后：beforeMount、mounted3.更新前后：beforeUpdate、updated4.销毁前后：beforeDestroy、destroyed5.组件激活、失活时：...

原创 vue render 函数详解

Vue中怎么编写可复用的组件，提到要对Vue的render函数有所了解。可仔细一想，对于Vue的render函数自己只是看了官方的一些介绍，并未深入一点去了解这方面的知识。为了更好的学习后续的知识，又折回来了解Vue中的render函数，这一切主要都是为了后续能更好的学习Vue的知识。回忆Vue的一些基本概念今天我们学习的目的是了解和学习Vue的render函数。如果想要更好的学习Vue的render函数相关的知识，我们有必要重温一下Vue中的一些基本概念。那么先上一张图，这张图从宏观上展现了Vue

原创 vue 和 react 区别的详细介绍

概括:Vue是采用指令结合vue-loader实现构建用户界面的渐进式框架，React是采用jsx构建用户界面的组件化开发在渲染用户界面的时候，DOM的操作是最昂贵，但是没有库可以让这些原始操作变得更快。我们能做的最好的就是：尽量减少DOM操作。Vue 和 React 都使用虚拟DOM来实现，并且两者工作一样好；vue官方文档中的官方解释:vue和react 简介:在 React 中，所有的组件的渲染功能使用的都是JSX。JSX 是使...

原创 数组的方法

顺序 方法名 功能 返回值 是否改变原数组 版本 1 push() (在结尾)向数组添加一或多个元素 返回新数组长度 Y ES5- 2 unshift() （在开头)向数组添加一或多个元素 返回新数组长度 Y ES5- 3 pop() 删除数组的最后一位 返回被删除的数据 Y ES5- 4 shift() 删除首个数组元素，并把所有其他元素“位移”到更...

原创 最近整理了一些Vue-router方面的面试题

目录1、 Vue-Router 是干什么的，原理是什么？2、 路由之间是怎样跳转的? 有哪些方式?3、 Vue-Router 怎么配置路由4、 Vue-Router 有哪几种路由守卫?5、 Vue-Router 的钩子函数都有哪些?6、 路由传值的方式有哪几种7、 怎么定义 Vue-Router 的动态路由?怎么获取传过来的动 态参数?8、 query 和 params 之间的区别是什么？9、 $route 和$router 的区别是什么？10...

原创 vue生命周期,钩子函数和路由守卫详解...

1.vue官网有关生命周期的图片2.详细列表在vue实例的整个生命周期的各个阶段，会提供不同的钩子函数以供我们进行不同的操作。先列出vue官网上对各个钩子函数的详细解析。生命周期钩子 详细 beforeCreate 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 created 实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算...

原创 Vue-Router 路由守卫详解

vue-router 路由共分为三大类: 全局守卫 路由独享守卫 路由组件内的守卫 守卫方法接收三个参数： to：即将要进入的目标路由对象 from：当前导航正要离开的路由 next：执行下一步 1). next()：进入管道中的下一个钩子，如果全部的钩子执行完了，则导航的状态就是 confirmed（确认的） 2). next(false)：这代表中断掉当前的导航，即 to 代表的路由对象不会进入，被中断，此时该表 ...

原创 旧项目使用Eslint 的方法

由于react项目安装项目时没有自定义的选项,下面我们就以react项目为例:

原创 vue 全屏功能组件(screenfull)的使用

在顶部的工具栏中补充一个按钮，点它之后进行全屏展示。为了方便复用功能，把它注册成一个全局组件1 创建组件<template> <!-- 放置一个图标 --> <div style="display:inline-block"> <svg-icon icon-class="fullscreen" class="fullscreen" /> </div></template><scri...

原创 vue 富文本(vue-quill-editor)的使用

1 下载插件npm install vue-quill-editor –save2 挂载或引入2.1 在组件中进行引入 由于在一个项目中富文本使用的地方很少,所以不需全局注册// 引入富文本import { quillEditor } from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.snow.css'import 'qui...

原创 vue 时间格式化插件(dayjs)的使用

1 安装插件npm install dayjs或yarn add dayjs2 将dayjs挂载到全局上2.1 在main.js 全局挂载/** * 时间格式化过滤器 */// 引入dayjs格式化时间import dayjs from 'dayjs' // 引入中文包import 'dayjs/locale/zh-cn' // 导入相对时间插件import relativeTime from 'dayjs/plugin/relative...

原创 vue 多语言国际化支持

原创 使用递归的方法实现数组转树

const arr = [ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部'}, { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'}, { 'id': 'd2', 'pid': '', 'name': '技术部'}, { .

原创 props的传递是异步的

props的传递是异步的案例如下:父组件<template> <div class="approvals-container"> <Son :id="num" ref="refSon" /> <button @click="changeID">修改id</button> </div></template><script>import Son from './.

原创 Vue.use与vue.component的区别

1.Vue.use与vue.component的区别Vue.use是注册插件,而vue.component是注册组件.差别就像是Vue.use=只能穿戴,vue.component=手机.Vue.use比vue.component更强大,一般是由多个组件组成.2.vue.use 如何封装 Vue.use 可以接收一个对象 对象obj中需要提供一个 install 函数 在 Vue.use(obj) 时，会自动调用该 install 函数，并传入 Vue构造器 ..

原创 vue 路由

理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。 前端路由：key是路径；value是组件component，用于展示页面内容。当浏览器的路径改变时, 对应的组件就会显示 后端路由：key是路径；value是函数function，用于处理客户端提交的请求。服务器接收到一个请求时, 根据请求路径找到匹配的函数 来处理请求, 返回响应数据 vue-router 的理解：vue 的一个插件库，专门用来实现 SPA 应用1.基本使用

原创 vue组件通信方式

vue组件通信方式一、props(父向子传值----自定义属性) / $emit(子向父传值----- 自定义事件)父组件通过props的方式向子组件传递数据，而通过$emit子组件可以向父组件通信。1. 父组件向子组件传值(props)下面通过一个例子说明父组件如何向子组件传递数据：在子组件article.vue中如何获取父组件section.vue中的数据articles:['红楼梦', '西游记','三国演义']// section父组件<template> .

原创 Element-ui 表格下页序号延续的写法

首先在序号的标签中 <el-table-column> 添加第二步就是在方法中写一个自定义方法

原创 Element-ui 树形控件修改字体图标代码

代码效果图如下

原创 watch 深度监听 immediate，handler，deep的使用

我们使用watch监听数据时，有三个选项，handler，deep，immediate使用 immediate和handler这样使用watch时有一个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值的时候也执行函数，则就需要用到immediate属性。handler我们平时的写法，就默认写的是handler，vue.js会处理这个逻辑，最终编译出来就是这个handler watch: { // 通过输入框文字的变化.

原创 查询一个数组中的元素出现次数

方法一 : // 统计数组中 相同值出现的次数 var arr = [2,3,5,6,7,1,3,4,2,4,3] let obj = {} for(let i = 0 ; i < arr.length; i++) { if(obj[arr[i]]){ //如果obj中有值， +1 （如果数组中有值 是0，注意true 和 false 的转换） obj[arr[i]] += 1 }else{ // 如果obj.

原创 svg 格式的图片

在新项目中使用svg-icon组件的步骤1.安装依赖 在终端输入npm i svg-sprite-loader 按回车2.配置文件vue.conflg.jsconst path = require('path')function resolve (dir) { return path.join(__dirname, dir)}下方继续配置{ // 省略其他... chainWebpack (config) { // set svg-spri...

原创 Vue插槽

Vue插槽 作用：让父组件可以向子组件指定位置插入内容(可以是HTML结构,也可以是其他组件)，这也是一种组件间通信的方式 分类：默认插槽、具名插槽、作用域插槽 理解：父组件中把子组件写成双标签形式，在双标签里面写上内容，在子组件定义插槽后就会将该内容插入到子组件的指定位置(所在的位置)，至于样式，写在父组件或子组件里都可 样式写在父组件中：解析后的结构带着样式插入插槽 样式写在子组件中：解析后只把结构插入插槽，样式在子组件中控制 使用方式： 1. 默认插槽：

原创 Git 常用命令

git init 在本地新建一个repo,进入一个项目目录,执行git init,会初始化一个repo,并在当前文件夹下创建一个.git文件夹.git clone 获取一个url对应的远程Git repo, 创建一个local copy. 一般的格式是git clone [url].clone下来的repo会以url最后一个斜线后面的名称命名,创建一个文件夹,如果想要指定特定的名称,可以git clone [url] newname指定.gi...

原创 Js的6种继承方式

js6种继承方式js中es6之前没有类和继承,但是可以通过各种巧妙的方式来实现继承继承应该达到的状态:1.子类可以使用父类中的属性和方法2.子类不同的实例之间不会互相影响3.子类实例能够向父类传参4.能实现多继承(一个子类可继承多个父类)5.父类的方法能被复用(不会过多的消耗内存),而不是每创建一个子类实例都生成一份父类方法一.原型链继承1.具体实现:父类的实例作为子类的原型对象,核心实现代码标注如下: // 父类(我就不写成父构造函数了,这样比较简洁)

原创 sync和v-model的区别

v-model 修饰符首先:v-model是语法糖<template> <!-- v-model 是语法糖 --> <Input v-model="username"> <!-- 默认等效与下面这行 <Input :value="username" @input="username=$event.target.value"> --></template>但是可以通过设置model选项修..

原创 前端程序员控制台报错汇总

1、xxx is not definedxxx 没有定义 2、xxx is not a functionxxx 不是一个函数xxx此时是undefined3、Cannot read property ‘xxx’ of undefined不能读取undefined的xxx属性xxx前面的变量是undefined4、Cannot set property ‘xxx’ of null不能给null设置xxx属性xxx前.

原创 控制台报 cannoot read properties of undefined 的错误分析

首先分析单词弟意思cannoot : 无法read : 读取properties : 内容of : 的分析上图里的意思就是无法读取 return_url的内容,也就是说明return_url之前的某一个属性的单词写错了结果原因这个属性没有,也就找不到return_url , 所以就报 undefined 错简易方法:看下面 at 错误提示,因为 at 提示是从下往上报的,也可以认为最下面的那个 at 在程序中...

原创 用户登录流程

思考：获取个人信息是在进入主页之前发的分析 :由于用户资料数据是需要在多个组件中共享的数据，所以我们按照我们之前定好的原则，如果接口获取到的数据需要共享，那么该状态数据的操作，我们都放到vuex中来集中管理思路 : 在进行路由跳转时，获取用户个人信息,保存到vuex 写actions --> mutations ---> state 在路由守卫中，发ajax请求 进入主页后，从vuex中取出数据...