細水、長流√的专栏

首先，“@”是一个符号，电子信箱中意义为“at”，即“某用户”在“某服务器”。好了，关于在前端nodejs中相关项目中经常出现的@符号就总结到此，还有哪些小编不知道的用法，还请博友在下面留言补充，以完善知识，利于学习之用。二、在npm中，与“/”相结合，置于包的名字前，表示该包的范围，即指示该包属于某个用户或组织，是该用户或组织提供的私有或公有包。三、node.js中，符合ES6标准的import命令中出现的@， 如。四、Vue的元素标签中，@”是指令“v-on”的缩写。

创建项目后我的vue.config.js只有一行。

【代码】elementui 文本域el-textarea的计数限制不遮挡输入的文字。

前段日子根据公司的UI颜色规范(黑白板)整理了一套css变量提供给同事们使用，这样就不用每次写颜色的时候都要根据UI稿重复适配黑白板了，直接一个css变量搞定。平时也一定要注重积累，多去看看源码，原理性的东西，这样才不至于在排查问题的时候思维枯竭。上述问题确实是帮助同事一起排查了非常长的时间，搜索到的博客翻来翻去都差不多，所以决定自己写篇博客来记录一下这次踩坑，也能够帮助大家去排坑。针对上述问题，我们找了很多的资料，看了很多博客上别人提出来的解决办法最终都没有效果，就在我感觉快要放弃挣扎的时候，翻了翻。

同一个阶段的生命周期Vue3先执行，后执行vue2生命周期，然后再执行下一个阶段的生命周期。但是尽量别混用为好，vue2项目就都用vue2的生命周期，vue3项目就都用vue3的生命周期。Vue3生命周期及当Vue3与Vue2生命周期混用时的执行顺序_vue3在哪个生命周期发送请求_百思不得小李的博客-优快云博客。

今天在编写页面时,看到页面没有任何效果就只是直入直出,完全没有一点逼格,所以想要实现类似于原生app的那种切换页面时的特效,遂开始google,发现网上各种方案都是各有优缺点,于是整理了自认为优雅的方案并记录下来.我们需要给各个页面定义层级,在切换路由时判断用户是进入哪一层页面,如果用户进入更高层级那么做前进动画,如果用户退到低层级那么做后退动画.监控路由跳转,判断切换页面之间的层级关系,并以此来判断路由前进或者后退.每次切换时向左向右切换动画如何实现。如何判断切换路由时是前进还是后退。

如果在组件外使用，就用父组件上加上@hook就可以达到上面的效果。通过监听子组件的生命周期函数来处理业务，例如监听子组件loading，数据渲染到页面的之前让页面 loading。的事件用来监听子组件的事件，只不过事件名和钩子函数同名，当子组件发布时，即执行this.$emit('钩子函数created/mounted',参数)时，在父组件则可以监听到，然后执行回调，使用参考下面的例子。原理：就是父子组件通信的基础上（方法1），添加@hook，形成了对应生命周期函数的自动发布，方法1每次都是手动执行发布。

今天学习Vue源码时，看到抽象组件，以前用过，但是不知道叫抽象组件在Vue中，像这些都是内置的抽象组件，抽象组件和普通的组件类似，只是他们添加额外的行为，不向DOM呈现任何内容。有点像中的高阶组件当然我们也可以实现自己的抽象组件首先实现抽象组件，不用设置template，否则Vue会优先渲染tempplate里面的东西，就不能额外添加行为了实现自己的<debounce>抽象组件创建好组件后，使用的时候，和普通组价一样的使用方法局部使用。

然而，在 Vue 3 中，常规组件的性能有了很大提升，相比之下，这时的函数式组件在性能上失去了以往的优势。因此，函数式组件仅剩的唯一用途就是用来实现简单组件了，比如一个动态生成不同标题的组件（市场被挤压，好可怜）。官方团队宣称，Vue 3 中函数式组件的性能提升微乎其微（与 Vue 2.x 相比），所以建议直接使用常规组件就好。因为函数式组件的初始化和渲染都很快（快过常规组件），所以通常作为一种提升性能的角色出现。函数式组件迁移到 Vue 3，直接把组件的。以创建函数式组件的方式也被废弃了。

这里使用的template写法，vue底层执行的时候会将template解析成AST，然后将AST转化为render函数，render的过程vue帮我们处理就好了，所以不习惯写render函数的同学可以用template(用模板语法则该组件将不再是函数式组件，并拥有实例this)。如果你看过官方文档，了解过vue的组件化，会发现除了.vue结尾的单文件组件，vue还提供创建组件的另一种思路：Vue.component、Vue.Vue.extend可以当做Vue.component的组件选项。

使用场景：由于vue有$parent属性可以让子组件访问父组件。需要注意的是这里不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。provider/inject：简单的来说就是在父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。使用方法：provide在父组件中返回要传给下级的数据，inject在需要使用这个数据的子辈组件或者孙辈等下级组件中注入数据。注意：provide并不是响应式的，当子组件inject的时候已经丢失了响应式功能。

在开发过程中遇到这样一个问题，如何跨组件传递插槽。因为在开发类似树组件的过程中，插槽需要通过外部传递到树的根节点，然后通过根节点依次传递到各个叶子节点。那么如何把根节点的Slot如传递给子组件呢?我们在开发过程中，希望可以这样实现重新定义叶子节点的结构：12345那么如何在组件内传递Slot就是一个问题。

【代码】vue组件递归、组件相互依赖问题解决。

v-slot 指令自 Vue 2.6.0 起被引入，提供更好的支持 slot 和 slot-scope attribute 的 API 替代方案。v-slot 完整的由来参见这份 RFC。在接下来所有的 2.x 版本中 slot 和 slot-scope attribute 仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。Vue中的v-slot详解，作用域插槽和具名插槽_屈小康的博客-优快云博客。

vue-photo-preview插件图片预览插件支持缩放踩坑问题

本文主要介绍多款 Vue 拖拽组件库。

修饰符，得到的内容是去除了前后空白的，但是在输入数据的时候没法按空格键输入空格，这让录数据的人非常难受。分析不能输入空格的原因就是，element的input框不支持。版权声明：本文为优快云博主「Yongqiang Chen」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。在vue项目里使用element ui组件库，你会发现使用element的input框，如果在。v-model上加.trim。

使用原生input标签自带的keyup事件监听方法。3、使用element UI 的表单验证功能。1、使用vue框架中的.trim修饰符。

elementUI el-table 行出现遮挡及多出横线问题

vue2 中 执行顺序 ：vue3 中 执行顺序对应关系。

刚刚在分析element-ui的打包目录可以知道，当需要按需引入的时候，会分别引入对应组件的js以及css，所以不同的组件都需要打包，所以在webpack配置中，每个组件都需要有一个打包入口。为了测试我们自己创建的组件库能够支持按需引入，我们需要创建一个示例工程，用来测试按需引入是否成功，这里我们使用vuecli3脚手架创建的工程来测试，不过在测试我们自己创建的组件库之前，先测试element-ui的按需引入功能，看看有哪些特性。当按需引入组件的时候，就是分别引入对应组件的js以及css文件，而。

在node_modules下找到elementui下的packages找到input组件，进去修改。之后保存重启项目 >> 你会发现没有效果。

【代码】elementUI Tooltip文字提示 三角形颜色修改。

那我们就可以通过querySelector来获取下拉框的dom,监听里面的滚动条位置，一下是loadmore.js中完整代码。按照惯例，我们先打印出el看看下拉框在不在el里面，这时候发现下拉框并不在select中，而是在body下面。这时候在看看loadmore.js中打印出来的值,发现select下拉框就在el里面。这时候我们就要写一个自定义指令，然后在main.js中注册，这个写两个版本，目录创建文件与vue2.x描述是一样的，这里就不重复了，自定义指令在。完整的loadmore.js。

因为我这边是想要直接在table中展示，所以让后端返回了，下面也就是匹配，换成换行标签。具体大家根据自己实际情况进行展示。此时换行功能已经实现，但是 不管有没有超出，鼠标悬浮都会出现此效果。我们更倾向于超出的时候，有鼠标悬浮效果。这种情况下：show-overflow-tooltip是无法满足需求的。此时我们采取其他的方式。1.使用slot自定义el-tooltip内容。2.v-html指令。

我们可以采取专人维护common包的方式，common的组件编写完成后，将其发布到npm。发布流程如下：在注http://www.npmjs.com册一个账号进入common的控制台，输入命令npm login，按照提示输入刚注册的账号密码输入命令 npm publish 即可当然common这个名字肯定被注册了，这里只做示例，真正使用时需使用一个未在npm中注册的包名。

【代码】vue框架的轮播图插件vue-awesome-swiper。

问题有个朋友问了个问题：为啥vue中的v-html不会执行中的js代码？比如，给v-html赋予下面这个值，虽然看到DOM中有值，但却不会弹窗。解释可能他还不知道，这个不是vue的限制，而是html5中的规定。html5中为了安全起见，不会执行innerHTML中插入的的代码。所以，如果想给v-html赋值的代码，虽然能看到在dom中成功展示，但却不会执行中的js代码的。那v-html能否防御xss攻击？既然v-html都不会执行

面包屑有两种：一种是不带动态参数，一种是需要携带动态参数跳转的一，不带动态参数：1，通过路由元meta实现，在每个需要面包屑的页面路由中固定写好如：router.js然后我们直接在面包屑组件中使用计算属性获取数据。2.利用路由对象 matched 属性实现matched：返回一个数组，包含当前路由的所有嵌套路径片段的路由记录 。路由配置:面包屑组件：二，携带动态参数1，需要携带动态参数，那么就必须在路由变化时记录fullPath，2，并要保证刷新时数据

注意：路由name同名并不会影响(三级路由)1.重构2.异步加载异步加载 返回Promise 且 属于CommonJS规范。嵌套路由缓存失效嵌套路由缓存对于多级的嵌套路由需要把中间的层级加入如 /A/B/C 三层 两个router-view中间层为B,添加B.name需要在 最上一层 keep-alive手动加入中间层B.name详情见请浏览《keep-alive不能缓存多层级路由菜单问题》ps：由于当时没搞清楚是哪个的问题 绕了好久,才发现需要先解决这个😂😂😂1.不同的二级路

当我们在项目的开发中，肯定会遇到做了某些操作(修改,删除)后需要刷新页面的时候平常的刷新页面的方法:上面的方法都是可以进行刷新但是屏幕都会闪白一下，体验极差解决这种问题使用的方法原理：允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效修改APP.vue文件APP.vue可以在页面中进行调用注入reload方法使用 this.reload()即可调用参考博客:https://segmentfault.com/a/11900000170076

目录 应用场景解决思路一、缓存所有页面二、缓存部分页面三、页面缓存了，有的功能需要再进入后，仍然重新执行的怎么办四、执行前进刷新，后退时候缓存五、页面B进入页面A需要缓存，页面C进入页面A不需要缓存1、vue工程，很多时候希望页面不管怎么跳转，返回时候，页面都能保持之前的操作状态，2、页面跳转不用每次都执行mounted，特别很多请求数据时候，都是从mounted发起，不需要每次跳转都执行一次请求数据。这就需要使用vue的keep-alive缓存。如果需要缓存所有页面，就在使用router-view中地方（

记录一下本次项目我使用的方法，有更简单便捷的方法，欢迎交流描述： 假设有a b c 页面做法： 使用到了vuex ，beforeRouteLeave1.首先在vuex中state定义一个变量来记录当前的浏览的位置2.在需要的页面中 我使用了beforeRouteLeave 来记录没有路由离开的时候当前浏览的位置其中to.meta.touFlag 是我自己定义的，因为需要记录的页面很多，我觉的这样比较方便，只需要在route 页面加一个参数就好了当然你也可以使用to.name ，如果需要跳转

1、vm.$attrs简介首先我们来看下vue官方对vm.$attrs的介绍：包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建更高层次的组件时非常有用。猛一看有点看不明白....2、场景介绍vue中一个比较令人烦恼的事情是属性只能从父组件传递给子组件。这也就意味着当

   之前大部分 icon 是png图片，当有两种状态时就需要两种图片的替换，占用的体积也是比较大的，后来接触到了阿里iconfont，简直不能太好用，接下来就带你领略 vue 的美好！1. 使用阿里iconfonticonfont 官网上选择自己想要的图标，如果没有想要的图标，就让ui在 adobe illustrator（简称 AI）软件上绘制想要的图标，绘制前先下载 图标制作模板.AI，绘制完成后一定要存储为 svg，不要使用导出为 svg，然后在上传到 iconfont 官网 上就可以了。

情况1：图片在/public目录下把图片放到与index.html同级的目录下方式1因为vue编译后会生成index.html，所以我们将图片与index.html放在同一目录下，相当于在index.html中使用引入图片<!-- img标签引入图片：图片名称，这种属于相对路径，在index.html的同级目录下查找此图片 --><img src="login-bg.png"><!-- img标签引入图片：'/' + 图片名称，这种属于绝对路径

说明：disabledDate函数只能限制到天，精确到时分秒的校验需要el-form校验DEMO在线 demo🎱🤓👀代码<template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="150px" class="demo-ruleForm" > <el-form-item label=..

在element-ui的el-form中，如果要重置一个表单的话，可以用resetFields方法，先看下面的例子：<template> <div> <el-form :inline="true" :model="formInline" class="demo-form-inline " ref="form"> <el-form-item label="输入姓名" prop='name'> <

今天遇到一个使用el-select的时候，需要获取值为对象，使用Select 组件的绑定值是一个数组，但是数组的值只能传入 Number 类型或者 String 类型的数据，如果我们想向其中传入一个对象就会出错。怎么办呢？我们可以发现是缺少一个索引，查看了elemnet-ui 的文档，可以看到 Select 组件有一个属性：value-key那么下面我们来试试用一下这个属性：<el-select v-model="test" value-key="id" @change="change..

transition-group组件v-move实现原理的一些理解在查看到官方文档的transition-group的时候，发现transition-group组件可以使得整个transition-group里的li（或其他元素）都能够准确的移动到他们的正确的位置，并在此期间添加上动画。特别是就算你移除添加节点也有动画 我们知道，在dom里删除添加节点时，浏览器是直接重绘的，哪里还会给你整个动画？ 所以我关注的其实就是，vue移除添加节点时是怎么实现添加动画的在查看源码后，发现了一点线索，现在整理