分类：vue

2021
09-14

Vue + iView实现Excel上传功能的完整代码

1、HTML部分<Colspan="2">上传文件：</Col><Colspan="22"class="uploadExcelBox"><Uploadref="uploadExcel":loading="uploadLoading":action="uploadFileUrl"accept="xlsx,xls":format="uploadFormat":before-upload="beforeImgFile":on-success="successImgFile":on-error="errorImgFile":show-upload-list="true"><Buttontype="success">上传附件</Button></Upload><divv-if="uploadingFile!... 继续阅读 >

2021
09-14

Vue vee-validate插件的简单使用

目录1.安装2.导入3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)4.使用Form组件配置校验规则和错误对象(form和Field都是从插件中按需导出)5.使用Field组件，添加表单项目校验6.补充表单数据和验证规则数据1.安装npmivee-validate@4.0.32.导入import{Form,Field}from'vee-validate'3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)//创建js文件进行导出exportdefault{//校验项accountacco... 继续阅读 >

2021
09-14

Vue vee-validate插件的简单使用

目录1.安装2.导入3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)4.使用Form组件配置校验规则和错误对象(form和Field都是从插件中按需导出)5.使用Field组件，添加表单项目校验6.补充表单数据和验证规则数据1.安装npmivee-validate@4.0.32.导入import{Form,Field}from'vee-validate'3.定义校验规则(最好是在utils文件夹中单独封装js文件导出)//创建js文件进行导出exportdefault{//校验项accountacco... 继续阅读 >

2021
09-14

纯JS如何实现vue.js下的双向绑定功能

目录首先说一下实现双向绑定的思路：再说一下实现这些功能的js主要的方法有哪些：最后需要创建哪些工具类？实现vue双向绑定看下面截图这是一个普通的html文件，也并没有引入vue.js，是不是在代码中看到有些熟悉的地方？比如："v-model","v-on:click"，还有常用的“双花括号{{}}”赋值语句。首先说一下实现双向绑定的思路：一、创建一个自定义vuejs对象，例如上面的wslVue对象，初始化方法里面需要的参数有：（1）需要挂载到的dom... 继续阅读 >

2021
09-10

vue实现集成腾讯TIM即时通讯

本文主要介绍了vue实现集成腾讯TIM即时通讯，分享给大家，具体如下：上图前言项目需要做个客服功能，用户端小程序，客服人员web端，于是用到了腾讯的tim准备工作在腾讯云官网上创建应用，获取到相应的SDKAppID和相应的秘钥信息安装SDK（1）web项目使用命令//IMWebSDKnpminstalltim-js-sdk--save//发送图片、文件等消息需要的COSSDKnpminstallcos-js-sdk-v5--save（2）小程序项目使用命令//IM小程序SDKnpminstall... 继续阅读 >

2021
09-10

vue 单元测试的推荐插件和使用示例

目录框架一流的错误报告活跃的社区和团队JestMocha推荐插件VueTestingLibrary(@testing-library/vue)VueTestUtils示例单元测试应该：可以快速运行易于理解只测试一个独立单元的工作框架因为单元测试的建议通常是框架无关的，所以下面只是当你在评估应用的单元测试工具时需要的一些基本指引。一流的错误报告当测试失败时，提供有用的错误信息对于单元测试框架来说至关重要。这是断言库应尽的职责。一个具有高... 继续阅读 >

2021
09-10

vue中对虚拟dom的理解知识点总结

本质是一个普通的js对象，用于描述视图界面结构的，在mouted的回调中，可以输出_vnode， 通过图可以知道，_vnode中有以下几个主要的属性：tag：组件的标签名，data:组件的属性，children:组件的子标签parent:父级元素render函数：作用：创建虚拟dom， 每个组件都有虚拟dom，并且虚拟dom都是由render函数创建的；使用虚拟dom树的目的：提高渲染效率在vue中，当渲染视图时候会调用render函数。这种渲染... 继续阅读 >

2021
09-10

vue3使用vue-router的完整步骤记录

前言对于大多数单页应用程序而言，管理路由是一项必不可少的功能。随着新版本的VueRouter处于Alpha阶段，我们已经可以开始查看下一个版本的Vue中它是如何工作的。Vue3中的许多更改都会稍微改变我们访问插件和库的方式，其中包括VueRouter。一、第一步：安装vue-routernpminstallvue-router@4.0.0-beta.13二、第二步：main.js先来对比一下vue2和vue3中main.js的区别：（第一张为vue2，第二张为vue3）可以明显看到，我们在vue2... 继续阅读 >

2021
09-10

Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

目录如何运用vue+echarts前后端交互实现动态饼图前言一、环境配置1.1安装acharts1.2全局引用二、圆环图前端实现 2.1先在vue页面添加渲染盒子2.2前端逻辑实现部分2.3展示（可按自己需求更改前端样式）三、前后端数据交互实现3.1创建数据库3.2后台代码的编写如何运用vue+echarts前后端交互实现动态饼图前言我们做项目的时候，常常需要一些统计图来展示我们的数据，作为web开发人员，会实现统计图是我们必会的技能。我将... 继续阅读 >

2021
09-09

Vue实现动态样式的多种方法汇总

目录1.三元运算符判断2.动态设置class3.方法判断4.数组绑定5.computed结合es6对象的计算属性名方法1.三元运算符判断<text:style="{color:state?'#ff9933':'#ff0000'}">helloworld</text><script>exportdefault{data(){return{state:true}}}</script>2.动态设置class2.1主要运用于：实现循环列表中点击时，相应的元素高亮；（默认首个元素高亮）<template><divclass="wrapper"v-for="(item,index)... 继续阅读 >

2021
09-09

Vue+WebSocket页面实时刷新长连接的实现

最近vue项目要做数据实时刷新，折线图每秒重画一次，数据每0.5秒刷新一次，说白了就是实时刷新，因为数据量较大，用定时器估计页面停留一会就会卡死。。。与后台人员讨论过后决定使用h5新增的WebSocket来实现数据实时展示，记录一下过程以及碰到的问题；注意：页面刷新长连接会被关闭，其实进入当前页面建立长连接的目的就是页面不用F5刷新，所有数据自动实时刷新，如果还是来回F5大刷页面那就没有意义了。。。ps:如果实在有这个... 继续阅读 >

2021
09-09

vue使用webSocket更新实时天气的方法

目录前言关于webSocket的操作及示例：webSocket1.关于webSocket2.与AJAX轮的区别3.webSocket事件4.一个简单的示例天气更新图片素材重连机制前言在vue中使用webSocket做一个简单的天气实时更新模块。关于webSocket的操作及示例：1.webSocket连接2.接收数据3.重连机制webSocket1.关于webSocketwebSocket是HTML5开始提供的一种在单个TCP连接上进行全双工通讯的协议。浏览器通过JavaScript向服务器发出建立webS... 继续阅读 >

2021
09-07

如何在vue中使用pdfjs预览pdf文件

目录前言思考库目录解析和下载使用方法文件位置实际调用问题总结前言在写项目的过程中，偶尔会有使用到pdf的文件，当我们想看pdf文件的时候，你的操作是不是先把pdf文件下载下来，通过电脑安装的专用于打开pdf的软件来查看pdf文件呢。如果有个需求说不要让用户安装软件呢，毕竟还是有很多用户不知道怎么安装软件或者这个东西需要什么东西才能打开嘛。ok，有了这样的需求那我们是不是也得去实现嘛，毕竟这理由咱也没法反驳啊。思考... 继续阅读 >

2021
09-04

浅析vue侦测数据的变化之基本实现

目录一、Object的变化侦测二、关于Object的问题三、Array的变化侦测3.1、背景3.2、实现四、关于Array的问题一、Object的变化侦测下面我们就来模拟侦测数据变化的逻辑。强调一下我们要做的事情：数据变化，通知到外界（外界再做一些自己的逻辑处理，比如重新渲染视图）。开始编码之前，我们首先得回答以下几个问题：1.如何侦测对象的变化？使用Object.defineProperty()。读数据的时候会触发getter，修改数据会触发sette... 继续阅读 >

2021
08-25

Vue实现div滚轮放大缩小

Vue项目中实现div滚轮放大缩小，拖拽效果，类似画布效果1、引入插件vue-draggable-resizable，点我进入GitHub地址。1）、npminstall--savevue-draggable-resizable2）、main.js文件中importVueDraggableResizablefrom'vue-draggable-resizable'import'vue-draggable-resizable/dist/VueDraggableResizable.css'Vue.component('vue-draggable-resizable',VueDraggableResizable)3）、vue文件中使用main.js：importVuefrom... 继续阅读 >

2021
08-23

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

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