前端学习笔记
关注
分享
扫一扫
文章平均质量分 75
苏米素
这个作者很懒，什么都没留下…
展开
-
vue3中的beforeEach里面的next函数---刷新页面导致白页
首先描述一下我的问题：我是用beforeEach路由守卫来动态生成 路由，当我刷新页面首次访问动态路由时，会发生白页。但是第二次，通过左侧导航 or 更改url路由链接去访问动态路由，就会正常显示。但如果再次 刷新页面，又会出现白页。最开始的代码是这样写的：router.beforeEach((to, from, next) => { let hasRoutes = store.state.hasRoutes if (!hasRoutes) { // 如果还没有动态绑定路由，那么就原创 2022-04-23 21:04:10 · 11062 阅读 · 4 评论 -
vue3的beforeEach和vue2的beforeEach里面的异步请求的区别
问题描述：在一个项目中，我想根据用户的权限不同，所看到的菜单是不同的。这样就产生了一个需求：根据用户权限，请求接口生成动态菜单。由于菜单的不一样，所以我希望每个用户的路由也是不一样的。所以路由也需要动态生成。那么我就想到了用 router.beforeEach来请求接口获取用户菜单，从而可以生成动态路由。并把此时获取到的用户菜单存入store中，方便生成动态菜单。过程大概如下：...原创 2022-04-22 17:09:10 · 3007 阅读 · 2 评论 -
@element-plus/icons-vue使用过程中，结合el-icon使用svg图标不生效，但单独使用svg图标生效
我的情况：在main.js 中使用了全局注册icon在页面中使用图标时，发现：结合el-icon使用svg图标不生效，但单独使用svg图标生效（在main.js中全局注册了图标之后，再到页面中使用就不需要再次引入了，直接使用就行）解决办法：更新 element-plus的版本。我之前的版本是1.0.2。更新到2.1.9版本就ok了！真的困扰了好久，搜了好多百度。。。哎。硬是没想到就是版本的问题...原创 2022-04-12 23:13:01 · 1815 阅读 · 0 评论 -
vue3+vite 按需自动引入element plus报错(按照官方方法配置失败:Failed to resolve import “element-plus“)
参考文章：https://www.cnblogs.com/cokolxvd/p/15661086.html按需自动引入elementUI 首先需要插件unplugin-vue-components 和 unplugin-auto-importnpm i unplugin-vue-components unplugin-auto-import根据elementUI plus 官网说明快速开始.需要在vite.config.js中加入如下代码复制代码// vite.config.tsimp原创 2022-03-15 17:19:44 · 20665 阅读 · 2 评论 -
vue响应式系统的依赖收集追踪原理
vue响应式系统的依赖收集追踪原理最近在学习《剖析 Vue.js 内部运行机制》这本小册，本篇文章就“vue响应式系统的依赖收集追踪原理”这一小节，写一写自己的理解+注释，对小册进行二次输出。为什么要依赖收集？在上一篇 “vue响应式系统的基本原理”文章中，我们写了如下代码，对数据进行响应式管理。其中在set函数里面，当数据有更新，我们就直接调用了cb函数更新视图，这样有些许不妥。小册作者用了两个例子来说明。例子1：视图上不需要用的数据更新了，显然调用cb函数更新视图是不正确的我们现在有这原创 2022-01-07 18:05:21 · 1263 阅读 · 2 评论 -
vue响应式系统的基本原理
vue响应式系统的基本原理我们使用vue时，对数据进行操作，就能影响对应的视图。那么这种机制是怎么实现的呢？思考一下，是不是就好像我们对数据的操作 被“某人”监视了？一旦我们对数据进行了更改，“某人”就能感应到，并帮我们更新视图那么这个“某人”到底是谁呢？其实它很普通，就是我们基础里面有学过的 Object.defineProperty，使用它来对数据进行一下加工，就能实现当数据被读时，执行“读”的回调函数；数据被写时，执行“写”的回调函数。接下来，我们将简单回顾该方法的使用，再用几个实战小原创 2021-12-27 15:34:45 · 1806 阅读 · 0 评论 -
vue基础---尚硅谷学习笔记
vue基础初识Vue：Vue模板语法有2大类：数据绑定data与el的2种写法MVVM模型数据代理事件的基本使用：Vue中的事件修饰符：键盘事件计算属性：监视属性watch：深度监视：监视属性简写computed和watch之间的区别：绑定样式：条件渲染：v-for指令:面试题：react、vue中的key有什么作用？（key的内部原理）Vue监视数据的原理：收集表单数据：过滤器：内置指令自定义指令生命周期：非单文件组件几个注意点：关于VueComponent：一个重要的内置关系初识Vue： 1.想让原创 2021-10-14 11:22:06 · 1240 阅读 · 0 评论 -
vue脚手架--尚硅谷学习笔记
vue脚手架笔记脚手架文件结构关于不同版本的Vuevue.config.js配置文件ref属性props配置项mixin(混入)插件scoped样式总结TodoList案例webStorage组件的自定义事件全局事件总线（GlobalEventBus）消息订阅与发布（pubsub）nextTickVue封装的过度与动画vue脚手架配置代理方法一方法二插槽Vuex1.概念2.何时使用？3.搭建vuex环境4.基本使用5.getters的使用6.四个map方法的使用7.模块化+命名空间路由1.基本使用2.几个注原创 2021-10-13 21:31:38 · 566 阅读 · 0 评论 -
前端面试题
组件之间如何通信？组件间通信可以通过props、传递回调函数、context、redux等形式进行组件之间通讯react/vue中的key有什么作用？（key的内部原理是什么？）1）简单来说，key是虚拟DOM对象的标识，在更新显示时，key起着极其重要的作用。2）详细来说，当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】，随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下： a. 旧虚拟DOM中找到了与新虚拟DOM相同的key： （原创 2021-08-08 21:25:02 · 581 阅读 · 0 评论 -
react学习笔记---React扩展
1. setStatesetState更新状态的2种写法 (1). setState(stateChange, [callback])------对象式的setState 1.stateChange为状态改变对象(该对象可以体现出状态的更改) 2.callback是可选的回调函数, 它在状态更新完毕、界面也更新后(render调用后)才被调用 (2). setState(updater, [callback])------函数式的setSta原创 2021-05-25 22:24:26 · 285 阅读 · 0 评论 -
react学习笔记---redux
redux01-redux精简版---redux原理图如下：02-redux完整版03-redux异步action版04-react-redux基本使用05-react-redux的优化06-react-redux数据共享版07-react-redux开发者工具的使用08-react-redux最终版01-redux精简版—redux原理图如下：redux精简版总结（1）去除Count组件自身的状态（2）src下建立-src-redux-store.js-count_reduce原创 2021-05-25 21:59:20 · 341 阅读 · 0 评论 -
react学习笔记---react脚手架
react脚手架01-react脚手架02-创建项目并启动03-react脚手架项目结构04-功能界面的组件化编码流程（通用）一、todoList案例相关知识点配置代理react脚手架配置代理总结二、github搜索案例相关知识点01-react脚手架1.xxx脚手架: 用来帮助程序员快速创建一个基于xxx库的模板项目1.包含了所有需要的配置（语法检查、jsx编译、devServer…）2.下载好了所有相关的依赖3.可以直接运行一个简单效果2.react提供了一个用于创建react项目的脚原创 2021-05-25 18:26:10 · 497 阅读 · 1 评论 -
react学习笔记---react基础
初始：为什么选择React？组件化的开发构思，项目便于维护只需关注业务逻辑，高效快速更新DOM海量的周边生态，友好的开发环境01-hello_react<body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 最先引入react核心库 --> <script type="text/javascript" src="../js/re原创 2021-05-24 22:22:14 · 316 阅读 · 0 评论 -
前端js面试题2---手写call，apply
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc原创 2021-04-09 20:54:44 · 178 阅读 · 0 评论 -
前端js面试题1---手撕new操作符
部分参考链接: 重学 JS 系列：聊聊 new 操作符.<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=原创 2021-04-09 13:35:38 · 329 阅读 · 0 评论 -
仿网易云PC端项目-vue
项目GitHub地址： wangyiMusicPlayer.wangyiMusicPlayer——这是一个仿网易云PC端的的项目（vue）项目简介：本项目使用的后端接口{接口文档已放在项目中，自行下载使用}前端采用技术：1.vue-cli,vue-router,element-ui,axios请求,父子组件传值2.路由跳转（携带参数）：具体体现在各个页面的跳转3.组件从本身跳转到本身（携带参数）：具体体现在mv详情页中(mv.vue) 点击 推荐mv项目效果图：发现音乐推荐歌单原创 2021-02-25 15:07:55 · 4746 阅读 · 5 评论 -
别踩白块 复盘笔记
别踩白块 复盘笔记index.htmlindex.cssindex.jsindex.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>别踩白块</title> <link rel="stylesheet" type="text/css" href="css/index.css"/> </head> <bo原创 2021-02-02 23:09:21 · 322 阅读 · 0 评论 -
CSS中的flex布局
目录1、flex 布局的概念2、容器的属性2.1、flex-direction（设置子元素的排列方向）2.2、flex-wrap属性（设置是否换行）2.3、flex-flow 属性（flex-direction和flex-wrap的结合）2.4、justify-content属性（设置子元素在横轴上的排列） 2.5、align-items属性（设置子元素在纵轴上的排列）2.6、align-content属性（设置每行子元素之间的排列方式） 3、子元素的属性 3.1、order转载 2021-01-28 15:50:02 · 395 阅读 · 0 评论 -
js基础复习笔记
---于2021/1/26整理js基础复习笔记 1.变量及数据类型2.运算符3.函数函数声明与创建函数的2种定义方式调用函数的3种方法回调函数2种匿名函数内置功能函数4.数组数组概念数组的创建方式数组的修改 以及 for in 和 for of对象的创建访问对象修改、删除对象属性5.获取元素及事件6.元素内容的操作删除内容元素内容的移动元素内容的交换7.元素样式的操作操作元素尺寸...原创 2021-01-26 22:23:24 · 581 阅读 · 0 评论 -
网页版“别踩白块”实战笔记
事件对象• 什么是事件对象？• 就是当你触发了一个事件以后，对该事件的一些描述信息• 例如： ° 你触发一个点击事件的时候，你点在哪个位置了，坐标是多少 ° 你触发一个键盘事件的时候，你按的是哪个按钮• 每一个事件都会有一个对应的对象来描述这些信息，我们就把这个对象叫做 事件对象• 浏览器给了我们一个 黑盒子，叫做 window.event ，就是对事件信息的所有描述• 这个玩意很好用，但是一般来说，好用的东西就会有 兼容性问题 ，在 IE低版本里面这个东西好用，但是在 高版本IE 和原创 2021-01-25 23:23:19 · 623 阅读 · 0 评论