Vue3 在大版本 3.3 里面推出来了一些新功能（主要是语法糖），网上有各种文章，但是看起来似乎是一样的。 我觉得吧，有新特性了，不能光看，还要动手尝试一下。 DefineOptions 宏定义 先来一个简单的，以前我们有时候想设个name，有时候不想让组件自动继承属性，这时候需要单独...[2023/5/17]

什么是虚拟DOM DOM是很慢的，其元素非常庞大，当我们频繁的去做 DOM更新，会产生一定的性能问题，我们可以直观感受一下 div元素包含的海量属性 在Javascript对象中，虚拟DOM 表现为一个 Object对象（以VNode 节点作为基础的树）。并且最少包含标签名tag、属性at...[2023/5/17]

目录一、nvm 安装与使用1.1、nvm简介1.2、nvm下载1.3、 nvm 安装二、nodejs安装2.1 nodejs简介2.2 nodejs官网2.3 查看nodejs 所有版本2.4 选择需要的版本进行安装2.5 使用指定版本的node2.6 查看当前node版本三 、镜像管理工具NR...[2023/5/17]

目录1、标签内 router-link跳转2、编程式路由导航 vue3的页面跳转有两种方式，第一种是标签内跳转，第二种是编程式路由导航 1、 <router-link to=''/testDemo''> <button>点击跳转1</button> &...[2023/5/15]

Vue官网的风格指南按照优先级（依次为必要、强烈推荐、推荐、谨慎使用）分类，本文根据项目实际情况整理了一份适用于团队开发的vue风格指南，供大家参考。 一、命名规范 常用的命名规范： camelCase（小驼峰式命名法 —— 首字母小写） PascalCase（大驼峰式命名法 —— 首字...[2023/5/10]

在Github上，.Net通用的权限框架非常多，功能也都比较强大，但是对于很多初学者来说，想要从零学习框架的搭建，就比较困难了。 所以，今天给大家推荐一套比较简单的前后端分离通用权限系统。 项目简介 这是一个基于.Net5+Vue+iView开发的、前后端分离通用权限系统，系统采用三层架构，...[2023/5/10]

Vue3的组件有三种代码组织方式 纯Option API （不含setup） option API + setup 纯 setup （即composition API） 对于这三种形式，设置基类的方法也略有不同。 使用 mixins、extends vue3提供了 mixins和exte...[2023/4/28]

Vue的生命周期  ??Vue的生命周期是每个使用Vue框架的前端人员都需要掌握的知识，以此作为记录。 ?? Vue的生命周期就是vue实例从创建到销毁的全过程，也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有?个完整的?命周期，也就是从开始创建、初始化数据、编译...[2023/4/28]

目录一、代码总览二、问题解析 今天要和大家分享的是关于如何实现6位支付密码输入框组件。 因为在web端不像移动端那样，它没有成熟的、已封装好的6位支付密码输入框UI组件，所以需要我们自己来进行处理，从布局、样式、功能等方面进行实现，在此做一下记录。 具体的需求： 在客户信息表格的操作栏中，点...[2023/4/28]

目录1.创建vue项目2.安装axios3.进行config.js配置4.main.js里引入5.src目录下新建Utils文件夹,在内封装request.js6.以login路由为示例 src文件下新建api文件，在api内新建login.js7.在页面内引入方法，并使用 1.创建vue项目 ...[2023/4/28]

目录immediate 和 handlerdeep 深度监听以currentParams为例，监听selOrgId属性 immediate 和 handler watch 的用法有个特点，就是当值第一次绑定的时候，不会执行监听函数，只有值发生改变才会执行。如果我们需要在最初绑定值得时候也执行函数...[2023/4/26]

目录前言一、主界面先引入导入组件二、封装excel-import组件1.首先是template代码（这里用的是ant vue desgin框架的组件）2.引入接口3.js代码methods三.附加提示（后端也要写的小伙伴可以参考下边建议哈）四.总结 前言 继前边的vue的导出功能后，自己又去在网...[2023/4/26]

目录1、安装相关依赖2、下载中文包3. 引入皮肤和汉化包4. 封装组件:在src/components下新建TEditor.vue，并写入以下代码5. 注册及使用组件 tinymce是一个功能齐全的富文本编辑器插件，但在vue中引入tinymce并不像别的Vue富文本插件一样那么顺利，tinymce...[2023/4/26]

问题描述：使用elementplus的dialog,当关闭弹窗后不刷新页面，直接再次打开发现弹窗中还存留上一次的数据。尝试定义关闭事件，或者使用api中提供的属性destroy-on-close 都不行。后来发现这是一个误区。弹窗关闭时并不代表这个组件已经被销毁了，只是dialog关闭了解决方法：...[2023/4/26]

在Vue中，父子组件之间的数据传递常常会使用props进行实现。具体原理是，当一个父组件嵌套了一个子组件时，在子组件内部使用props接收从父组件传递过来的数据，这些数据可以是基础类型如字符串、数字等，也可以是对象或者数组等复杂类型。 下面展示一个例子，通过一个简单的计数器组件Counter....[2023/4/26]

目录1. name + params2. name + query3. path + query4. 路径字符串？拼接参数5. 路径字符串 / 拼接参数总结 下面方法刷新参数都不会丢失 1. name + params 路由配置(需要配置成动态路由形式，原先的直接传参不能用了) impo...[2023/4/24]

目录vue input输入框中的值变成黑点input标签选中样式设置及input密码框可视设置总结 vue input输入框中的值变成黑点 上面是自定义的组件，type 和 placeholder 分别作为参数。 type="pa word" type 设置为 pa word 就可以显示...[2023/4/24]

目录一、effect用法1、基本用法2、lazy属性为true3、options中包含onTrack二、源码分析1、effect方法的实现2、ReactiveEffect函数源码三、依赖收集相关1、如何触发依赖收集2、track源码3、trackEffects(dep, eventInfo)源码解读...[2023/4/24]

目录layui项目使用过程中遇到的兼容性问题layui实践兼容layui在vue项目中不能自动渲染的问题layui中获取layui路径方法不兼容IE11的问题解决方法在IE8下使用layui遇到的坑栅格系统不支持上传preview方法不支持上传弹出下载框总结 layui项目使用过程中遇到的兼容性问题...[2023/4/24]

目录vue项目中字符串换行显示处理方法踩坑记录（记得抽空瞄一眼，很重要！） vue字符串换行问题及vue路由跳转传参总结 vue项目中字符串换行显示 在vue项目中，请求后端接口获取到的数据是一整条字符串，如：‘1、和加速度和环境，\r\n2、技术的进步是否，\r\n3、讲...[2023/4/24]

目录vue3的hooks总结 一、计数器的hookvue3中hooks的介绍及用法小结一、 什么是hooks二、hooks的用法 vue3的hooks总结  vue3中的hooks其实是函数的写法，就是将文件的一些单独功能的js代码进行抽离出来，放到单独的js文件中。这样其实...[2023/4/21]

目录vue3 ref绑定dom或者组件失败原因分析场景描述ref绑定失败情况举例解决方案vue3组合式API的v-for及ref绑定DOM总结 vue3 ref绑定dom或者组件失败原因分析 场景描述 在vue3中经常用到使用ref绑定组件或者dom元素的情况，很多时候，明明使用ref绑定了...[2023/4/21]

目录如何用Vue.js实现数据的双向绑定？1. 理解双向绑定2. 使用v-model指令3. 使用自定义组件实现双向绑定4. 数据劫持5. 模板引擎6.Object.defineProperty()详解 如何用Vue.js实现数据的双向绑定？ 在Vue.js中，双向数据绑定是一项非常强大的功能，...[2023/4/21]

目录代码传送是啥实例解析 代码传送是啥 在Vue中，代码传送就是将某部分的代码从Vue的template标签下传送到指定的地方，这个地方通常是body标签下。在使用Vue编写界面时，我们都是在html的Body中写一个div，然后指定一个id，然后在Vue的实例中的template中写我们的界面...[2023/4/19]

目录Element-Ui输入框显示与隐藏使用element-ui比较简单,添加show-pa word即可Element el-input 输入框详解1. 用途2. 输入框3. 文本域总结 Element-Ui输入框显示与隐藏 使用element-ui比较简单,添加show-pa word即可 ...[2023/4/19]

目录element-ui vue input输入框自动获取焦点聚焦方法一方法二vue输入框自动获取焦点的三种方式方式一：原生JS操作DOM方式二：ref方式实现方式三：使用自定义指令总结 element-ui vue input输入框自动获取焦点聚焦 有时候会遇到要输入框自动获取焦点的情况...[2023/4/19]

目录Vue3中修改父组件传递到子组件中的值自定义组件上使用v-model总结： Vue3中修改父组件传递到子组件中的值 1.大家都知道，vue是具有单向数据流的传递特性。当你在子组件中修改父组件传递过来的数据的时候，控制台就会报出错误，说不让你对父组件传递的值进行修改。2.那么，尤大大为了解决这...[2023/4/17]

目录前文：一、 Je ibucaPlayer插件用来播放flv流二、easyplayer插件播放m3u8流总结 前文： 随着前端大屏页面的逐渐壮大，客户的需求也越来越多，大屏上面展示的事物也越来越丰     富。其中实时播放监控的需求逐步增加，视频流格式也是有很多种...[2023/4/17]

目录一、展示word文件内容1、安装并引入依赖mammoth2、页面中使用二、展示excel/csv文件内容1、安装并引入依赖handsontable、papaparse，excel文件需要安装xlxs2、公共组件sheet.vue3、页面内引入组件总结 一、展示word文件内容 1、安装并引入...[2023/4/17]

目录1、错误说明2、错误原因3、解决方案 1、错误说明 vue3中，使用data的方式初始化echart图表 export default { data() { return { chart: null, ... } }, m...[2023/4/17]

目录vue路由跳转打开新窗口和关闭窗口编程式导航window.open( )方法关闭窗口 window.close()vue路由跳转打开新窗口(被浏览器拦截)第一种方法第二种方法第二种方法（改良版） 总结       vue路由跳转打开新窗口和关闭窗...[2023/4/14]

先看需要实现的效果 这里有一级也有二级菜单，注意二级菜单的父目录（”选项设置“点击不会跳转，只是展开目录），然后点击去详情页，需要跳到一个隐藏的路由，不在菜单展示的路由 还有一点要注意，就是这里有两个router-view，整个页面是一个router-v...[2023/4/14]

vue3+vue-router4+vuex4+vite实现动态路由的时候，出现刷新404或者空白 一、动态路由的实现： 1、在项目一开始，通过createRouter创建路由的时候，使用路由实例（通常有404、login等）。 2、登录成功后，通过后台接口获取后端配置的路由，然后add...[2023/4/14]

问题：[Vue Router warn]: No match found for location with path “/home” 因为以前是一次性添加路由使用的是addRoutes，现在成了addRoute一个一个添加，我登陆后动态添加路由后，明明已经加了路由，打...[2023/4/14]

本文主要介绍了el-menu修改item颜色的实现，具体如下：  今天在在点击el-menu的一级菜单和二级菜单出现了点击成白色，刚好我设置的文字颜色也是白色，就变成什么都看不见了。 设置一级菜单和二级菜单的背景颜色 .el-sub-menu .el-menu-item...[2023/4/14]

vue通过el-menus和el-tabs联动，实现点击侧边栏，页面内显示一行tab以及点击tab切换路由 实现效果如下 实现思路 左侧边栏添加点击事件/设置el-menu的路由模式，然后监听路由的变化，拿到的路由去改变el-tabs绑定的属性，然后改变el-tab-pane循...[2023/4/14]

1. 一个指令定义对象可以提供如下几个钩子函数(均为可选) bind:只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted:被绑定元素插入父节点时调用(仅保证父节点存在，但不一定已被插入文档中)。 update:只要当前元素不被移除，其他操作几乎...[2023/4/14]

目录什么是Composition API为什么Vue3推荐使用Composition API总结 什么是Composition API Composition API 是 Vue3 中引入的一种新的 API 风格，旨在提高代码的可读性、可维护性和可重用性。Composition API 不同...[2023/4/14]

@目录发送验证码登录退出登录界面控件获取用户信息功能项目地址 前端代码的框架采用vue.js + elementUI 这套较为简单的方式实现，以及typescript语法更方便阅读。 首先添加全局对象： loginForm: 登录表单对象 twoFactorData: 两步验证数据， ...[2023/4/12]

目录导读事件总线的本质构建一个EventEmitterconfig.globalProperties方法provide/inject结束语 导读 在Vue2中，我们遇到复杂的组件通信时，经常采用事件总线的方式来通信。其具体的思路就是实例化一个空白的Vue，并通过其提供的$on、$once、$em...[2023/4/12]

Vuex 中有以下几个核心概念： State：应用程序的状态存储在单一的状态树中，即 State。State 可以通过 store.state 属性访问。Mutation：状态的变化必须通过提交 Mutation 来进行。Mutation 是一个包含 type 和 payload 属性的对象，t...[2023/4/12]

目录1. 本篇适用范围与目的1.1. 适用范围1.2. 目的2. 牛刀小试 - 先看到地球2.1. 创建 Vue3 - TypeScript 工程并安装 cesium2.2. 清理不必要的文件并创建三维地球2.3. 中段解疑 - 奇怪的路径2.4. 打包部署2.5. 有限的优化3. Cesium...[2023/4/10]

vue 官网中是这样描述 nextTick 的 在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，可以获取更新后的 DOM。 在学习 nextTick 是如何实现之前，我们要先了解下 JavaScript 的执行机制 JavaScript 执行机制 浏览器是...[2023/4/10]

大家好，我是 Kagol，OpenTiny 开源社区运营，TinyVue 跨端、跨框架组件库核心贡献者，专注于前端组件库建设和开源社区运营。 今天给大家介绍如何同时在 Vue2 和 Vue3 项目中使用 TinyVue。 TinyVue 是一套跨端、跨框架的企业级 UI 组件库，支持 Vue...[2023/4/7]

观察者模式定义了对象间一对多的依赖关系。即被观察者状态发生变动时，所有依赖于它的观察者都会得到通知并自动更新。解决了主体对象和观察者之间功能的耦合。 Vue中基于 Observer、Dep、Watcher 三个类实现了观察者模式 Observer类 负责数据劫持，访问数据时，调用dep.de...[2023/4/3]

上一篇文章我们介绍了 Vue2模版编译原理，这一章我们的目标是弄清楚模版 template和响应式数据是如何渲染成最终的DOM。数据更新驱动视图变化这部分后期会单独讲解 我们先看一下模版和响应式数据是如何渲染成最终DOM 的流程 Vue初始化 new Vue发生了什么 Vue入口构造函数...[2023/3/29]

目录一.速识概念：二.八大生命周期钩子函数：三.结合代码了解：1. beforeCreate：2.created：3.beforeMount：4.mounted：5.beforeUpdate:6.updated：7.beforeDestroy：8.destroyed： 一.速识概念： &emsp...[2023/3/29]

目录组件的异步更新queueJobqueueFlushflushJobs总结：nextTick 组件的异步更新 我们应该都知道或者听说过组件的更新是异步的，对于nextTick我们也知道它是利用promise将传入的回调函数放入微任务队列中，在函数更新完以后执行，那么既然都是异步更新，nex...[2023/3/29]

在Vue $mount过程中，我们需要把模版编译成render函数，整体实现可以分为三部分： parse：解析模版 template生成 AST语法树 optimize： 优化 AST语法树，标记静态节点 codegen： 把优化后的 AST语法树转换生成render方法代码字符串，利用模板引...[2023/3/27]

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