目录Vue2、Vue3 生命周期的变化选项式 API 的生命周期选项的变化小知识组合式 生命周期选项 APIVNode 生命周期事件Vue2xVue3x Vue2、Vue3 生命周期的变化 正好在看Vue的官方文档，也正好比对一下，做一下笔记 选项式 API 的生命周期选项的变化 Vu...[2023/3/27]

目录正文组合式APIsetup变量声明目前比起选项式API的优点生命周期 正文 在react推出了hook之后，vue也在vue3里面添加了组合式API，鉴于这个时间间隔，我有理由认为组合式api和hook还是有一些关系的。不过在我具体的使用中，我并没发现这两个方法太多的相同点，不过鉴于vu...[2023/3/27]

目录父组件中：main.js方式一、通过 getCurrentInstance 方法获取当前组件实例，从而获取 route 和 router方式二：通过从路由中导入 useRoute useRouter 使用 route 和 router。附：Vue3中关于getCurrentInstance的大坑...[2023/3/24]

Uniapp 和 Vue 在路由方面有相似之处，因为 Uniapp 是基于 Vue 的。Uniapp 的路由系统是通过 Vue Router 实现的，因此两者有许多相同的概念和 API。 相同点： 都支持基于 URL 的路由； 都可以使用嵌套路由来管理多个页面之间的关系； 都支持路由参数和查...[2023/3/22]

多个路由通过路由器进行管理。 前端路由的概念和原理 (编程中的)路由（router）就是一组key-value对应关系，分为：后端路由和前端路由 后端路由指的是：请求方式、请求地址和function处理函数之间的对应关系 在SPA程序中，所有组件的展示和切换都在这唯一的一个页面内完成，...[2023/3/20]

目录一，监听单个数据ref二，监听引用类型数据ref:深度监听1，引用类型ref直接深度监听2，引用类型ref深拷贝深度监听三，监听单个数据：reactive四，监听引用类型数据：reactive五，immediate: true六，监听多个数据源七，flush的配置1，默认情况下在dom渲染完毕前...[2023/3/20]

目录把 vue3 项目降级到 vue2 ??为什么要降级到 vue2 ？vue3 和 vue2 的依赖对比 vue3 和 vu2 的区别实践步骤vue 降级vue-router 降级element-uipiniaeslint + husky + prettier + typescript问题/缺陷总...[2023/3/20]

目录Vue之.env环境配置文件前言一、.env是什么？二、说明及用法1. 文件说明2. 文件读取2.1 npm run serve2.2 npm run build3. 查看环境变量4. 使用环境变量总结 Vue之.env环境配置文件 .env文件是运行项目时的环境配置文件。但是在实际开发过程...[2023/3/20]

目录1、概述2、功能逻辑2.1功能流程2.2 流程图3、功能实现3.1 vue组件化3.2 代码3.3 动态效果 1、概述 在vue项目中，搜索功能是我们经常需要使用的一个场景，最常用的是在列表数据中搜索一个想要的，今天的例子就是我们实现vue从列表数据中搜索，并展示。如下图所示： 2...[2023/3/17]

vue实现页面加载占位 效果如下 思路与实现 页面加载时用户等待，此时与用户交互的方式通常有等待层、进度条、加载动画等；本次介绍加载占位，把页面即将展示的样子用c 背景展示出来，等数据返回后即可进行页面渲染，可以有效减少页面抖动。 页面组成如下： 占位子组件：使用纯c 编...[2023/3/17]

目录Vue.js、React和Angular对比以下是Vue.js的代码示例：以下是React的代码示例：以下是Angular的代码示例： Vue.js、React和Angular对比 Vue.js、React和Angular都是流行的前端框架，它们都有自己的优势和劣势。 以下是...[2023/3/17]

目录一、效果展示二、npm三、main.js引入四、页面使用五、总结问题（简单记录一下笨方法处理的） vue3中使用富文本实在是踩了太多坑了，大概记录一下笨方法处理，有好的方法多交流 一、效果展示 二、npm npm install @vueup/vue-quill@alpha -...[2023/3/15]

目录1、前言2、provide / inject3、发起 provide4、接收 inject5、响应性数据的传递与接收6、引用类型的传递与接收 (针对非响应性数据的处理)7、基本类型的传递与接收 (针对非响应性数据的处理) 1、前言 顾名思义，爷孙组件是比 父子组件通信 要更深层次的引用关系（...[2023/3/15]

Vue 3已经稳定了相当长一段时间了。许多代码库都在生产环境中使用它，其他人最终都将不得不迁移到Vue 3。我现在有机会使用它并记录了我的错误，下面这些错误你可能想要避免。 使用Reactive声明原始值 数据声明在过去都是非常直接的，但是现在有很多帮助函数供我们使用。目前的规则是： 使用r...[2023/3/14]

前言 随着前端诸如webpack，rollup，vite的发展，gulp感觉似乎好像被取代了。其实并没有，只不过它从台前退居到了幕后。我们仍然可以在很多项目中看到它的身影，比如elementplus、vant等。现在gulp更多的是做流程化的控制。 比如我们要把一个大象放进冰箱里就需要 打开...[2023/3/14]

目录Vue一个动态添加background-imageVue踩坑background-image路径结合实际情况，处理方法如下扩展：图片格式（base64）总结 Vue一个动态添加background-image 一开始不知道该怎么弄，后面查了下，应该这样使用 ?<div @click...[2023/3/14]

近期产品要支持国际化多语言，主要涉及前端界面国际化以及后端提示信息、异常信息的国际化多语言支持。 目前我们的开发技术栈：前端VUE、后端.NET。面向前端界面和后端服务，分别涉及对应的国际化多语言支持方案。 一、前端界面国际化多语言支持 前端VUE界面的源码如下：   &n...[2023/3/8]

??Hi~ 大家好，我是小鑫同学，一位长期从事前端开发的编程爱好者，我将使用更为实用的案例输出更多的编程知识，同时我信奉分享是成长的唯一捷径，在这里也希望我的每一篇文章都能成为你技术落地的参考~ ??技术&代码分享 我在 IT200 总结技术学习； 我在 1024Code 在线编写...[2023/3/8]

先看一下最终要实现的效果: 登录页面: 注册页面: (1)引入element-plus组件库 引入组件库的方式有好多种,在这里我就在main.js全局引入了. npm i element-plus -S main.js中代码: import { create...[2023/3/8]

目录前言readonly的实现重构结束 前言 前面的章节我们把 effect 部分大致讲完了，这部分我们来讲 readonly以及重构一下reactive。 readonly的实现 it("happy path", () => { console.warn = vi....[2023/3/8]

闲聊： 年前小颖第一家公司同事问我有做过pc端适配的项目吗，我给妹纸说了下，结果发现没说完，自己当时也没想起来，今天干脆总结下，方便自己和大家日后查看 第一步： 安装postc -px2rem、px2rem-loader 打开命令行工具，输入以下指令安装插件 npm install po...[2023/3/6]

目录vue去掉input前后的空格写一个去除input框空格的vue指令使用方法源码总结 vue去掉input前后的空格 场景：在开发过程中，遇到表单填写，用户可以自由输入 截图举例： 这里，用户瞎输，填了几个空格，导致给后台发请求的时候，也带了好多空格，这种体验特别不好。因此在开...[2023/3/6]

目录Vue全局的toast组件1.创建toast组件2.创建toast.js文件3.安装并使用 vue自定义toast组件使用总结 Vue全局的toast组件 1.创建toast组件 <template> <div cla ="toast" v-if="...[2023/3/6]

目录Vue.extend创建全局toast组件关于vue.extend的理解应用基本概念官网基本示例应用总结 Vue.extend创建全局toast组件 src -> components -> Toast -> toast.vue <template> ? ...[2023/3/6]

目录Vue的@blur/@focus事件focus和blur事件，改变选中时搜索框的背景色总结 Vue的@blur/@focus事件 @blur 是当元素失去焦点时所触发的事件@focus是元素获取焦点时所触发的事件 <template> <div> ...[2023/3/6]

目录在.js文件中引入store和router在js文件中使用vue的router和store总结 在.js文件中引入store和router 在js文件中使用vue的router和store 在js文件中引入vue的路由配置文件 或者 store文件 import store f...[2023/3/6]

目录vue登录页面回车执行事件@keyup.enter.nativevue中回车键登录实现总结 vue登录页面回车执行事件@keyup.enter.native <el-form ref="loginForm" :model="loginForm" :rules="loginFormRul...[2023/3/6]

VE-Plus 自研轻量级 vue3.js 桌面pc端UI组件库 经过一个多月的筹划及开发，今天给大家带来一款全新的Vue3桌面端UI组件库VEPlus。新增了35+常用的组件，采用vue3 setup语法糖开发，在使用上和element-ui比较类似，极易快速上手。 ve-plus 致...[2023/3/3]

Vue现在已经迭代到 3+ 版本，阅读官方文档的过程中发现作者的一些理念和思路很合我口味，很多概念与方案都是基于解决实际问题提出并实现的，且在权衡利弊后勇于打破常规，比如如何看待关注点分离？。可见，Vue 之所以流行，不单单因为作者是国人，更应该是由于 Vue 作为新一代的解决方案提升了前端编程...[2023/2/28]

作者：京东零售 姜欣 关于服务器端渲染方案，之前只接触了基于react的Next.js，最近业务开发vue用的比较多，所以调研了一下vue的服务器端渲染方案。 首先：长文预警，下文包括了两种方案的实践，没有耐心的小伙伴可以直接跳到方案标题下，down代码体验一下。 前置知识： 1、什么是服务器...[2023/2/28]

设计思路 定义路由的时候配置属性，这里使用needLogin标记访问页面是否需要登录 设置路由守卫，每个页面在跳转之前都要经过验证，校验用户信息是否存在，不存在跳转到登录页 用户登录后将用户信息存储在localStorage 退出登录后，将用户信息清空    代码实现 ...[2023/2/24]

目录正文Vue 的事件处理绑定事件修饰符按键修饰符Vue 为什么会在 HTML 中监听事件？ 正文 在 JS 中「事件」是不需要绑定的，浏览器自带了许多的事件，每个事件都可以去绑定「处理器（处理函数）」。 事件 ==> 用户行为 ==> 触发浏览器的事件 ==> 执行对...[2023/2/24]

目录ts有什么用？为什么用ts？1、引入Typescript包2、配置3、让项目识别.ts4、vue组件的编写 ts有什么用？ 类型检查、直接编译到原生js、引入新的语法糖 为什么用ts？ TypeScript的设计目的应该是解决JavaScript的“痛点”：弱...[2023/2/24]

目录package.json 相关依赖Webpack.config.js 配置文件public/index.html 文件内容全部文件目录结构实例一个模拟的 Vue 应用vue/index.js 文件主要是负责初始化内容initState方法核心文件vue/observer.jsvue/observ...[2023/2/24]

目录watch()函数watchEffect()函数watch 与 watchEffect之间的联系与区别 我们都知道监听器的作用是在每次响应式状态发生变化时触发，在组合式 API 中，我们可以使用 watch()函数和watchEffect()函数, 当你更改了响应式状态，它可能会同时触发 V...[2023/2/24]

目录vue项目登录成功拿到令牌跳转失败401无登录信息问题原因vue项目登录处理token令牌问题总结 vue项目登录成功拿到令牌跳转失败401无登录信息 之前的一个上线半年多的项目，客户提出一点小需求改动，当跑项目时发现线上没有问题，线下登录成功，自动跳转后验证登录人信息时验证失败，无登录信息...[2023/2/24]

目录vue elementUI下拉框回显问题正确回显格式应该是这样而回显的确实这个值的idvue下拉框回显映射单选框多选框级联框总结 vue elementUI下拉框回显问题 在开发过程中，总会做到修改功能，但是在修改回显的时候，发现下拉框始终回显的是id而不是文本 下面看案例 正确...[2023/2/24]

目录Vue前后端交互、生命周期、组件化开发一、Vue用axios与后端交互二、Vue的生命周期三、组件化开发 Vue前后端交互、生命周期、组件化开发 一、Vue用axios与后端交互 ? 如果用jQuery与后端交互的话，我们用Ajax发请求，那么用Vue做前端，需要做前后端分离，与后端做...[2023/2/20]

vu3＋.net6 webApi 书签管理项目 前言 Gitee项目地址：https: gitee.com/zyplj/book-marks Github项目地址：https: github.com/ZyPLJ/BookMarks 作为一个bug程序员，保存了很多书签，直接用浏览器的每次都还...[2023/2/20]

一、安装node和打包vue项目就不用多说了 二、安装expre Expre 是一个保持最小规模的灵活的Node.js web应用程序开发框架，为web和移动应用程序提供一组强大的功能 npm install expre --save -g 三、expre -generator ...[2023/2/17]

目录昨日回顾1 计算属性插值语法+函数使用计算属性计算属性重写过滤案例2 监听属性3 组件介绍和定义组件之间数据隔离4 组件通信父子通信之父传子父子通信之子传父ref属性扩展5 动态组件通过v-if显示组件切换动态组件component标签keep-alive保持组件不销毁6 插槽匿名插槽具名插...[2023/2/17]

1、业务背景 还款业务，设置每月还款日，选每月几号扣款，不需要29、30、31，因为不是每个月都有这三天的 2、预期效果图 3、代码实现 3.1 初始化vue项目 地址：https: cn.vuejs.org/guide/introduction.html 3.2 在项目中应用elemen...[2023/2/17]

单页面应用（SPAs）当处理实时、异步数据时，可以提供丰富的、可交互的用户体验。但它们也可能很重，很臃肿，而且性能很差。在这篇文章中，我们将介绍一些前端优化技巧，以保持我们的Vue应用程序相对精简，并且只在需要的时候提供必需的JS。 注意：这里假设你对Vue和Composition API有...[2023/2/17]

目录昨日回顾style和cla cla 属性的三种设置方法style属性的三种设置方法条件渲染列表渲染使用v-for进行循环循环数字循环字符串循环对象循环数组标签key值加速虚拟dom的替换Vue.set解决监控失效数组的检测与更新对象的检查与更新双向数据绑定 v-modelinput输入框相关...[2023/2/15]

回顾第一篇文章中谈到的组件库的几个方面，只剩下最后的、也是最重要的组件库的打包构建、本地发布、远程发布了。 1 组件库构建 组件库的入口是 package yyg-demo-ui，构建组件库有两个步骤： 添加 TypeScript 的配置文件： tsconfig.json 添加 vite.c...[2023/2/10]

上文创建了一堆 utils、component-info，并实现了新组件模块相关目录和文件的创建。本文继续实现后面的内容。 1 组件样式文件并导入 在 src ervice 目录中创建 init-sc .ts 文件，该文件导出 initSc 函数。 由于 .vue 类型的组件的样式就直接写...[2023/2/10]

上文搭建了组件库 cli 的基础架子，实现了创建组件时的用户交互，但遗留了 cli rc/command/create-component.ts 中的 createNewComponent 函数，该函数要实现的功能就是上文开篇提到的 —— 创建一个组件的完整步骤。本文咱们就依次实现那些步骤。（友...[2023/2/10]

Web 服务器是一种用于存储，处理和传输Web内容的软件。它是一种特殊类型的服务器，具有处理 HTTP 请求并向浏览器返回 Web 页面和其他内容的能力。Web服务器支持多种编程语言，如 PHP，JavaScript，Ruby，Python 等，并且支持动态生成 Web 页面。常见的 Web 服...[2023/2/8]

Suspense使用 <template> <Suspense> <template #default> <ProductList></ProductList> </template>...[2023/2/8]

目录前言使用原生img标签使用ElementUI的Avatar总结 前言 最近在做自己的项目，有这么一个需求，用户列表需要展示用户的头像，之前一直没有处理，趁着这次机会，正好分享下我的解决过程。 头像这一栏空荡荡的，我这种强迫症患者难受死！ 首先声明下，我的数据列表是查询数据库接口...[2023/2/8]