当我们需要在组件之间切换的时候,可能会想到v-if或者v-show但是这俩个并不会保持组件的状态,比如v-if:我们每次隐藏显示切换的时候都会动态的去删除或者渲染组件,得到的组件是一个初始状态的,我们没有办法保持距离上次的状态于是——我们可以使用动态组件经过以上的叙述,我们不难直到什么是动态组件它就是动态的去切换组件的显示与隐藏目录component组件keep-alive-怎么保留状态?keep
vue3、element-plus递归实现动态菜单使用场景:动态菜单为什么使用递归递归在动态菜单中的实现 使用场景:动态菜单动态菜单是指菜单项的数量和层次结构可能是动态的,通常来自后端或用户输入。这些菜单的特征包括:多层嵌套:菜单可以包含子菜单,甚至更多层的嵌套,形成树状结构。? 动态数据源:菜单的数据可能来自API、数据库或用户输入,导致菜单项的数量和结构可能随时变化。? 灵活性:递归可以使代
转载 2024-09-30 18:48:31
294阅读
通过使用保留的 <component> 元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换不同的组件。根据 v-bind:is="组件名" 中的组件名去自动匹配组件 也是一个组件对象,如果匹配不到则不显示。也可以用做不改变路由的情况下切换不同的页面/组件。改变挂载的组件,只需要修改is指令的值即可。不会保
转载 2024-02-19 17:55:13
281阅读
前言 在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件。本文将详细介绍Vue动态组件。所谓动态组件就是让多个组件使用同一个挂载点,并动态切换。0 1is用法 通过使用保留的  元素,动态地绑定到它的 is 特性,我们让多个组件可以使用同一个挂载点,并动态切换。根据 v-bind:is="组件名" 中
转载 2024-03-12 15:36:52
111阅读
最新版本的Element Plus已经移除了Font icon,以下引入以及使用方法为亲测可用的,但是不知道后续是否还会改变,大家可以借鉴一下。本人使用版本“element-plus”: “^1.3.0-beta.1”,“@element-plus/icons-vue”: “^0.2.6”,“typescript”: “~4.1.5”1.安装# Choose a package manager y
转载 2024-04-29 11:04:11
227阅读
先看需要实现的效果 这里有一级也有二级菜单,注意二级菜单的父目录(”选项设置“点击不会跳转,只是展开目录),然后点击去详情页,需要跳到一个隐藏的路由,不在菜单展示的路由 还有一点要注意,就是这里有两个router-view,整个页面是一个router-view,可以由LoginView和HomeView替换(当前看到的页面),而HomeView下又有一个router-view,需要用来展示部门,系
一、render函数是什么         简单的说,在vue中我们使用模板HTML语法来组建页面的,使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM,所以在拿到template模板时也要转译成VNode的函数,而用render函数构建DOM,vue就免去了转译的过程。  当使用render函数描述虚拟DOM时,vue提供
转载 7月前
39阅读
最近刚做完建站工具,准备总结里面使用到的一些技巧,同时会做一版简化的放在 github上。先来一篇翻译的文章,和我在项目中使用的动态组件思路一样,不过缺少了演化的过程,直接给出了最终的解决方案。这篇文章给的场景也很简单,但要了解这种思想是足够的。之后再详细的总结我遇到的问题和解决方案,放在更复杂的场景中。以下是翻译正文:组件并不总是具有相同的结构。有时需要管理许多不同的状态(注:指的是根据不同状态
Element树的构建过程 flutter页面整体构造成了一个Widget树,但是在Widget树背后实际隐藏着的是Element树,Widget仅仅是一个配置文件,是不可以修改的,如果想要更新数据一般是调用setState方法,之后页面会重新构建,重新构建的过程中Widget会重新创建,但是Element可能会复用,但是我们本章主要研究的是Element的创建过程,关于Element的更新与复
转载 2024-09-22 11:34:08
292阅读
     为什么需要自定义组件?因为小程序通过组件来传值,但小程序没有提供很多传值的方法,所以需要写自定义组件。调用自定义组件 - 传值给组件 - 组件传值出来,开发者需要在组件中写属性及方法等。现在来实现弹幕功能 如下:   1.  首先需要单独创建一个组件目录,在目录中新建一个AuglyVideo文件夹,用来存放弹
转载 2024-05-07 19:53:35
239阅读
微信小程序简单描述一下微信小程序的相关文件类型?你是怎么封装微信小程序的数据请求?有哪些参数传值的方法?你使用过哪些方法,来提高微信小程序的应用速度?小程序和原生App哪个好?简述微信小程序原理?分析微信小程序的优劣势怎么解决小程序的异步请求问题?其他知识点面试webpack的原理webpack的loader和plugin的区别?怎么使用webpack对项目进行优化?防抖、节流浏览器的缓存机制描述
1. 什么是图标那到底什么是图标呢?用一句最简单的话来说,图标就是一个符号,一个代表某个对象的符号,一个象征性的符号。图标可以追溯到1565年,它源于拉丁语「eikṓn」,意思是「相像,形象」。图标是世界上最通用的语言,不论国籍,种族,年龄或性别,它是每个人都可以理解的一种语言。看似不起眼的一个小图标可以包含如此多的信息,人们从古至今一直在使用图标来表达自己以及传达信息,洞穴绘画、埃及象形文字都可
Vue3 TypeError: dates.map is not a function近期在用Vue3 + TS开发一个项目,其中出现一个bug排查了很久,并将其记录报错信息报错提示TypeError: dates.map is not a function报错原因在排查我发现是我更换变量类型导致的,在项目中有个需求是记录时间区间的,本项目用了elementPlus组件库,在使用TimePick
一、绝对路径直接引入,全局可用二、绝对路径直接引入,配置后,import 引入后再使用三、webpack中配置 alias,import 引入后再使用四、webpack 中配置 plugins,无需 import 全局可用结论  我们以 jQuery 为例,来讲解一、绝对路径直接引入,全局可用主入口页面 index.html 中用 script 标签引入:<s
大家好,我是独立开发者Larry,今天推荐几个免费的图标集合,大部分图标都提供了AI、PSD、Sketch、SVG、PNG格式。网站上的图标可以根据自己的喜好随意使用Lino图标,也可以根据自己的喜好自定义其颜色或大小。Lino网站地址:https://www.baianat.com/resources/lino 打开网站在这里提供了多个领域超过1000个的彩色图标,有AI
前言最近在做项目的优化升级,因为折腾了一下午的图标管理,所以就把自己的经验分享出来,希望可以帮助大家更快的解决自己的需求。我现在的项目,都是引入iconfont的图标库,真是的好用又方便。现在有三种模式,使用方法可以在官网的 使用说明 页查看。我们今天主要讨论的主要是第三种,也就是svg图标的优化。简单封装组件使用说明里有提及,我们引入官方生成的库文件路径。写好css样式,页面代码引用如下:&
目录一、Ajax1、同步与异步2、原生Ajax(繁琐)①、写一个简易的Ajax3、Axios(推荐使用)①、Axios入门②、Axios请求方式别名③、案例:基于Vue及Axios完成数据的动态加载展示二、前后端分离开发1、前后端开发模式①、前后端混合开发②、前后端分离开发(主流模式)③、前后端分离开发流程2、YAPI(接口文档的管理平台)①、什么是YAPI?②、如何使用YAPI?三、前端工程化1
需求:网页一次要请求 500或1000 条数据的时候但是每一条数据有十几个数值,导致表格渲染时特别卡,用户体验极差.因为我们还要显示图表,所以请求的数据不能减少,那么改怎么办?解决思路利用虚拟列表我们一次拿到所有数据但是只渲染20条数据或者更少,只要把页面填满就行.等用户拉动滚动条到达底部时我们就填加渲染数据10条.然后图表因为渲染比较快所以我们就用所有数据一次性渲染.代码实现// el - ta
文章目录 前言一、实现多级菜单 二、实现动态路由三、页面权限控制总结 前言在vue的后台管理系统中,侧边多级菜单无疑是最常见的场景,在有的时候我们还需要根据不同用户角色权限进行控制来显示不同的菜单,今天我就来讲讲用element ui实现的思路一、实现多级菜单先来看一下代码 sidebarItem.vue<template> <div class="menu-wra
转载 9月前
688阅读
作者:TYANerelementUI是和vue配套的一个桌面端组件库。虽然是一个通用的组件库,但是由于使用场景的不同,我们可能会遇到一些小问题,以下是我个人的一、、总结。1、Tooptip文字提示tooltip使用时,必须有一个子元素(不能是文本元素)。2、修改主题色2.1 方案一:利用element UI的在线主题生成工具操作步骤:点击“切换主题色”,选择或输入色值。点击“下载主题”
转载 2024-03-25 10:34:58
410阅读
  • 1
  • 2
  • 3
  • 4
  • 5