引言 有这么一个需求：列表页进入详情页后，切换回列表页，需要对列表页进行缓存，如果从首页进入列表页，就要重新加载列表页。 对于这个需求，我的第一个想法就是使用keep-alive来缓存列表页，列表和详情页切换时，列表页会被缓存；从首页进入列表页时，就重置列表页数据并重新获取新数据来达到列表页重新加载的效果。 但是，这个方案有个很不好的地方就是：如果列表页足够复杂，有下拉刷新、下拉加载、有弹窗、有轮播等，在清除缓存时，就需要重置很多数据和状态，而且还可能要手动去销毁和重新加载某些组件，这样做既增加了复杂度，也容易出bug。 接下来说说我的想到的新实现方案（代码基于Vue3）。 keep-aliv...
前言 jquery时代更新视图是直接对DOM进行操作，缺点是频繁操作真实DOM，性能差。react和vue时代引入了虚拟DOM，更新视图是对新旧虚拟DOM树进行一层层的遍历比较，然后找出需要更新的DOM节点进行更新。这样做的缺点就是如果DOM树很复杂，在进行新旧DOM树比较的时候性能就比较差了。那么有没有一种方法是不需要去遍历新旧DOM树就可以知道哪些DOM需要更新呢？ 答案是：在编译时我们就能够知道哪些节点是静态的，哪些是动态的。在更新视图时只需要对这些动态的节点进行靶向更新，就可以省去对比新旧虚拟DOM带来的开销。vue3也是这样做的，甚至都可以抛弃虚拟DOM。但是考虑到渲染函数的灵活性和...
Vue模板语法：使用插值表达式的内容必须是有结果的内容才可以，就是需要return出来的才可以显示出来。插值表达式所表现的内容为纯文本模式如何避免即所有的逻辑操作都在js里面实现，不要再templete中实现可以完美的避免这个问题。 Vue属性绑定1.使用v-bind进行属性绑定语法：v-bind：class/id=“名称”2.对于v-bind是将属性进行绑定，如果属性的结果是null或者undefined则会自动将其删除不进行显示3.v-bind有一种简写模式直接使用：即可代替v-bind4.也可以使用布尔类型的truefalse5.动态绑定多个值：在数组中新建一个对象，v-bind绑定一个...
一、是什么 权限是对特定资源的访问许可，所谓权限控制，也就是确保用户只能访问到被分配的资源 而前端权限归根结底是请求的发起权，请求的发起可能有下面两种形式触发 页面加载触发 页面上的按钮点击触发 总的来说，所有的请求发起都触发自前端路由或视图 所以我们可以从这两方面入手，对触发权限的源头进行控制，最终要实现的目标是： 路由方面，用户登录后只能看到自己有权访问的导航菜单，也只能访问自己有权访问的路由地址，否则将跳转 4xx 提示页 视图方面，用户只能看到自己有权浏览的内容和有权操作的控件 最后再加上请求控制作为最后一道防线，路由可能配置失误，按钮可能忘了加权限，这种时...
在现代的Web开发中，前端框架的选择是至关重要的。Vue.js作为一款流行的前端框架，与传统的原生开发相比，有许多明显的区别。 模版语法与HTML Vue.js使用特殊的模板语法来创建动态视图，这样开发者可以更方便地表达复杂的逻辑。通过指令（例如v-if、v-for等）和模板表达式，Vue.js简化了数据的呈现和处理： 在原生开发中，需要手动操作DOM来实现类似的功能，比如使用document.createElement、appendChild、removeChild等，这样的操作可能会比较繁琐。 路由管理 Vue.js有强大的路由管理功能，使用VueRouter可以轻松地管理单页应用的导航。...
这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助 一、背景 在前端JSON.stringfy是我们常用的一个方法，可以将一个对象序列化。例如将如下对象序列化 constperson={name:'kalory',age:18} JSON.stringfy(person) //结果 '{"name":"kalory","age":18}' 将一个数组序列化 constarr=[1,2,3,4,5] //结果 '[1,2,3,4,5]' constpersons=[{name:'kalory',age:18},{name:'jack',age:48}] //结果 '[{"n...
一、axios是什么 axios 是一个轻量的 HTTP客户端 基于 XMLHttpRequest 服务来执行 HTTP 请求，支持丰富的配置，支持 Promise，支持浏览器端和 Node.js 端。自Vue2.0起，尤大宣布取消对 vue-resource 的官方推荐，转而推荐 axios。现在 axios 已经成为大部分 Vue 开发者的首选 特性 从浏览器中创建 XMLHttpRequests 从 nod...
本文的目的，是为了让已经有Vue2开发经验的 人 ，快速掌握Vue3的写法。 因此， 本篇假定你已经掌握Vue的核心内容 ，只为你介绍编写Vue3代码，需要了解的内容。 一、Vue3里 script 的三种写法 首先，Vue3新增了一个叫做组合式api的东西，英文名叫CompositionAPI。因此Vue3的 script 现在支持三种写法， 1、最基本的Vue2写法 <template> <div>{{ count }}</div>&...
一、介绍 Promise，译为承诺，是异步编程的一种解决方案，比传统的解决方案（回调函数）更加合理和更加强大 在以往我们如果处理多层异步操作，我们往往会像下面那样编写我们的代码 doSomething(function(result){ doSomethingElse(result,function(newResult){ doThirdThing(newResult,function(finalResult){ console.log('得到最终结果:'+finalResult); },failureCallback); },failureCallback); },failureCall...
概述 下面我将通过两个例子讲解列表过滤和排序，总的来说主要使用了数组的filter和sort方法 测试数据定义 persons:[ {name:'雷小军',age:44,sex:'男'}, {name:'李连杰',age:55,sex:'男'}, {name:'李彦宏',age:23,sex:'男'}, {name:'马化腾',age:33,sex:'男'}, {name:'马大云',age:60,sex:'男'}, {name:'王小伟',age:25,sex:'女'} ], 1.列表过滤 目标：在文本框中输入关键字，根据关键字对列表进行过滤 实现方法：使用...
大家好，我是Java陈序员。 今天，给大家介绍一个开源的聊天应用程序，支持PC端和移动端。 关注微信公众号：【Java陈序员】，获取开源项目分享、AI副业分享、超200本经典计算机电子书籍等。 项目介绍 HasChat——一个基于Vue3+Socket.io的聊天应用，同时支持PC端和移动端。 功能特性： 技术栈： PC网页版前端：Vue3+Vite+TypeScript+Pinia+NaiveUI+Socket.io 移动版前端：uni-app+Socket.io 后端：Express.js 项目预览 PC网页端 移动端 本地部署 环境准备： Node.Js15+ My...
vue3+uniapp多端自定义table组件|uniapp加强版综合表格组件 uv3-table：一款基于uniapp+vue3跨端自定义手机端增强版表格组件。支持固定表头/列、边框、斑马纹、单选/多选，自定义表头/表体插槽、左右固定列阴影高亮显示。支持编译兼容H5+小程序端+App端。 如下图：H5+小程序+App端，多端运行一致。 uv3-table表格插件是最新原创项目uniapp-os后台管理系统的一个独立版组件。 由于在开发uni-os手机后台系统需要用到table表格组件。无奈uniapp官方及插件市场table表格组件无论功能及UI上都不满足要求，于是自己爆肝一个多日夜开发了...
1、下载依赖 npminstallvue-i18n@nex 2、在src目录下创建文件夹创建文件index.ts、zh/index.ts、en/index.ts //index.tsimport{createI18n}from'vue-i18n'importzhfrom'./zh/index'importenfrom'./en/index'constmessages={en,zh,}console.log('localStorage.getItem',localStorage.getItem('language'));constlanguage=(navigator.lan...
原创研发uniapp+vue3+pinia2跨三端仿微信app聊天模板Uniapp-Wechat。 uni-vue3-wchat基于uni-app+vue3+pinia2+uni-ui+uv-ui等技术跨端仿制微信App界面聊天项目，支持编译到H5+小程序端+App端。实现编辑框多行消息/emoj混合、长按触摸式仿微信语音面板、图片/视频预览、红包/朋友圈等功能。 预览图 编译至h5+App端+小程序端运行效果 技术栈 开发工具：HbuilderX4.0.8 技术框架：Uniapp+Vue3+Pinia2+Vite4.x UI组件库：uni-ui+uv-ui（uniapp+vue3组件库）...
前言 在家没事的时候刷抖音玩，抖音首页的视频怎么刷也刷不完，经常不知不觉的一刷就到半夜了😅不禁感叹道＂垃圾抖音，费我时间，毁我青春😅＂ 这是我的模仿抖音系列文章的第二篇，本文将一步步实现抖音首页视频无限滑动的效果，干货满满 第一篇：200行代码实现类似Swiper.js的轮播组件第三篇：Vue路由使用介绍以及添加转场动画第四篇：Vue有条件路由缓存，就像传统新闻网站一样第五篇：GithubActions部署Pages、同步到Gitee、翻译README、打包docker镜像 如果您对滑动原理不太熟悉，推荐先看我的这篇文章：200行代码实现类似Swiper.js的轮播组件 最终效果 在...
一、错误类型 任何一个框架，对于错误的处理都是一种必备的能力 在Vue 中，则是定义了一套对应的错误处理规则给到使用者，且在源代码级别，对部分必要的过程做了一定的错误处理。 主要的错误来源包括： 后端接口错误 代码中本身逻辑错误 二、如何处理 后端接口错误 通过axios的interceptor实现网络请求的response先进行一层拦截 apiClient.interceptors.response.use( response=>{ returnresponse; }, error=>{ if(error.response.status401){ router....
目录 VUE-局部使用 快速入门 常用指令 v-for v-bind v-if&v-show v-on v-model vue生命周期 Axios Vue案例 VUE-局部使用 Vue是一款用于构建用户界面的渐进式的JavaScript框架。（官方：https://cn.vuejs.org/） 快速入门 准备 准备html页面,并引入Vue模块（官方提供） 创建Vue程序的应用实例 准备元素(div)，被Vue控制 构建用户界面 准备数据 通过插值表达式渲染页面 vscode新建html文件并快速生成标准的html代码：https://www.c...
前言 在上一篇vue3早已具备抛弃虚拟DOM的能力了文章中讲了对于动态节点，vue做的优化是将这些动态节点收集起来，然后当响应式变量修改后进行靶向更新。那么vue对静态节点有没有做什么优化呢？答案是：当然有，对于静态节点会进行“静态提升”。这篇文章我们来看看vue是如何进行静态提升的。 什么是静态提升？ 我们先来看一个demo，代码如下： <template> <div> <h1>title</h1> <p>{{msg}}</p> <button@click="handleChange">changemsg&l...
一、原因 现在市面上有很多为前端开发的框架、模板。为什么我们还要再做一个呢，究其原因，因为这些框架和模板更多的基于技术层面提供了快捷方便的实现方法；但却缺少具体业务层面的实现。因此，结合自身需求，将各种系统常用的功能和页面进行归纳总结，实现了一套更贴近实际业务的前端框架，框架中提供了一系列实际的业务功能模块，用户可直接使用，甚至无需做任何更改。 二、使用技术 框架基于vue-element-admin框架二次开发而成，使用了VUE和ElementUI实现。 三、常用功能 根据常用程度，框架归纳实现了常用的功能模块，具体包括如下内容： 【账号密码登录】 【手机短信登录】 【注册】 【找回密码】 ...
一、是什么 webpackproxy，即webpack提供的代理服务 基本行为就是接收客户端发送的请求后转发给其他服务器 其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制） 想要实现代理首先需要一个中间服务器，webpack中提供服务器的工具为webpack-dev-server webpack-dev-server webpack-dev-server是 webpack 官方推出的一款开发工具，将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起 目的是为了提高开发者日常的开发效率，只适用在开发阶段 关于配置方面，在webpack配置对象...