lixiaosenlin的专栏

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】前言小伙伴们大家好。上篇文章中我们为问卷系统进行重新布局以及添加了用户登录功能，并且在用户登录时可以选择不同的角色进行登录。但是不管是什么角色（包括匿名）登录进来后显示的权限都是一样的，即只要登录不管是什么角色都能看到所有的菜单及所有的页面功能，这显然是不合理的，作为一个系统就应该为不同角色分配不同的权限，比如管理员权限最大可以看到所有的页面，而普通用户和匿名用户则只能进行问卷填写，对于其它页面则是没有权限的。那么接下来就为我们的系统添加权限校验.

前言HomePage.vue<template> <div class="main-box"> <div class="header-box"> <div class="header-title"> <span>YANNIS 问 卷 调 查 管 理 系 统</span> <div class="user"> <div> <el-icon size="

【千字长文，熬夜更新，原创不易，多多支持，感谢大家】前言Hello，小伙伴们大家好。我们继续来完善问卷调查功能。今天依然还是从问卷提交记录页面上做文章。前面的分享中我们已经实现了提交记录的列表展示功能，但仅仅一个列表展示还是不够的，因为列表中无法显示更多的信息（比如问卷详情）。下面我们就基于列表实现一个点击标题跳转到问卷详情页（结果页）和删除问卷的功能。列表页改造先来看看我们列表页要增加的功能：点击标题跳转到详情页点击某条记录实现删除问卷基于以上两点我们就知道该从何下手了首先.

前言小伙伴们大家好。今天我们继续来完善我们的问卷调查功能。昨天我们已经为问卷添加了数据有效性校验功能。从问卷主题配置到问卷数据有效性校验再到问卷的保存和提交，整个问卷系统已经初具雏形逐步完善了，但仍然还欠缺许多功能比如按角色登录，后台管理，提交记录展示等等。别急，既然是逐步深入系列我们就一步步慢慢来。今天就将实现问卷提交记录保存及展示功能。保存提交记录为了操作方便我们就不借助后台数据库了，依然使用本地存储localStorage进行历史记录的保存，拢共分为三大步：首先来分析一下我们要保存的信

前言小伙伴们大家好。今天将带着大家继续来完善我们的问卷调查功能。到目前为止我们的问卷调查功能已经实现了问卷主题配置、问卷结果提交，问卷结果保存及回填，问卷结果展示等基本功能。看上去貌似一个问卷调查功能已经实现了，然而还有一个比较重要的功能没有实现，那就是数据有效性校验功能，想想如果没有数据有效性的校验，打开一个问卷什么都不填就直接提交，那就失去了问卷调查的意义了。因此本文将在前面分享的基础上增加数据有效性校验功能。需求描述...

前言hello，小伙伴们大家好。到目前为止在【vue3.0实战逐步深入系列】文章中，我们已经实现问卷调查的配置、填写、获取结果以及结果展示功能。看似已经完成了简单的问卷调查功能，但实际上体验还不够友好。为什么这么说呢，我们先来看一个场景。假如一个问卷调查中有很多问卷主题十几个甚至几十个都有可能，正当我们填到一半的时候突然出现故障（浏览器崩溃或者电脑断电等），当我们再次重新打开浏览器时发现问卷已经变成了空白，原来辛辛苦苦填写的全都不见了，是不是瞬间崩溃。为了解决这一问题我们继续完善我们的问卷调查功能，为我

前言hello，小伙伴们大家好。在上一篇文章中我们已经实现了问卷调查的提交功能，在填写完问卷点击提交后会把问卷结果显示在控制台中。然而这种形式对用户来说显然很不友好，甚至有的用户并不知道如何打开控制台，给人的感觉就是点了提交按钮没有任何反应，看不到提交结果也不知道有没有提交成功。在本次分享中我们将沿着上篇文章继续向下深入，借助vue-router路由来实现点击提交按钮后携带者问卷结果跳转到一个新的“问卷结果”页面，并将结果展示给用户。安装及配置路由因为本次分享中会涉及到页面的跳转，因此我们将引入

前言hello，小伙伴们大家好。昨天我们对最初的投票功能做了一个简单的扩展：实现了一个简单的问卷调查功能。在实现该问卷功能时，我们分别封装了几个不同类型的组件：投票组件，单选组件，多选组件，输入组件和评分组件。不知有没有小伙伴发现，虽然问卷的大部分功能都实现了，问卷主题可自由配置，用户也可以进行点选输入填写问卷，但最后问卷填写完成后发现点击提交按钮并没有反应，那岂不是白操作了一顿？没错该问卷还少了个提交功能，接下来我们就把问卷的提交功能补齐，同时对App.vue组件进行一个简单的优化。给自定义问卷组

前言小伙伴们大家好。在前面一偏文章中我们把投票功能进行了简单的改造：引入了axios第三方库并进行了二次封装用于模拟请求服务器数据。同时添加了一个json文件来替代服务器从而达到前后端交互的目的，最终实现了一个可动态配置的，不限个数的投票功能。然而不管有多少个投票功能都只能统计支持和不支持的个数，如果来了新的需求：想要实现点选或者输入功能，那么简单的投票就无法满足。接下来这篇文章就基于前面的投票功能继续扩展改造，实现一个可以点击，可以点选，可以输入的问卷调查功能。分析在我们常见的问卷调查中一般都

前言小伙伴们大家好。前面文章我们引入了elementui组件库，对我们的投票功能做了一下简单的美化，在经过一番的折腾后终于我们的投票模块在保证了功能的情况下，也变得美观了两全其美。然而一次只能做一个主题的投票显得太过单调，并且投票主题都是定死的，如果想换其它主题就不得不修改源码了。今天我们在前面投票功能的基础上进行一个扩展：投票还是投票，但是要让我们的投票主题动起来，并且一次能够进行多个主题的投票。安装和配置axios为了让我们的投票主题能够动起来（可配置），我们需要借助第三方库axios来从数

前言小伙伴们大家好。前面一篇文章中我们利用vue3.0实现了一个超级简单的投票功能，虽然功能是实现了也达到了巩固vue3.0知识点的目的，但是页面没有添加任何样式也没有进行任何的UI设计，因此页面很丑。前端作为一个项目的门面是万万不能少了样式和ui设计的，因而本篇文章就将在上一篇的基础上添加一些样式，引用一些新的UI组件库。先来看下优化前后的效果草图，实际页面更好看一点element-plus本着尽可能少的写样式我们本次案例中引用了elementui的UI组件库，我们用的是vue3.0，因此

前言小伙伴们大家好。在前面一篇文章中我们学习了vue3.0中组合式API的使用，组合式API能够给我们带来的好处以及组合式API中一些常用的方法等。但是整篇文章下来感觉知识点有点散，对于没有vue基础的小伙伴来说可能只知道有这么个知识点，但是具体怎么使用还是不太理解。接下来我们就从零开始实现一个超级简单的投票功能，目的是学以致用，把零散的知识点串联起来形成一个整体，从而更方便我们理解和使用。创建vue3.0项目首先我们用vue脚手架来创建一个vue3.0项目：vue3vote。...

前言小伙伴们大家好。为期近半个月的TypeScript分享到这里就结束了，当然了前面关于TypeScript的分享都是一些表面的基础知识，想要更深入的了解还需要多学多练多看源码，本猴就不再做过多分享了。从今天开始将为小伙伴们奉上关于Vue3.0相关知识的一些分享。vue3.0相较于vue2.0还是有很大的改变的，个人感觉vue3.0的用法更接近于react的了。至于一些语法指令啥的相较于2.0没有什么变化，这里就不再分享了。那么我们要学习的是3.0中的一些变化和新的技术点，下面我们先从vue3.0的使

前言【一天一个小知识，每天进步一点点】小伙伴们大家好。上一篇文章Vue2.0源码解析 - 知其然知其所以然之keep-alive原理分析（一）中已经对keep-alive源码的整体框架了做了一个简单的梳理，知道了keep-alive工作的一个大体流程，今天我们我将继续对keep-alive一些核心的源码进行展开分析。cacheVNode上篇文章中提到了在methods中定义了一个cacheVNode函数，用来做虚拟DOM的缓存，下面就来分析一下它的源码：methods:{ cacheVNo

前言【一天一个小知识，每天进步一点点】小伙伴们大家好。上一篇文章Vue2.0源码解析 - 知其然知其所以然之keep-alive给大家分享了Vue2.0中关于内置组件keep-alive的作用和用法，通过学习让我们知道原来vue中的组件也是可以缓存的，不是每个组件都必须得销毁。那么知道了keep-alive的作用和用法了，不知有没有小伙伴好奇：它是怎么实现缓存的呢，它的原理又是怎样的？接下来即将为大家揭晓。keep-alive整体源码解读前面我们说过，keep-alive是vue中的一个内置组件

前言【一天一个小知识，每天进步一点点】小伙伴们大家好，今天将要给大家分享是Vue中关于组件缓存的一个内置组件 - keep-alive不知道小伙伴们有没有遇到这样一种情况，在我们的项目开发中，有时候会利用弹出框做一些表单提交的操作，但有时候填着填着鼠标不小心点了一下弹出框以外空白的地方，导致弹出框关闭了，当再次重新打开弹出框的时候，发现之前录的信息全都不见了，是不是瞬间就不淡定了呢。这个时候我们的内置组件keep-alive就会派上用场了。接下来我们就一起分析下keep-alive是干什么用的，它的实

前言小伙伴们大家好。用过Vue的小伙伴都知道，在我们进行Vue开发时，避免不了会使用一些第三方的库，比如说ElementUI组件库。当我们导入好这些组件库后会执行一个Vue.use函数，然后把导进来的组件库作为参数传给该函数。这样就可以在任何页面中都可以随意的使用组件库中的各种组件了。如果不去执行Vue.use函数，那么即使组件库被导进来，那么内部的组件还是无法使用的。小伙伴们有没有想过这是为什么呐，Vue.use函数的原理又是什么呢，在它的内部都做了什么？接下来我们就为大家来一一解答。Vue.u

前言小伙伴们大家好，在上一篇文章Vue中两个让你幸福感爆棚的组件导入小技巧之循环代替Ctrl C/V（独家总结）中我们已经学习了一个注册全局组件的小技巧，使得我们在注册大量全局组件时不再被Vue.use或Vue.component所霸屏。不知道小伙伴们看了以后幸福感有没有提升呢，如果觉得还不过瘾，那么接下来的这个连import都可以省略的小技巧会不会让你怦然心动呢？我们今天要分享的是一个webpack为我们提供的能够获取特定上下文的api函数require.context。require.cont

前言小伙伴们大家好，今天要跟大家分享的是能够提升幸福感的关于组件导入的两个小技巧。做前端开发的小伙伴都知道，当前前端中有两大流行的框架Vue和React。而现在的前端开发中大部分公司用的也都是这两大框架。那么不管是用的vue还是react都离不开第三方的UI组件库，比如elementui、ant-design和vant等等。既然用到了第三方库，那么势必就少不了安装、导入和注册，然后才能使用，接下来我们就以vue+elementui为例来分享一下如何提升幸福感。按需导入的瑕疵在我们使用eleme

前言大家好，目前为止，六大常用自定义指令已经接近尾声了。那么今天即将出场也是最后一个隆重出场的便是我们的图片懒加载的自定义指令v-lazyload了。先来简单介绍下，为什么要用图片懒加载而不是直接加载？小伙伴们应该都知道，在前端中向引入外部css文件，JavaScript文件以及一些图片资源等等都是需要发送单独的http请求的，而http请求多了势必会影响到页面的性能，如果一个页面有大量的图片需要加载，如果不采用懒加载的话，就会需要大量的http请求从而占用了页面其它资源的正常请求进而就会影响到了页面

前言大家好，截至目前大厂中常用的六大vue自定义指令我们已经搞了四个了，今天就来继续搞六大常用指令中的第五个指令 - 权限校验之v-permission。在我们日常开发中权限校验是必不可少的一个环节，尤其是对于一些应用系统或一些中后台的开发，更是需要用到权限校验的。那么权限校验也有很多种类，比如菜单权限、组件权限甚至是小到元素权限等等，本文我们就将以元素权限为例，实现一个简单的权限校验自定义指令。在有一些场景中我们可能会根据用户登录后所拥有的权限来决定哪些元素该显示，哪些元素不该显示。比如我们最常

前言截至目前，一线大厂常用的6大vue自定义指令中，我们已经学习实现了3个了，而其中上一篇一线大厂常用的六大vue自定义指令合集之防抖v-debounce中的自定义防抖指令与我们今天要学习的节流自定义指令除了函数不一样，其它的基本上是一模一样。下面让我们一起来揭开它的面纱吧！关于javascript中是如何实现节流，这里不再过多赘述，感兴趣的小伙伴可以查看这篇web前端高级JavaScript - 函数的防抖和节流文章了解更多。本篇文章主要介绍如何实现一个节流的自定义指令，下面我们就来分析一下大体实

const config = { bind(el,binding){ let val = binding.value, wait = 500, immidiate = false, type = 'click', params = [], func, handle = binding.name === 'debounce'?debounce:throttle; if(val == null) return; if(typeof val !== 'objec

前言前面我们已经讲了一个点击自动复制文本的自定义指令。今天我们再来说一个关于限制输入的自定义指令。先来了解一下什么是限制输入呢？其实就是针对用户的输入行为做一个合理合法的校验，排除一些不符合规则的输入。在h5的input标签中已经为我们提供了一些输入限制的类型，比如color，date，email，number，tel等等，如果是一些简单的输入验证，使用这些自带的类型已经足够了。然鹅，有时候根据一些业务需要，这些单一的输入限制可能无法满足我们的业务需求，这时就不得不定制一套灵活的输入限制了。如果仅仅是

前言前面的文章中我们已经对vue2和vue3中自定义指令的语法和钩子函数分别做了梳理和介绍。光说不练假把式，接下来我们就来实战一下，同时也看一看一线大厂们常用的自定义指令有哪些。今天要实战的是自动复制文本到剪切板的自定义指令。不知道小伙伴们有没有遇到过这样的情况，当我的鼠标去点击一个文本的时候，这个文本就会自动复制到了剪切板里了，然后就可以想往哪粘就往哪粘了，妈妈再也不用担心我的复制粘贴了。言归正传，下面我们将以vue3.0为例来分析和实现一下自动复制功能思路分析要想实现文本的自动复制，我们需

前言前面一篇文章Vue2.0如何实现一个自定义指令（搜一贼）中我们已经对2.0中自定义指令的语法和钩子函数以及钩子函数中的参数进行了梳理，最后还实现了一个非常简单的文本框自动聚焦的小案例，接下来这篇文章我们将梳理一下vue3.0中自定义指令是如何实现的，3.0相较于2.0又发生了哪些变化。vue3.0自定义指令其实3.0中自定义指令的语法没有什么太大变化，唯一的变化就是在2.0中是通过Vue.directive()来实现一个全局的自定义指令，而3.0中不再使用Vue了，而是通过函数createA

前言做前端（尤其是Vue技术栈）的同学应该都知道，vue3.0已经来很长一段时间了，虽然现在市面上用vue3的人还不多，但是随着技术的不断发展，相信vue3取代vue2也是迟早的事。所以不管现在是否用得到，3.0的一些知识还是有必要学起来的。下面就从最基本的生命周期（钩子）函数开始对vue2.0和vue3.0进行一个简单的梳理和对比Vue2.0生命周期函数我们知道在2.0版本中主要有8个比较的生命周期函数，另外还有2个跟keep-alive组件相关的，下面我们就分别对每个函数做一下简单的介绍

vuexstate用于存放组件间互相通信的属性值。原则上state中的属性只能在各个组件之间使用，而不能修改，如果要修改需要在mutations中修改mutations这里存放的都是一些函数，用于修改state中的属性值这里的函数中只接收两个参数：state和options如果某组件中需要修改state中的属性值，则需在该组件中用this.$store.commit(‘方法名’, 参数)的方式来调用，即需要用commit方法来调用mutations中的函数

vue2.0实现双向数据绑定原理vue2.0中通过利用Object.defineProperty方法监听属性的get和set方法来实现对数据的双向绑定，看如下示例：<!DOCTYPE html><html><head><style> </style></head><body>Name: <span id="txtName"></span><br /><i

vue项目优化总结vue代码层面data 尽可能扁平化处理（vue数据劫持方面的优化）不需要修改的数据使用object.freeze冻结处理v-if与v-show分场景使用v-if：通过控制元素的添加和删除来实现显示和隐藏v-show：直接控制元素的display来实现元素的显示和隐藏如果需要频繁控制元素的显示和隐藏则建议使用v-show如果需要根据用户角色来控制某元素是否显示则建议使用v-ifv-for循环时，注意key的作用，设置唯一key值可避免元素复用对于没有使用v