- 博客(57)
- 收藏
- 关注
RSS订阅原创 $router 和 $route的区别
$router: 用来操作路由的 router 实例，比如 $router.push。 $route: 当前的路由对象，包含路由信息：path fullpath,name
2021-12-02 19:14:15
274
原创 js 事件代理详解
事件代理就是基于js的事件流产生的，事件流有2中类型，即冒泡和捕获。冒泡：当子元素触发某个事件的时候后，该事件会依次向上触发父元素的同类事件捕获：和冒泡类似，只不过事件的顺序相反，即是从上级节点传递到下级节点事件委托利用事件冒泡，将事件加载父元素或者祖元素上，触发该事件。e.target<body> <div id="big"> <div id="center"> <div id=...
2021-12-02 15:39:12
4843
原创 TypeScript类型注解
说明: 使用 {} 来描述对象结构 属性采用属性名: 类型的形式，如果是多行，可以省略, 方法采用方法名(): 返回值类型的形式 可选使用 ? TypeScript 是 JS 的超集，TS 提供了 JS 的所有功能，并且额外的增加了：类型系统可以显示标记出代码中的意外行为，从而降低了发生错误的可能性类型注解:let 变量名: 类型 = 初始值示例代码:let age: number = 18这样我们就声明了age这个变量所接收的值必须是n.
2021-11-24 19:54:02
1665
原创 5分钟入门TypeScript
TypeScript 是什么: TypeScript 简称：TS，是 JavaScript 的超集。简单来说就是：JS 有的 TS 都有。JS写的代码在TS的环境下都能跑。 在 JS 基础之上，为 JS 添加了类型支持。TypeScript = Type + JavaScript TypeScript 是微软开发的开源编程语言，可以在任何运行 JavaScript 的地方运行 // TypeScript 代码有明确的数据类型let age1: number = ...
2021-11-24 11:49:51
3898
原创 react 中如何在组件中传递路由参数
需求:在home/list，删除token，刷新，被拦截回login。再次登录成功，能回跳进入home/list.1. 在根组件中的 路由组件中的路径后面加上 /:xxxx 2. 当token失效时,就会跳转到登录页,跳转的时候携带跳转前的路径3.再次登录的时候判断一下 如果有参数就按照参数跳 如果是第一次启动项目(当项目启动的时候还没有上一次的路径参数)就直接跳转到首页...
2021-11-19 22:45:23
238
原创 this指向的面试题
1. 在函数中直接使用 this指向window2.函数作为对象的方法被调用时(谁调用就指向谁) this 指向调用者 <script> var name = 222; var a = { name: 111, say: function () { console.log(this.name); }, }; var fun = a.say; fun();..
2021-11-19 03:32:22
499
原创 使用git 绑定项目
1. 在项目的src 文件夹下 打开 git终端 如果src中有git文件,就删掉(项目刚创建的时候可以删)2.git init git add .注意:初始化可以换成其他的字符git commit -m 初始化注意 下图第一步输入之后敲回车在输入第二步然后就推上git仓库了 哦...
2021-11-17 23:33:07
269
原创 React项目中如何配置Eslint
1. 下eslint包yarn add eslint -D2. eslint 初始化npx eslint --init3.vscode在保存代码时自动用eslint做格式化步骤： 打开设置 工作区设置 { "eslint.run": "onType", "eslint.options": { "extensions": [".js", ".vue", ".jsx", ".tsx"...
2021-11-17 23:16:54
628
原创 React项目中封装axios工具函数
1.首先在 src 目录下新建一个 utils文件夹2.在utils文件夹下新建一个request.js文件3. 在request.js文件中粘贴如下代码 (一定要下在axios包)import axios from 'axios'const instance = axios.create({ baseURL: 'http://geek.itheima.net/v1_0/', timeout: 5000})// 请求拦截器instance.interceptors.req.
2021-11-17 18:28:40
242
原创 react 案例(无限接近真实开发)
index.js整体说明: 技术栈:react,react-redux, redux-thunk1. 新建一个文件夹 (桌面)2. 文件夹中打开小黑窗(cmd)3.输入命令npx create-react-app hmtt-app// 解释: npx create-react-app 是固定命令 hmtt-app 表示项目名称，可以修改4. cd hmtt-app中 ...
2021-11-16 00:48:44
3682
1
原创 js面试宝典(必会)---持续更新中
1. 谈谈对js 作用域的理解:官方回答: js全局有全局可执行上下文, 每个函数调用时,有着函数的可执行上下文.每个可执行上下文,都有着对于外部上下文的引用,外部上下文也有着对于外部的上下文词法作用域的引用=>就形成了作用域链本人理解: 当在局部作用域中找一个值时,如果当前作用域中没有,就会往外部上一层的作用域中寻如果外部上一层的作用域中还是没有,那么就会继续往上找,一直找到全局作用域中.这个寻找的过程就称为作用域链2.谈谈你对闭包的理解闭包: 内部函数,访问了...
2021-11-13 22:16:22
1190
原创 react中的逻辑复用
首先这是没有复用逻辑的样子,代码看起来很繁琐,而且不能复用所以为了实现复用,我们需要新建一个js文件,将相同的逻辑代码提取出来并默认导入引入逻辑复用文件后的样子,这样就可以在任意一个逻辑相同的文件中实现复用比如验证码倒计时的文件中也可以如下图这样使用,只不过根据需求修改以下函数中第二个参数回调函数所执行的操作,因为验证码倒计时的效果是在倒计时结束后按钮恢复点击状态...
2021-11-13 11:38:56
637
原创 react函数组件跨组件传值
需求 现在数据都在App.js中,而Mycount.js需要用到根组件App.js的数据 所以就需要用到跨组件传值1. 在根组件App.js导入并调用createContext方法，得到Context对象，导出2.在根组件中使用 Provider 组件包裹根组件，并通过 value 属性提供要共享的数据,由于图中Value传的是一个对象形式,然后通过es6的简写语法原本是value={{countDown:countDown}}如果只是传一个值,那么就写成一...
2021-11-12 19:49:38
537
原创 前端面试(必会题)
Vue数据双向绑定原理实现mvvm的数据双向绑定，是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来给各个属性添加setter，getter并劫持监听，在数据变动时发布消息给订阅者，触发相应的监听回调。就必须要实现以下几点：1、实现一个数据监听器Observer，能够对数据对象的所有属性进行监听，如有变动可拿到最新值并通知订阅者2、实现一个指令解析器Compile，对每个元素节点的指令进行扫描和解析，根据指令模板替换数据，以及绑定相应的更新函数3、实现
2021-11-12 00:32:09
539
原创 请详细介绍一些 package.json 中的配置的作用(了解)
{ "name": "test", // 假如项目叫做test "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC"}name: 这个很好理解，就是package的名.
2021-11-10 18:35:05
392
原创 scss 是什么？在 Vue.cli 中的安装使用步骤是？有哪几大特性？（gxcw）
首先什么是scss呢？scss是一种css预处理语言，是一个css的扩展，它在css语法的基础上，允许使用变量，嵌套规则，混合，导入，继承等功能，使得css更加强大和优雅，而且其完全兼容css3。在vue.cli中的使用方法:第一步：先装 css-loader、 node-loader、 sass-loader 等包第二步：在 build 目录找到 webpack.base.config.js，在那个 extends 属性中加一个拓展.scss第三步：在同一个文件，配置一个 modul
2021-11-10 18:22:45
956
原创 is 这个特性你有用过吗？主要用在哪些方面？ (gxcw)
答: 用过,主要用于2个方面1. 动态组件<component :is="componentName"></component>， componentName 可以是在本页面已经注册的局部组件名和全局组件名,也可以是一个组件的选项对象。当控制 componentName 改变时就可以动态切换选择组件2. html结构中可以解决dom结构中对放入html的元素有限制的问题有些 HTML 元素，诸如 <ul>、 <ol>、 <t..
2021-11-10 18:17:05
267
原创 在 Vue 实 例 中 编 写 生 命 周 期 hook 或 其 他option/propertie 时，为什么不使用箭头函数？
因为箭头函数自己没有定义 this 上下文，而是绑定到其父函数的上下文中。当你在 Vue 文件中使用箭头函数（ =>）时， this 关键字并不会绑定到 Vue 实例，因此会引发错误。所以强烈建议改用标准函数声明。...
2021-11-10 18:01:50
388
原创 React中的组件通讯
props的children属性组件通讯-父传子1. 父组件中的子组件标签上传值2. 给子组件标签添加属性，值为 state 中的数据组件通讯-子传父思路利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数。步骤 父组件 定义一个回调函数f（将会用于接收数据） 将该函数f作为属性的值，传递给子组件 子组件 通过 props 获取f 调用f，并...
2021-11-08 21:21:04
377
原创 Vue 的 nextTick 的原理是什么?
为什么要使用nextTick因为vue中的DOM的更新是异步执行的,就是当数据发生变化时，视图不会立即更新。而是将这些操作都缓存在一个队列，在一个事件循环结束之后，刷新队列，统一执行dom更新操作。nextTick 的原理在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新之后的DOM在什么地方使用呢?因为created()钩子函数执行的时候DOM并未进行任何渲染，而此时进行DOM操作是徒劳的，所以在Vue生命周期的created()钩子函数进行的DO.
2021-11-07 21:03:30
337
原创 如何对 Vue 首屏加载实现优化?
对Vue首屏的加载优化有如下几点把不常改变的库(如Element-ui,echarts)放到 index.html 中，通过 cdn 引入 Vue 路由的懒加载 Vue 组件尽量不要全局引入 开启 gzip 压缩 关闭sourcemap文件打包(打包后生成的sourcemap文件的主要用来处理chunk文件映射，这样你的程序到生产环境运行时报错还能找到源码对应的位置，但既然是生产环境了，sourcemap文件也没啥用了) 图片懒加载...
2021-11-07 19:55:56
416
原创 68. Vue 中操作 data 中数组的方法中哪些可以触发视图更新，哪些不可以，不可以的话有什么解决办法？
可以触发视图更新有以下几种方法:push()、 pop()、 shift()、 unshift()、 splice()、 sort()、 reverse() filter() concat() slice()不可以触发视图更新有以下2种方法 直接用索引设置元素，如 this.array[index] = newValue 直接修改数组的长度，例： this.array.length = newLength ...
2021-11-07 19:30:47
441
原创 66 .VNode 是什么？ 什么是虚拟 DOM？
1） VNode 是什么VNode 是 JavaScript 对象， VNode 表示 虚拟节点 Virtual DOM，用 JavaScript 对象来描述真实的 DOM 把 DOM 标签 属性，内容都变成 对象的属性
2021-11-07 02:45:43
663
原创 怎样理解 Vue 的单向数据流
单向数据流的意思是指数据的改变只能从一个方向修改举个栗子：如一个父组件有两个子组件，分别为1和2。父组件向子组件传递数据，两个组件都接收到了父组件传递过来的数据，在组件1中修改父组件传递过来的数据，子组件2和父组件的值不会发生变化。但是如果父组件改变相应的数据，两个子组件的数据会发生相应的改变。 如果子组件想修改数据,只能通过 $emit派发一个自定义事件，父组件接收到后，由父组件修改。...
2021-11-07 01:52:10
812
原创 说说你对 SPA 单页面的理解，它的优缺点分别是什么？
SPA 单页面将所有的活动局限于一个 Web 页面中，仅在该 Web 页面初始化时加 载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成了，SPA 不会因为用户 的操作而进行页面的重新加载或跳转。取而代之的是利用 路由机制 实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。我认为他们的优点有三条: 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染 SPA 相对对服务器压力小 前后端分离，架构清晰，前端进行交互逻
2021-11-05 22:59:19
830
原创 你知道 style 上加 scoped 属性的原理吗？
1.scoped的作用:scoped是为了在vue文件中使样式模块化,防止样式污染,添加上scoped属性表示只在当前的模块中生效2.scoped 的实现原理： Vue 中的 scoped 属性的效果主要通过 PostCSS 转译实现, PostCSS 给当前组件下的所有 dom 添加了一个唯一不重复的动态属性[ data-v-xxxx],而其他组件就不会添加[data-v-xxxx]属性 如果引用了第三方组件，需要在当前组件中局部修改第三方组件的样 式，而又不想去除 s.
2021-11-05 22:53:42
396
原创 v-if 与 v-show 的区别
首先 v-show 和 v-if都是用来隐藏或者显示DOM元素的 , 虽然两者达到的效果是一样的,但是在性能上和使用场景是不同的, 并且v-if 还能搭配 v-else 来使用 而v-show 只能单独使用v-show:v-show不管条件是真还是假，第一次渲染的时候都会编译出来，也就是标签都会添加到DOM中。之后切换的时候，通过display: none;样式来显示隐藏元素。可以说只是改变css的样式，几乎不会影响什么性能。v-if :在首次渲染的时候，如果条件为假，什么也不操作..
2021-11-05 18:48:03
122
原创 通过枚举文件实现数据格式转换
问题重现:请求回来的数据中的值 我们需要渲染到页面中,但是后端给的数据是数字,而网页中要展示的是文字因此我们需要将后端请求回来的数据格式转换一下1. 写一个一一对应的枚举文件. (按需导出)2.在需要转换数据的项目文件中引入此文件3. 封装一个转换格式的函数4.在结构中使用...
2021-11-02 21:28:48
188
原创 数据转换(1--是,0--否)
我们需要把前台是否显示的数据改成 是 或者 否 显示我们可以使用作用域插槽拿到这一列的数据 <el-table-column label="前台是否显示" prop="isFrontDisplay"> <template slot-scope="scope">{{ scope.row.isFrontDisplay ? "是" : "否" }}</template> <...
2021-10-30 22:34:43
924
1
原创 数组方法---reduce
当我们需要遍历一个数组时 —— 我们可以使用forEach，for或for..of。当我们需要遍历并返回每个元素的数据时 —— 我们可以使用map。arr.reduce方法和和上面的种类差不多，但稍微复杂一点。它们用于根据数组计算单个值。语法array.reduce(function(accumulator, currentValue, currentIndex, arr), initialValue)该函数一个接一个地应用于所有数组元素，并将其结果“搬运（car...
2021-10-29 22:19:05
110
原创 数组方法---forEach
arr.forEach方法允许为数组的每个元素都运行一个函数。语法:array.forEach(function(currentValue, index, arr), thisValue)数组求和<script> let arr = [1,2,3,4,5] let sum = 0 arr.forEach(item=>{ sum += item return sum }) ...
2021-10-29 21:33:58
258
原创 数组方法--splice
arr.splice方法可以说是处理数组的瑞士军刀。它可以做所有事情：添加，删除和插入元素。语法:array.splice(index,howmany,item1,.....,itemX)删除<script> var arr = [1,2,3] arr.splice(1,1) // 从索引 1 开始删除第一个元素 console.log(arr); // [1,3] </script>替换<...
2021-10-29 20:53:42
204
原创 打包优化--(保姆级教程)
打包优化: 在保证功能可用的前提下，让我们的文件尽可能小 在保证功能可用的前提下，让我们的页面显示出来的速度更快一些 打包命令不一定是- npm run build 而是要根据package.json 中的命令来 根据下图可以看出 打包的命令应该是 npm run build:prod 打包之后，会得到dist目录，如果希望可以双击打开index.html，则需要提前在vue.config.js中配置：vue.config....
2021-10-29 00:12:17
512
原创 史诗级Excel导入功能----熬夜怒肝
excel导入功能介绍１.安装依赖包xlsxnpm install xlsx -S２.引入UploadExcel组件并注册为全局 将vue-element-admin提供的组件复制到我们自己的项目 src/components/UploadExcel下 （(没有文件的伙伴请一键三连,我会好好感谢的,懂得都懂)） ３. 在view文件下准备一个独立的文件夹，新建一个index文件 ４. 配置路由５.测试路由结果...
2021-10-28 01:13:52
237
原创 史诗级Excel导出功能----熬夜怒肝
excel导出功能介绍背景在表格（element-table）中查询到了我们需要的数据，希望用他们生成excel文件，保存在本地。1使用现成的excel导出组件1-1 首先下载依赖的包js-xlsx、file-saver和script-loader npm install file-saver script-loader xlsx --save2.将vue-element-admin中的src/vendor/export2Excel复制到本项目中，直接使用 (...
2021-10-27 21:02:05
100
原创 vue 中表单自定义校验规则
1.给表单元素绑定:rules和:model2.定义简单校验规则在data里面定义rules属性3,给每一个需要验证的表单项绑定简单校验规则 prop(prop 千万不要写在el-input中)4.由于简单的校验规则不满足实际需求,所以需要自定义校验规则//自定义校验 标识名称 const validName = (rule, value, callback) => { // 添加时的校验： 名字不能取子元素的名字 let existNam.
2021-10-26 23:26:16
1076
原创 数组转树形
1 递归方法转换 <script> let arr=[ { 'id': '29', 'pid': '', 'name': '总裁办' }, { 'id': '2c', 'pid': '', 'name': '财务部' }, { 'id': '2d', 'pid': '2c', 'name': '财务核算部'}, { 'id': '2f', 'pi
2021-10-26 22:11:33
79
原创 表单重置(避免数据残留)
当验证不通过时，表单上会出现错误报错，此时，我们直接隐藏这个对话框，然后再次打开时， 表单上的错误信息还是存在的。对话框隐藏包括（点了表单上的：取消，确定，点了弹层中右上角的关闭，点了ESC，点了罩区域）如果再点击添加 那么之前输入的数据会残留在新的表单中我们需要的效果是第二次打开时是一个重新的表单 不是旧的错误表单第一种方法: 就是在表单子组件中设置 v-if ()<el-dialog :visiable="showDialog"> <子组件 v-if=.
2021-10-26 08:52:26
1704
原创 分页BUG(添加成功后跳转到最后一页)
<el-pagination :current-page.sync="curpage" :page-sizes="[2, 5, 8, 10]" :page-size.sync="paramsPage.size" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-chan.
2021-10-25 22:48:31
781
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人