- 博客(13)
- 收藏
- 关注
转载 为什么vue里面data和methods可以直接通过this访问?
其实通过this直接访问到methods里面的函数的原因是:因为methods里的方法通过bind指定了this为new Vue的实例(vm)。其实通过this直接访问到datadata里的属性最终会存储到new Vue的实例(vm)上的_data对象中,访问this.xxx,是访问代理后的。
2023-03-15 16:02:05 648
原创 记录一次前端配置代理踩坑,一个项目不同模块,请求不同的后台地址,前端代理该怎么配置
我们可以通过在写 api 接口的时候,直接给当前的 url 地址配置baseURL,这样在经过全局封装的时候,便不会往前继续拼接。一般项目都是直接通过axios前端请求封装的,这样子会在请求的时候,通过拦截,给全局请求接口拼接上。,在请求封装的时候拼接的 baseURL 也是这个地址,那此时我们怎么办,才能成功的拼接到我们想要的。开发项目的时候,遇到了一个小需求,项目中某一个模块的代码需要调用另外一个后台项目的接口,这样,在我们请求的时候,接口路径的前缀就会变成我们所想要的。,或者要加额外的参数,比如。
2023-03-08 14:33:27 670 1
原创 Vue 了解前端路由 hash 与 history 差异
没了解这两种路由前,不管是 vue还是 react 在项目创建时难免会进行路由之间选择,在 hash 和 history 难免会纠结一番,或者是直接稀里糊涂用了默认带 # 的 hash 路由,看完这篇分享,保准让你之后不会在为选择哪中路由犯难,实现按需选择。有疑问欢迎在评论区指出,大家一起沟通。Vue Router是Vue.js官方的路由插件,它和Vue.js是深度集成的,适合用于构建单页面应用。vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来。
2023-03-03 15:44:42 427
原创 el-table 添加height 固定表头之后,表头右侧留白解决
今天在写一个拖拽计算的时候,因为要获取到计算结果,底部留有高度不够el-table展示,所以就添加了height属性来固定表头,结果碰到了一个坑。
2023-03-03 14:56:22 1365
原创 浅谈 async 和 await
首先我们先从字面意思来理解。async是“异步”的简写,而await可以认为是async wait的简写(就是异步等待)。所以应该很好理解async用于申明一个function是异步的,而await用于等待一个异步方法执行完成。我们要知道async。
2023-03-03 14:52:45 345
原创 前端路由刷新404问题
,然后就会在前端匹配到相应的组件进行渲染,但是如果此时我们刷新一下页面.就会出现页面 404 问题。解析,拿到ip地址然后根据ip地址向该服务器发起请求,服务器接受到请求之后,然后返回相应的结果(路由模式的时候,相当于我们直接去请求服务器上当前接口,如果服务器上并没有这个接口,那么就会报错(中配置代理转发的地方配置即可,可以最简单的配置为true。我们都知道在前端浏览器中,敲入一个url的时候(里面去配置的话,就会出现这个问题,究其原因是因为。直接创建的,那么这个问题是不会出现的,因为在。
2023-03-03 14:51:47 1691
原创 前端不闪屏刷新页面
前几天同事问了我一个问题,就是他登录和退出写成了一个悬浮在右侧的小组件,登录之后变成用户名和个人中心,退出之后变成登录。但是数据是存在store的,每次退出想清空数据,并刷新数据。这时候,我首先就想到了,直接利用浏览器的就可以解决问题,但是这个方法有一个弊端,就是它会闪屏,并且不会保证其他的组件keep-alive。在经过了面向百度编程之后,发现了一个比较优的解决办法,今天记录一下。
2023-03-03 14:51:36 991
原创 初次上手Pinia体验 对比vuex
Pinia最初是在 2019 年 11 月左右重新设计使用Composition API 的Vue Store 外观的实验。从那时起,最初的原则仍然相同,但 Pinia 适用于 Vue 2 和 Vue 3,并且不需要你使用组合 API。今天来聊聊初次使用pinia的体验和使用过程。无需创建自定义复杂包装器来支持 TypeScript,所有内容都是类型化的,并且 API 的设计方式尽可能利用 TS 类型推断。不再需要注入借助辅助函数、直接调用它们的方法,享受自动完成功能!
2023-03-03 14:51:03 472
原创 Element el-table表格排序 过滤空数据
Element el-table表格排序 过滤空数据今天做项目的时候,遇到了一个需求,排序表格内容的时候,只排序当前列有数据的数据,如果当前列没有数据,则将此行数据一直放置最后Element 中 如果采用默认排序, 默认会将此列无数据的行放置在有数据的之前,如下图自己手动排序的结果排序前1.首先在需要调用的表头上添加 sortable=“custom” 为定义过滤2.在el-table上监听需要自定义过滤的方法 并且传入默认排序 sortRule每次点击的时候会调用此方法data()
2021-10-14 18:21:03 2310 1
原创 Vite中配置路径别名
Vite中配置路径别名刚接触vite+vue3的项目, 配置路由的时候不想通过…/…/访问, 想配置一个路径别名,踩坑vite中配置别名和vue2的配置别名大差不差 但是会有版本的区别首先初始化一个vue3+vite的项目,新建一个vite.config.js在项目中引入基于nodejs的path模块先引入path模块const { resolve } = require('path')添加如下代码 将项目中静态src路径修改为/@/ (重启项目即可配置成功)resolve:
2021-10-13 10:45:04 5042 1
原创 前端JS常用正则大全,全网最全正则表达式
最全正则表达式export default { /*大于0小于100数字*/ validateNumber: function validateNumber(val) { const reg = /^\d\.([1-9]{1,2}|[0-9][1-9])$|^[1-9]\d{0,1}(\.\d{1,2}){0,1}$|^100(\.0{1,2}){0,1}$/; return reg.test(val); }, validdateMobile: function val.
2021-09-30 10:36:13 445
原创 JS常用10个方法
前端JS常用10个方法前端通过请求后台,把blob 数据流转为excel// 下载导出excel 后台版 /** * @param data 后台接口的文件流 * @param fileName 需要下载的文件名 */const excelDownload = (data, fileName) => { const blob = new Blob([data], { type: 'application/vnd.ms-excel;charset=utf-8' })
2021-09-30 10:28:38 628
原创 CSS-BEM命名规范
CSS-BEM命名规范,让维护css不在头疼相信大部分前端工作人员都不太喜欢写CSS,更不要说修改别人的CSS的样式了。本文将简单介绍CSS-BEM使用规范,让自己/他人维护起CSS不在头疼。前言BEM(块、元素、修饰符)是一种基于组件的 Web 开发方法。其背后的想法是将用户界面划分为独立的块。这使得即使使用复杂的 UI 也能轻松快速地进行界面开发,并且允许重用现有代码而无需复制和粘贴。该笔记将围绕BEM核心模块,块(block)、元素(element)、修饰符(modifier)进行简述。贴
2021-09-30 09:46:05 1561
前端面试常见问题,大厂必备
2023-03-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人