分类：Vue

2020
09-25

简单了解Vue + ElementUI后台管理模板

最近学习和项目都用到了Vue和ElementUI，自己不是专业前端，搞这些UI上的东西还是有些难度，这里推荐两个Vue+ElementUI后台管理模板vue-element-adminvue-element-admin官网介绍vue-element-admin是一个后台前端解决方案，它基于vue和element-ui实现。它使用了最新的前端技术栈，内置了i18国际化解决方案，动态路由，权限验证，提炼了典型的业务模型，提供了丰富的功能组件，它可以帮助你快速搭建企业级中后台产品原型。vu... 继续阅读 >

2020
09-25

Vue插件之滑动验证码用法详解

本文实例讲述了Vue插件之滑动验证码用法。分享给大家供大家参考，具体如下：目录预览基于滑动式的验证码，免于字母验证码的繁琐输入用于网页注册或者登录安装使用方法更新记录V1.1.2版本V1.1.1描述（此版本有bug,请使用最新版）V1.1.0版本新增属性`imgs`：内置方法props传参（均为可选）自定义回调函数注意事项预... 继续阅读 >

2020
09-25

vue中使用v-for时为什么不能用index作为key

结论：更新DOM的时候会出现性能问题会发生一些状态bugReact中的key也是如此如果已经了解为什么要用key，可以通过目录直接跳到下一节。为什么要用key？Vue和React都实现了一套虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而隐藏在背后的原理便是其高效的Diff算法。Vue和React的虚拟DOM的Diff算法大致相同，其核心是基于两个简单的假设：两个相同的组件产生类似的DOM结构，不同的组件... 继续阅读 >

2020
09-25

详解为什么Vue中不要用index作为key(diff算法)

前言Vue中的key是用来做什么的？为什么不推荐使用index作为key？常常听说这样的问题，本篇文章带你从原理来一探究竟。另外本文的结论对于性能的毁灭是针对列表子元素顺序会交换、或者子元素被删除的特殊情况，提前说明清楚，喷子绕道。本篇已经收录在Github仓库，欢迎Star：https://github.com/sl1673495/blogs/issues/39示例以这样一个列表为例：<ul><li>1</li><li>2</li></ul>那么它的vnode也就是虚拟dom节点大概... 继续阅读 >

2020
09-25

原理深度解析Vue的响应式更新比React快

前言我们都知道Vue对于响应式属性的更新，只会精确更新依赖收集的当前组件，而不会递归的去更新子组件，这也是它性能强大的原因之一。例子举例来说这样的一个组件：<template><div>{{msg}}<ChildComponent/></div></template>我们在触发this.msg='Hello,Changed~'的时候，会触发组件的更新，视图的重新渲染。但是<ChildComponent/>这个组件其实是不会重新渲染的，这是Vue刻意而为之的。在以前的一段时间... 继续阅读 >

2020
09-25

Vue的data、computed、watch源码浅谈

导读记得初学Vue源码的时候，在defineReactive、Observer、Dep、Watcher等等内部设计源码之间跳来跳去，发现再也绕不出来了。Vue发展了很久，很多fix和feature的增加让内部源码越来越庞大，太多的边界情况和优化设计掩盖了原本精简的代码设计，让新手阅读源码变得越来越困难，但是面试的时候，Vue的响应式原理几乎成了Vue技术栈的公司面试中高级前端必问的点之一。这篇文章通过自己实现一个响应式系统，尽量还原和Vue内部源码同样... 继续阅读 >

2020
09-25

VUE table表格动态添加一列数据,新增的这些数据不可以编辑（v-model绑定的数据不能实时更新）

一、问题用elementUi横着增加一行数据没毛病，可以操作添加一列，这新增的这一列，第一次去赋值的时候值是改了，但没生效点击下一行时值就变过来二、原因横向添加是复制上面的某一条数据来的，因为data里面有这些属性的定义，所以横向添加没问题而纵向添加的数据，因为没有事先在el-selectv-modle=""里面定义好字段，定义好的option是通过v-for出来的(option是写死的就不会有这个问题)，就会出现选择后，select元素上无法展... 继续阅读 >

2020
09-25

vue组件库的在线主题编辑器的实现思路

一般而言一个组件库都会设计一套相对来说符合大众审美或产品需求的主题，但是主题定制需求永远都存在，所以组件库一般都会允许使用者自定义主题，我司的vue组件库hui的定制主题简单来说是通过修改预定义的scss变量的值来做到的，新体系下还做到了动态换肤，因为皮肤本质上是一种静态资源（CSS文件和字体文件），所以只需要约定一种方式来每次动态请求加载不同的文件就可以了，为了方便这一需求，还配套开发了一个Vessel脚手架的插... 继续阅读 >

2020
09-25

vue+render+jsx实现可编辑动态多级表头table的实例代码

最近项目需要实现可编辑的动态多级表头表格，看了两天的文章，始终没有找到我想要的效果，在了解了render+jsx的基础用法后，自己基于element-ui封装了一个，数据格式参考element-uitable的数据。实现如下：1.scoresTable<script>importscoresColumnfrom"./scoresColumn";exportdefault{components:{scoresColumn},render:function(h){return<divclassName="table-control"><el-tab... 继续阅读 >

2020
09-25

Java基于jeeplus vue实现简单工作流过程图解

jeeplus是一款基于代码生成器的快速开发平台。前后端分离、maven多模块开发，方便多人协同开发后端选型：springboot2+mybatis+shiro+jwttoken+flowable前端选型：vue+element-ui+es6+webpack代码生成器支持连接不同的数据库，生成的模块可以连接指定的数据库，支持自定义模板，可以无限扩展，生成各种复杂的代码一套代码支持mysql,oracel,postgresql,sqlserver数据库html5工作流设计器+动态表单+数据权限+... 继续阅读 >

2020
09-25

Vue路由守卫及页面登录权限控制的设置方法(两种)

①先在我们的登录页面存储一个登录数据//登录成功时保存一个登录状态；sessionStorage.setItem("flag",1);②添加路由守卫方法一：直接在路由中添加constrouter=newVueRouter({...})//路由守卫router.beforeEach((to,from,next)=>{//...})方法二：当我们使用的是exportdefault方法时可以在main.js中添加router.beforeEach((to,from,next)=>{}）方法。constRecruit=resolve=>require(['../component... 继续阅读 >

2020
09-24

12 种使用Vue 的最佳做法

作者：MattMaribojoc译者：前端小智来源：medium随着VueJS的使用越来越广泛，出现了几种最佳实践并逐渐成为标准。在本文中，主要分享在平时开发中一些有用资源和技巧，废话少说，我们开始吧。1.始终在v-for中使用:key在需要操纵数据时，将key属性与v-for指令一起使用可以让程序保持恒定且可预测。这是很有必要的，这样Vue就可以跟踪组件状态，并对不同的元素有一个常量引用。在使用动画或Vue转换时，key非常有用。如果没... 继续阅读 >

2020
09-24

vue计算属性+vue中class与style绑定(推荐)

vue计算属性在模板中放入大量的逻辑会让模板过重且难以维护计算属性下所有函数可以放到computed中class与style绑定原始写法v-bind:class缩写:classclass绑定的三种形式style的三种绑定形式属性值为true显示，false不显示第一种绑定方式：第二种绑定方式：第三种绑定方式：style修改方式1：方式2：方式三：ps：下面通过代码介绍下计算属性计算属性就是当其依赖属性的值发生变化时，这个属性的值会自动更新，与之相关的DOM部分也... 继续阅读 >

2020
09-24

如何基于python3和Vue实现AES数据加密

高级加密标准(AES,AdvancedEncryptionStandard)为最常见的对称加密算法(微信小程序加密传输就是用这个加密算法的)。对称加密算法也就是加密和解密用相同的密钥，具有以下几个特点：1、最常用的对称加密算法2、密钥建立时间短、灵敏性好、内存需求低3、实际使用中，使用工作模式为CTR（最好用BC去实现），此工作模式需要引入IV参数（16位的字节数组）4、密钥长度128/192/256，其中192与256需要配置无政策限制权限文件（JDK6）5、... 继续阅读 >

2020
09-24

vue跳转页面的几种方法(推荐)

vue跳转不同页面的多种方法1：router-link跳转<!--直接跳转--><router-linkto='/testDemo'><button>点击跳转2</button></router-link><!--带参数跳转--><router-link:to="{path:'testDemo',query:{setid:123456}}"><button>点击跳转1</button></router-link><router-link:to="{name:'testDemo',params:{setid:1111222}}"><button>点击跳转3</button></router-link>2：this.$router.push()<template><divid='test'>... 继续阅读 >

2020
09-24

Vue项目页面跳转时浏览器窗口上方显示进度条功能

在vue项目中，为了减少首屏加载的时间，通常会开启路由的懒加载。路由懒加载配合gizp确实能帮助我们大大的加快首屏的加载时间。然而，路由懒加载会使得我们在第一次打开一个新页面的时候，会有一个加载时间。如果在这个时候我们没有一个提示的话，给人的感觉会是好像我点了页面跳转但是没反应。所以，这个时候我们可以加一个进度条来告知用户。具体实现，我们使用NProgress这个滚动条效果插件。1.安装：cnpminstall--savenprogr... 继续阅读 >