分类：Vue3

2021
09-13

vue3+el-table实现行列转换

目录行列转换分析成绩单的组成用vue3+el-table做的成绩单前端模拟数据使用el-table生成成绩单确定表头确定数据计算学生的总分和平均分计算排名计算各个学科的平均分。记录各个科目的最高分和最低分增加排序功能增加色彩区分行列转换为啥会出现行列转换的问题呢？因为用户想看的是一张多列的大表单，但是数据库里面保存的是“单列”的数据。于是就需要做一个转换，这样客户看得更方便清晰。SQL有一种写法可以支持这种行列转换... 继续阅读 >

2021
08-25

vue3+electron12+dll开发客户端配置详解

目录修改仓库源启动更换vue-devtools注意事项无边框窗口前后台通知写在最后当前使用的版本为@vue/cli4创建的vue3.0+typescript+electron12版本创建，其他版本暂未测试。网上资料良莠不齐，因此花费时间依次试验，达到一个目前最优解。修改仓库源由于electron版本的未知性，可能存在serve可用而build之后打开白屏的情况，因此需要谨慎对待。最好在版本可用的情况下commit一个版本，方便代码回滚，如果谁有更好的资料希望共... 继续阅读 >

2021
08-23

详解vue3中setUp和reactive函数的用法

1setUp的执行时机我们都知道，现在vue3是可以正常去使用methods的。但是我们却不可以在setUp中去调用methods中的方法。为什么了？？？我们先了解一下下面这两个生命周期函数，分别是：beforeCreate表示data中的数据还没有初始化，是不可以使用的Created:data已经被初始化了，可以使用setUp在beforeCreate和Created这两个函数之间。是不是就知道为啥setUp中不可以去调用methods中的方法了。2.setUp中无法使用data中的数据和... 继续阅读 >

2021
08-12

vite+vue3+element-plus项目搭建的方法步骤

使用vite搭建vue3项目通过在终端中运行以下命令，可以使用Vite快速构建Vue项目。$npminitvite-app<project-name>$cd<project-name>$npminstall$npmrundev引入ElementPlus安装ElementPlus:npminstallelement-plus--savemain.js中完整引入ElementPlus：import{createApp}from'vue'importElementPlusfrom'element-plus';import'element-plus/lib/theme-chalk/index.css';importAppfrom'./App.vue';... 继续阅读 >

2021
07-31

Vue3对比Vue2的优点总结

目录1.为什么要有vue32.vue3的优点3.响应式原理的不同4.生命周期的不同5.默认项目目录结构的不同6.vue3对全局API的优化7.使用Proxy替代了defineProperty8.更多资料1.为什么要有vue3我们使用vue2常常会遇到一些体验不太好的地方，比如：随着功能的增长，需求的增加，复杂组件的代码越来越难以维护，逻辑混乱，虽然vue2也有一些复用的方法，但是都存在一定的弊端，比如我们常常用的Mixin,特别容易发生命名冲突，暴露出来的变量意... 继续阅读 >

2021
07-09

详解Vue3中Teleport的使用

目录Teleport的目的Teleport是怎样工作的在本文中，我们将介绍：Teleport的目的Teleport的例子一些很有意思的代码交互Teleport的目的首先是什么时候以及使用这个Teleport功能。在开发较大的Vue项目时应该以可重用的逻辑去组织代码。但是当处理某些类型的组件（如模式、通知或工具提示）时，模板HTML的逻辑可能不会和我们希望渲染元素处于相同的文件中。实际上在大多数情况下，与Vue的DOM完全分开处... 继续阅读 >

2021
07-08

构建Vue3桌面应用程序的方法

在本文中，我们将研究如何通过Vite开发Vue3桌面项目。在项目中会用到Electron，一种最流行的框架，可使用Javascript构建跨平台的桌面应用程序。因此，许多受欢迎的应用程序都在使用Electron，例如VSCode，Slack，Twitch等。先看看要做什么：尽管这只是一个Vite的基本模板，但它跑在专用程序而不是浏览器中。这是构建自己的桌面应用的必要步骤。以下是开发过程。创建的基本Vite程序首先创建Vite应用。在这里不会过... 继续阅读 >

2021
07-01

vue3删除过滤器的原因

目录什么是vue的过滤器why？举例分析需求描述HTML结构和data数据如下使用filter实现使用computed实现使用methods实现总结什么是vue的过滤器过滤器可以通俗理解成是一个特殊的方法，用来加工数据的比如枚举值可以使用过滤器：如1234对应成功失败进行中已退回比如价格后面跟个过滤器，将价格格式化成小数点两位比如时间格式化等详细请看官方文档why？笔者认为：原因就是vue3要精简代码，并且filter功能重复... 继续阅读 >

2021
06-11

Vue3使用mitt进行组件通信的步骤

Vue2.x使用EventBus进行组件通信，而Vue3.x推荐使用mitt.js。比起Vue实例上的EventBus，mitt.js好在哪里呢？首先它足够小，仅有200bytes，其次支持全部事件的监听和批量移除，它还不依赖Vue实例，所以可以跨框架使用，React或者Vue，甚至jQuery项目都能使用同一套库。1.安装推荐使用yarn安装（用过都知道有多丝滑）yarnaddmitt或者通过npm安装npminstall--savemitt2.引入到项目并挂载可以在main.js挂载到全局//标... 继续阅读 >

2021
06-09

使用Vue3实现一个Upload组件的示例代码

通用上传组件开发开发上传组件前我们需要了解：FormData上传文件所需API dragOver文件拖拽到区域时触发dragLeave 文件离开拖动区域drop文件移动到有效目标时首先实现一个最基本的上传流程：基本上传流程，点击按钮选择，完成上传代码如下：<template><divclass="app-container"><!--使用change事件--><inputtype="file"@change="handleFileChange"></div></template><scriptlang="... 继续阅读 >

2021
05-09

浅谈vue2的$refs在vue3组合式API中的替代方法

如果你有过vue2的项目开发经验，那么对$refs就很熟悉了。由于vue3的断崖式的升级，在vue3中如何使用$refs呢？想必有遇到过类似的问题，我也有一样的疑惑。通过搜索引擎和github，基本掌握如何使用$refs。在vue3中使用组合式API的函数ref来代替静态或者动态html元素的应用。最近业余在学习vue3项目《蜡笔（Crayon）管理模板：Vue3+Vuex4+AntDesign2》开发，这两天迭代推进了一点，实现了chart图表组件，写文章的时候发现提交代... 继续阅读 >

2021
05-02

详解vue3沙箱机制

前言vue3沙箱主要分两种浏览器编译版本，浏览器版本是使用with语法加上proxy代理拦截本地预编译版本，通过在模版预编译阶段转换阶段，使用转换插件transformExpression将非白名单标识符挂在在组件代理对象下浏览器编译版本render函数编译结果<div>{{test}}</div><div>{{Math.floor(1)}}</div>toconst_Vue=Vue;returnfunctionrender(_ctx,_cache,$props,$setup,$data,$options){with(_ctx){const{... 继续阅读 >

2021
04-27

Vue3+TypeScript封装axios并进行请求调用的实现

不是吧，不是吧，原来真的有人都2021年了，连TypeScript都没听说过吧？在项目中使用TypeScript虽然短期内会增加一些开发成本，但是对于其需要长期维护的项目，TypeScript能够减少其维护成本，使用TypeScript增加了代码的可读性和可维护性，且拥有较为活跃的社区，当居为大前端的趋势所在，那就开始淦起来吧~使用TypeScript封装基础axios库代码如下：//http.tsimportaxios,{AxiosRequestConfig,AxiosResponse}from'axios'im... 继续阅读 >

2021
03-29

Vue3 Composition API的使用简介

vue3.0在7月发布了rc版本，vue-cli4.5后也支持选择vue3作为备选版本可以体验了，vue3的正式版本相必也不远了。学不动了呀!!!!相比vue2.0版本(OptionAPI)，CompositionAPI（组合API）算是3.0的重大变更之一了。概述CompositionAPI主要灵感来源于ReactHooks，目的是通过一组低侵入式的、函数式的API，使得我们能够更灵活地「组合」组件的逻辑。示例<template><div>{{count}}</div><button@click="addCount">添加</button></... 继续阅读 >

2021
03-29

vue3常用的API使用简介

vue3.x已经发布了这么久，相关的生态也慢慢起来了，包括vite这个新的打包工具，在vue3.0学习过程中有一些实用性的api对比，希望能在开发中给大家做个示范，准确的使用对应的api去完成我们的项目开发生命周期的变更要特别说明一下的就是，setup函数代替了beforeCreate和created两个生命周期函数，因此我们可以认为它的执行时间在beforeCreate和created之间Vue2Vue3beforeCreates... 继续阅读 >

2021
03-05

vue3 Teleport瞬间移动函数使用方法详解

vue3Teleport瞬间移动函数的使用，供大家参考，具体内容如下Teleport一般被翻译成瞬间移动组件,实际上是不好理解的.我把他理解成"独立组件"他可以那你写的组件挂载到任何你想挂载的DOM上,所以是很自由很独立的以一个例子来看:编写一个弹窗组件<template><teleportto="#modal"><divid="center"v-if="isOpen"><h2><slot>thisisamodal</slot></h2><button@click="buttonClick">Close</button></div></teleport></template... 继续阅读 >