- 博客(56)
- 收藏
- 关注
RSS订阅原创 高频题整理
vue什么是mvvm什么是响应式的原理什么是render函数vue中生命周期与钩子函数路由转跳时会触发哪些钩子什么是虚拟dom,有什么好处js基础防抖节流作用域链原型链-原型事件循环闭包继承方法class和普通构造函数this指向for-in for of遍历对象的方法promise作用域预解析es6新增语法属性的检测方法...
2021-11-25 21:00:53
662
原创 三分钟入门TypeScript(未完待续)
什么是TypeScriptts就是typeScript的简称,是javascript的超集 它比原生js多出了类型支持 ts是由微软开发完成,能运行ts的地方也可以运行javascriptTypeScript环境调配全局安装ts的包 npm i -g typescript 把文件后缀名改为.ts就可以使用了TypeScript类型注释 ts对比js多了类型的注释 一般写为//js写法 const str= 'hello ...
2021-11-24 20:47:54
742
原创 react路由的使用
在React中路由的使用和vue-router非常相似1. 先下包react-router-dom@5.3.0 可以自己用npm yarn cnpm 进行下载,我使用的是5.3.0版本2. 导入并使用import { HashRouter as Router , Route, Link } from 'react-router-dom'export default function App () { return ( <div> <h1...
2021-11-21 16:42:58
361
原创 react路由转跳中非组件环境下拿到路由信息
用location.href直接赋值会导致页面刷新。如何在非组件内使用history跳转？背景react-router-dom中直接有Router这个包，但是它Router 没有history属性有如下公式：Router + HashHistroy = HashRouterRouter + BrowerHistroy = BrowerRouter安装react-router-dom时，默认会安装history包，我们可以通过这个包来自己创建history对象思路单
2021-11-18 18:46:00
588
原创 redux拓展优化action creator 与Action Type的使用
redux拓展优化action creatordispatch({type: 'book/add', payload: '三国演义'})dispatch({type: 'book/add', payload: '红楼梦'})一个action的type名字出现多次,多次dispatch会重复,不利于修改思路补充一个action creator。 它是一个函数。 作用：用来创建指定类型的action。 入参：payload 返回值: action
2021-11-17 20:41:56
499
原创 react中react-router-dom中的编程式导航
场景：点击登录按钮，登录成功后，通过代码跳转到后台首页，如何实现？页面跳转有两类方式： 用户点击链接跳转 写代码跳转-编程式导航 编程式导航的格式import {useHistory} from 'react-router'export default function App() { const history = useHistory() history.push('/find') // 前进或后退到某个页面，参数 n 表示前进或后退页面数量（比如：-
2021-11-17 20:31:14
619
原创 react中react-router-dom的使用方法
react中的路由介绍现代的前端应用大多都是 SPA（单页应用程序），也就是只有一个 HTML 页面的应用程序。因为它的用户体验更好、对服务器的压力更小，所以更受欢迎。为了有效的使用单个页面来管理原来多页面的功能，前端路由应运而生。前端路由的功能：让用户从一个视图（页面）导航到另一个视图（页面） 前端路由是一套映射规则，在React中，是 URL路径 与 组件 的对应关系 使用 React 路由简单来说就是：配置路径和组件（配对） React路由使用的基本 ...
2021-11-17 20:25:27
1238
原创 Redux与React-Redux使用步骤图
重点:如果需要修改数据一定是使用dispatch事件(核心中的核心), 使用redux和react-redux都需要添加订阅者,但是
2021-11-15 21:03:03
469
原创 JavaScript 原生对象、内置对象、宿主对象的区别
1.内置（Build-in）对象：总是在引擎初始化阶段就被创建好的对象，是原生对象的一个子集2.原生（Naitve）对象：除了内置对象，还包括了一些在运行过程中动态创建的对象3.宿主对象：宿主对象不是引擎的原生对象，而是由宿主框架通过某种机制注册到JavaScript引擎中的对象一、原生对象 ECMA-262 把原生对象定义为“独立于宿主环境的 ECMAScript 实现提供的对象”。 包含： Object、Function、Array、String、Boo...
2021-11-14 21:25:59
413
原创 常见的前端大厂ui库
1.didi vue移动端uiku介绍:cube-ui 是基于 Vue.js 实现的精致移动端组件库。特性 质量可靠 由滴滴内部组件库精简提炼而来，经历了业务一年多的考验，并且每个组件都有充分单元测试，为后续集成提供保障。 体验极致 以迅速响应、动画流畅、接近原生为目标，在交互体验方面追求极致。 标准规范 遵循统一的设计交互标准，高度还原设计效果；接口标准化，统一规范使用方式，开发更加简单高效。 扩展性强 支持...
2021-11-12 21:09:59
604
原创 react中函数组件中使用useContext全局传值的方法
react中使用useContext步骤一共分为3步1.在根组件中导入并且调用createContext方法代码示例import { createContext } from 'react'export const Context = createContext()2.使用provider组件包裹根组件, 并且通过value属性提供要共享的数据 代码示例return( <Context.Provider value...
2021-11-12 18:39:12
1724
原创 为什么避免 v-if 和 v-for 用在一起
在官方文档中明确指出v-for和v-if不建议一起使用。原因：v-for 比 v-if 具有更高的优先级，每一次都需要遍历整个数组，造成不必要的计算，影响性能，即使100个list中只需要使用一个数据，也会循环整个数组。解决方案：在其父元素上进行v-if判断，在内部执行v-for循环 如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项computed: { list () { return this.list.filter(item...
2021-11-08 21:24:34
313
原创 react某次dome记录
import { Component } from 'react'import ReactDOM from 'react-dom'class HelloReact extends Component { state = { name: 'jack', assets: [{ id: 1, name: '手机' }, { id: 2, name: '耳机' }], skill: ['vue', 'react'], // angular info: { ag.
2021-11-07 15:26:44
155
原创 vue问题整理(持续更新)
1.讲一下组件的命名规范Vue中组件的命名规范在官网中有明确的写法.有两个规范规则组件名必须为多个单词, 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。 组件的命名一般有两种方式: 脊柱命名法:xxx-xxx. 大驼峰命名法:XxxxXxx. 使用大驼峰方式的命名只可以用于其他组件的template中,在渲染页面时使用,需要转换为脊柱的方式.2.怎么捕获 Vue 组件的错误信息?在vue官网中写了2种捕获 Vue 组
2021-11-07 15:22:15
504
原创 react中的组件(多字预警)
react中组件的特点独立 可复用 可组合组件的内容结构html 样式css 逻辑JS组件的分类基础组件:指input.button这种基础标签,以及封装过的通用UI组件 业务组件:由基础组件组合成的业务抽象化UI,比如部门信息下拉框 区块组件:由基础组件和业务组件组合成的UI块 页面组件:展示给用户的最终页面，一般就是对应一个路由规则组件的两种创建方式1.js中使用函数创建组件// 定义一个函数式组件const app = () => { return
2021-11-06 21:39:41
228
原创 react中引入eslint 环境配置
目标:在react项目中配置elint,并启用保存自动化格式功能.思路:在项目中安装eslint 用eslint的init指令创建eslint配置文件 设置vscode中的自动保存格式化命令步骤 终端中输入命令 (安装ts的指令 非必须但是ts格式化格式更高级) npm i eslint typescript 2.在项目根目录,运行npx eslint --init 3.按照交互提示安装相关插件 3.1.选择是是否使用TypeScr...
2021-11-05 19:35:25
269
原创 Vue富文本编辑器-Vue-Quill-Editor
使用步骤api地址:vue-quill-editor - npmQuill editor component for Vuehttps://www.npmjs.com/package/vue-quill-editor1.下载quill(依赖包)npm install quill --save2.下载包Vue-Quill-Editor npm install vue-quill-editor --save3.代码<template> <div c.
2021-10-31 21:26:41
544
原创 项目最终打包优化
打包优化-整体介绍项目开发完成打包 ： 用webpack做打包（把.vue, .js, .less -----------> .js, .css, .html） 在项目中都会提供命令： npm run build 打包优化: 在保证功能可用的前提下，让我们的文件尽可能小 在保证功能可用的前提下，让我们的页面显示出来的速度更快一些 打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.
2021-10-31 18:23:13
305
原创 多语言国际化支持
element-ui中组件的中英文切换目标实现elementUI中英文切换功能，感受中文切换的效果安装国际化的包npm i vue-i18n@8.22.2ElementUI多语言配置1.创建文件夹src/lang/index.js内部内容如下// 进行多语言支持配置import Vue from 'vue' // 引入Vueimport VueI18n from 'vue-i18n' // 引入国际化的插件包import locale from 'element-u
2021-10-30 12:15:00
387
原创 vue中excel导出功能
将vue-element-admin中的src/vendor/export2Excel复制到本项目中，直接使用 插件包位于src/vendor/export2Excel中，采用的是按需引入的方式 什么时候正式要使用导出功能了,插件才会被正式引入到应用 在项目中安装依赖 npm install file-saver script-loader xlsx --save 给导出按钮添加点击事件回调函数内容如下...
2021-10-29 16:56:04
646
原创 vue中excel导入功能
批量导入信息的时候就需要excel导入功能,可以大大提高工作效率,但是这个功能应该如何实现呢.1.excel导入思路1.1前端为主导 用户上传excel文件,前端将excel文件读取,然后还原成最基本的行列样式,按照后端给出的接口上传给服务器.1.2后端为主导 前端只负责接收excel文件,将文件直接发给后端,后端处理数据.2.前端数据处理数据 因为经常会有excel上传数据的功能,所有现在已经有成熟的解决方案,直接使用便可以...
2021-10-29 16:17:42
2636
原创 浅析浅拷贝与深拷贝
深拷贝和浅拷贝是经常在面试中会出现的，主要考察你对基本类型和引用类型的理解。所以提起深浅拷贝就不得不说下数据类型.一.数据类型数据类型一般分为两种:简单数据类型与复杂数据类型.简单数据类型为:String.Number.Boolean.Null.Undefined.Symbol复杂数据类型为:对象数据类型,对象,数组二.简单数据类型与复杂数据类型在内存上储存区别复杂数据类型是在栈内存中存储了指针,指向堆中的起始地址,需要调用值时,先从栈中寻找然后从堆中获得实...
2021-10-27 21:51:17
104
原创 添加角色使页面跳转到最后一页
目的:，当添加角色完成之后,让页面跳转到最后一页,可以看到新增的数据.解决方法:先让自身total 自加1,来模拟后台总数,然后除以当天每页显示的条数,向上取整来得到向服务器请求需要发送的页数,方法一: // 添加角色是使页面跳转到最后一页this.pagination.page = Math.ceil(++this.total / this.pagination.pagesize)console.log(this.pagination.page)方法二: 补充计算属性...
2021-10-26 22:38:35
165
原创 使用递归的方法实现数组转树
把平铺的数组结构转成树形结构数组:const arr = [ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部'}, { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'}, { 'id': 'd2', 'pid': '',
2021-10-26 22:14:00
294
原创 vue中Vue.use与vue.component的区别
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) 时，会...
2021-10-22 17:09:00
2566
原创 element-ui中的表格数据格式化
在向后台请求数据时,经常会发生请求回来的值是一个数字比如这里明明请求的是聘用形式,返回值却是1这个时候就需要前端自己查看文档,确认数字代表什么了.一般在项目都有一个文件,里面放了枚举的文档,比如这个项目中就是constant文件夹.在求中就可以找到数字代表了什么.现在,我们知道了数字1代表正式,数字2代表了非正式,现在我们只需要将数字转换成里面的value就可以了....
2021-10-21 22:10:15
1415
原创 element-ui中表格序号翻页延续的方法
1.在element-ui的文档讲述了如何自定义序号的方法2.所以 我们只需要在代码中添加上type=''index''便可以自定义序号3.自定义index方法这样序列号便可以翻页延续了
2021-10-21 08:53:20
216
原创 vue watch监听中 immediate, deep, hander的作用
1. immediateimmediate的值默认是false,在第一次进入页面页面时,如果没有发生数据变化watch并不会立即监听只有发生数据改变,hander才会有操作,但是如果将immediate设置为true,在第一次进入页面时就会绑定值. watch: { a: { handler(newVal, oldVal) { console.log(oldVal) console.log(newVal) }, imme.
2021-10-19 20:19:51
629
原创 用非递归的方式实现数组转树
把平铺的数组结构转成树形结构数组:const arr = [ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部'}, { 'id': '2f', 'pid': '2c', 'name': '薪资管理部'}, { 'id': 'd2', 'pid': '',
2021-10-19 19:52:54
322
原创 sync与v-model的区别
1. sync的语法糖与v-model的语法糖1.1sync的语法糖<com1 :prop="val" @update:prop="value => val = value"></com1>1.2v-model的语法糖<com1 :value="num" @input="(val)=>this.num=val"></com1>2.sync修饰符的工作原理<com1 :a.sync="num" .b.sync="n
2021-10-18 10:58:47
116
原创 Element-ui中导航菜单选择高亮
Element-ui中航菜单选择高亮有两种方法1.active-text-color与default-active 在Element-ui的文档中写明了可以使用active-text-color来选择当前激活菜单的文字颜色,default-active是选择当前激活菜单的index.2.动态class is-active 在点击导航时会动态添加类名 is-active,可以给is-active来添加css属性,以实现高亮功能....
2021-10-17 20:57:38
2640
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人