程序员劝退师的博客

前言之前玩一些开源项目的时候有简单接触过可视化表单生成工具，也就是avue-form-design，当时重点都放在服务端了，前端的avue-form-design和avue并没有具体细看，这段时间刚好在搞码帮帮后台系统，于是就用了这个avue和avue-form-design，用的过程中还是有点小失望的，因为之前初略看这个功能的时候，还觉得有点小牛逼，在预期中感觉生成后的表单基本上不用怎么修改，自己搭建了一个后生成的表单发现有些功能无法做到，然后我就怀疑是不是我用的版本不是最新的，打开官网的表单生成界面时

前言昨天写了JAVA整合阿里云OSS/VUE上传阿里云OSS这篇文章，上传是没有问题了，但是在删除的时候有点问题，如果在只上传单张图片的场景下，el-upload是很方便搞定的，但是如果是多张图片，上传是没问题，但是如果上传后的图片要做删除操作还是有点恶心的，本文主要针对VUE端，废话先不多说，场景引入一下！场景引入代码如下<template> <div> <el-upload :limit="4"

前言在很久很久之前我还是个菜鸡的时候，解决报错的时候，不幸看过一种关于this指向的写法，当时没记住，只知道有个这么个模糊的概念，然后今天晚上来了灵感，就写出来了，说到这个this指向问题，很多刚入行的前端同学应该多会碰到，那么今天就写一下关于全局this指向的代码，让我们的代码更加简洁。传统写法问题代码<template> <div> <div @click="test">按钮</div> </div>&lt

前言today，is good day，中午吃了个农民工外卖，有点撑，想在床上躺会，TMD，睁开眼天黑了，别说，冬天的上海天黑的挺早，基本上五点半就已经全黑了，住在出租屋的我，却感觉不到上海的灯火通明，繁华，毕竟在我们这些人的眼里，上海是有钱人的上海，它的繁华、它的璀璨与我无关，我只不过是外地过来讨饭的！回归正题吧！我们在写VUE的时候，会使用scss，也会做一些通用样式，方便使用，在写好的通用样式的时候，每次都要单文件导入，刚开始写的时候，感觉还好，后面工程量大了后，就显得麻烦，那么本文就全局导入scs

前言多年前我本是个服务端小白，随着行业内卷，硬是被熬成了前端小白。。。开个玩笑，只是个人比较喜欢学习技术罢了！本章将带领大家以另一个高端的方式打开阿里Iconfont图标库，过去，我们要么是自己在网上费好大劲，东拼西凑的找一些icon的图片，来美化我们的网页，然而随着技术的发展，和一些大平台的技术奉献，这里不得不说阿里还是牛逼，这里不是夸它，给它打广告，确实，人家在一些领域做的比某腾要好，可能也和领域有关吧，受我个人认知水平问题，我也只能这么认为，比如在我门JAVA服务端方向，阿里有Nacos、Canal

前言这个字体优化对于我这个做后端的有点深入了，虽然很简单，但是没干过还真不知道这玩意怎么弄，可能引入了也看不出什么效果。下载字体包这里提供一个下载的网站！虽然觉得不是很好用，但是勉强凑合，等有时间了问问我们公司专业的前端看看有什么其他的好的推荐下字魂反正不管通过什么渠道下载，得到的字体资源如下VUE导入测试只要是没有单独指定字体样式的都会默认采用这个样式！...

1.将一个 prop 限制在一个类型的列表中使用 prop 定义中的 validator 选项，可以将一个 prop 类型限制在一组特定的值中。export default { name: 'Image', props: { src: { type: String, }, style: { type: String, validator: s => ['square', 'rounded'].includes(s) }

先看问题效果这里的el-menu中的:collapse已经设置为true了，但是文字和>还是显示了出来，而且悬浮上去确实也有折叠时的效果如下。这里研究了一下，发现只要我把el-submenu直接放入到el-menu中是可以的，但是实际业务中做动态路由的时候会带着菜单项也为动态的，那么基本上就会吧菜单项抽离为组件然后循环渲染，但是由于 element-ui 的<el-menu>标签本身希望里面嵌套的是<el-menu-item>,<el-submenu>,&l

在一些需求中，手动挂载组件能够让我们实现起来更加优雅。比如一个弹窗组件，最理想的用法是通过命令式调用，就像 elementUI的this.$message。而不是在模板中通过状态切换，这种实现真的很糟糕。import Vue from vueimport Message from ./Message.vue// 构造子类let MessageConstructor = Vue.extend(Message)// 实例化组件let messageInstance = new MessageC

比如，在页面挂载时定义计时器，需要在页面销毁时清除定时器。这看起来没什么问题。但仔细一看this.timer唯一的作用只是为了能够在beforeDestroy内取到计时器序号，除此之外没有任何用处。export default { mounted() { this.timer = setInterval(() => { console.log(Date.now()) }, 1000) }, beforeDestroy()

通常我们监听组件生命周期会使用$emit，父组件接收事件来进行通知子组件export default { mounted() { this.$emit( listenMounted ) }}父组件<template> <div> <List @listenMounted="listenMounted" /> </div></template>其实还有一种简洁的方法，使

组件 model 选项:允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。input默认作为双向绑定的更新事件，通过$emit可以更新绑定的值<my-switch v-model="val"></my-sw

$event是事件对象的特殊变量，在一些场景能给我们实现复杂功能提供更多可用的参数原生事件在原生事件中表现和默认的事件对象相同<template> <div> <input type="text" @input="inputHandler( hello , $event)" /> </div></template>export default { methods: { inputH

watch本身无法监听多个变量。但我们可以将需要监听的多个变量通过计算属性返回对象，再监听这个对象来实现“监听多个变量”export default { data() { return { msg1: apple , msg2: banana } }, compouted: { msgObj() { const { msg1, msg2 } = this

立即执行watch是在监听属性改变时才会触发，有些时候，我们希望在组件创建后 watch 能够立即执行可能想到的的方法就是在create生命周期中调用一次，但这样的写法不优雅，或许我们可以使用这样的方法export default { data() { return { name: Joe } }, watch: { name: { handler: sayName ,

在开发中修改第三方组件样式是很常见，但由于scoped属性的样式隔离，可能需要去除scoped或是另起一个style。这些做法都会带来副作用（组件样式污染、不够优雅），样式穿透在css预处理器中使用才生效。我们可以使用>>>或/deep/解决这一问题:<style scoped>外层 >>> .el-checkbox { display: block; font-size: 26px; .el-checkbox__label { f

函数式组件是无状态，它无法实例化，没有任何的生命周期和方法。创建函数式组件也很简单，只需要在模板添加functional声明即可。一般适合只依赖于外部数据的变化而变化的组件，因其轻量，渲染性能也会有所提高。组件需要的一切都是通过context参数传递。它是一个上下文对象，具体属性查看文档。这里 props 是一个包含所有绑定属性的对象。函数式组件<template functional> <div class="list"> <div class=

一般在组件内使用路由参数，大多数人会这样做：export default { methods: { getParamsId() { return this.$route.params.id } }}在组件中使用$route 会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。正确的做法是通过props解耦const router = new VueRouter({ routes

这个标题呢我也不知道怎么写！反正看的懂的自然懂了，这个问题的症状如下图Access to XMLHttpRequest at 'http://192.168.0.99:3331/authentication/form?username=TAO&password=123456' from origin 'http://192.168.0.99:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header

前言首先这是一个很简单却又很恶心的问题，简单就是只需要根据服务端的入参规则传参就行了，恶心就是在写前端时，大多数是只知道入参和请求方式的，但是这里就会涉及到一些小的知识点，而且只写前端的或者只写后端的会存在一些知识盲区，那么本文就会详细的介绍后端微服务入参的基本常用类型和前端入参形式!作为一个工程师不能只会前端或者后端，还需要了解运维，测试等其他技能，不谋全局中，不足谋一域！！！后端入参这里使用SpringBoot做后端服务，大致上SpringBoot常见的入参格式一般文章都是写的七中，但是还一种文

前言这篇文章是准备不写的，因为之前写过uniapp插件上传npm，然后加上在手写VUE步骤条组件这篇文章中有提到后期会将这个步骤条组件上传到npm仓库，然后我就用上传uniapp插件的方式试着上传VUE这个插件，上传是能上传，结果在VUE项目中npm安装的这个插件的时候就无法安装，于是我就再思考，哦原来这个uniapp插件上传和VUE插件上传还不一样，于是就有了这篇文章！开干1.创建一个空VUE项目之前创建VUE项目的时候，应该用的是下面这个命令vue init webpack you-proje

前言最近和朋友一起做一个关于程序员赚外快的项目，找了个UI出了个界面，这个美术妹子声音贼好听，御姐类型的，爱了爱了！这个美术妹子估计不知道我是做后端的，前端不是特别专业，她也不问我能不能做出这种效果就把界面搞完了，这就有点难为我了！写到发布问题这个界面的时候有一个步骤条这个功能，我试着写了一下，大致上是这么个意思，但是我觉得不是特别完美，然后我就想偷懒看看有没有现成的组件，找了一些博文，要么是样式不符合，要么就是用图片实现的，局限性太大了，那么我就劳苦一下吧，写了这个VUE插件！请看下图！关于vue-

这篇文章算得上是完善同行的文章，原文中代码没问题，但是缺少依赖，导致无法出现星星评分效果！完善后的效果如下！原作者文章链接vue 星星(共5分)评分，还有一篇文章估计也是同样的问题vue 星星评分组件这篇文章功能更强大一些，我这里只对第一篇文章做了完善，第二篇应该也是同样的问题！代码复制上去后无法显示星星，lou了一眼代码发现使用了fa-star这些玩意！顺个藤摸个瓜到了这里ok，到了这里就明白了！编写星星评分组件<template> <div class="Ratin

前言最近接了一些外包项目，有些直接外包给第三方，有些自己拉团队写的，其中有一个项目需要我这边亲自上手写一些代码，然后就有了这篇文章，要写一个多选的日历需求，然后要默认选中周一到周五的日期！看了看Element-UI组件库，没有找到合适的，那干脆自己写一个吧！然而就在刚才无邪就发来消息说让我排除一下节假日哈哈，没问题的正文实现这个功能需要用到vue-calendar-componen插件npm-vue-calendar-component觉得他这个确实扩展性强为他点个赞！安装vue-calen

这种功能实际开发中用的特别多，但是写起来的话有点点麻烦，演示两种方案，第一种就是常规的class和style绑定，第二种是使用event来搞定，个人觉得event比较比较简单，不用设置那么多的中间变量，然后一堆判断，然后在样式绑定，显得代码臃肿！class方式...

前言vue做数据缓存有多种方案，如：good-storage，localStorage ，本文使用good-storage作为缓存，good-storage是一个插件，需要安装在命令行安装npm install good-storage封装这里需要注意一下，这里有两种方法暴露方式，引用的时候也是不一样的，需要注意！下文全局挂载的时候会说明集中暴露//对浏览器的Cookies和Session 可以参考https://www.cnblogs.com/houzheng/p/9067110.htm

网上有一些解决方案，这个具体原因不我是特别清楚，但是解决了就行了！这个问题刚开始我以为是代码问题，于是我就打开之前干净的框架，然后发现还是有问题，于是我就百度一下，结果试了几种解决方案，并没有什么卵用！还是自己解决吧！一下是别人的解决方案！使用 vue tools 不显示调试面板中的组件，点击控制台报错：Cannot read property ‘VUE_DEVTOOLS_UID’ of undefined在 项目中加入控制：Vue.config.devtools = true;参考： http

前言本文以前端面试官的角度出发，对 Vue 框架中一些重要的特性、框架的原理以问题的形式进行整理汇总，意在帮助作者及读者自测下 Vue 掌握的程度。本文章节结构以从易到难进行组织，建议读者按章节顺序进行阅读，当然大佬级别的请随意。希望读者读完本文，有一定的启发思考，也能对自己的 Vue 掌握程度有一定的认识，对缺漏之处进行弥补。1、说说你对 SPA 单页面的理解，它的优缺点分别是什么？SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaS