vue
做梦翻了个身
始终保持热情的去干一件事是困难的,但是当你真正做到的时候,你就是强者!
展开
-
vue实现双开门动画
需求:前一个页面离开时有双开门动画,后一个页面有缩放动画的效果。不太理解双开门动画的小伙伴,可以参考ppt的门动画版本迭代第一次迭代设计第一想法就是通过创建一个父元素,并为其添加两个子元素,分别给这两个子元素设置vue动画来实现。实现//双开门动画组件 parent.vue<template> <transition name="door"> <div class="door"> <div class="door-left"原创 2020-07-13 18:55:40 · 1151 阅读 · 0 评论 -
element 表单的部分校验
在实际的项目中,我们不仅会遇到表单的全校验,有时会遇到只需要对部分字段进行校验。在element中为form的部分校验提供了专门的方法validateField。具体的实现如下。下面放一波在项目中的使用。在这里我们只需要对fieldToValidate里的这两个字段进行校验。遍历fieldToValidate,对每个字段进行校验,设置校验函数的cb为promise的成功函数。这样,就算有字...原创 2020-03-11 15:39:53 · 3787 阅读 · 0 评论 -
富文本编辑器quill在vue项目中的使用
前段时间在项目中有这样一个需求:1:要求用户在输入文字的过程中可以引用变量,并且可以插入到任意的位置。2:引用的变量要求是一个整体,删除的话必须整体删除。不能在一个变量的中间插入其他的文字。3:引用的变量和输入的文字在样式上也要有区别。拿到这样一个需求,第一个想到的就是需要使用富文本编辑器。随后经过调研,选择了github上start 25k的quill。下面就来说一个我的使用方案吧。...原创 2019-12-29 11:33:31 · 1775 阅读 · 3 评论 -
vue - 组件通信
使用vue开发项目其中之一的原因就是由于它的组件化。你可以将一个复杂的页面分为好多个小的组件,各自实现一个小功能。是页面的逻辑更加清晰。那么这么多的组件是怎样将它们连接起来的呢,那就离不开组件之间的通信了。组件通信分为两种。一种是父组件给子组件传送数据,另一种则就是自组件给父组件传送数据了。下面我通过几个简单的例子来简单说明一下组件之间是怎么通信怎样传送数据的。父组件给子组件传送数...原创 2018-06-14 19:04:41 · 167 阅读 · 0 评论 -
前端面经
在实习简历被两次回绝没有给我任何机会的情况下,阿里飞猪终于把我的简历捞起来啦。真的是既开心又难过。下面分享一下阿里一面的前端问题。面了整整71分钟,我感觉我脑壳疼~~~ 1 自我介绍 2 公司项目 3 promise 4 异步编程 5 fetch 6 js的继承方法 7 原型链 8 this 9 js单线程,js怎样处理异步 10 事件轮询机制 11 前端性能优化(一直问,问...原创 2018-08-06 11:57:46 · 836 阅读 · 1 评论 -
vue中Computed 和 Watch的使用和区别
Computed: 可以关联多个实时计算的对象,当这些对象中的其中一个改变时都会出发这个属性。具有缓存能力,所以只有当数据再次改变时才会重新渲染,否则就会直接拿取缓存中的数据。举个例子: 当我们想让div元素的背景色和文字颜色一致时,我们就可以使用computed属性。此时computed只会在初次渲染和文字颜色改变的情况下才会触发。其他情况下会直接从缓存中读取。 Watch:当你需要...原创 2018-08-13 20:14:18 · 18641 阅读 · 0 评论 -
vue页面的定时刷新
在做项目时我们肯定会遇到要求该页面几分钟去定时刷新一下获取最新数据这样的情况,那么这个时候我们就要使用setInterval()了。那么我们应该把定时刷新放在什么位置什么时候触发什么时候清除呢?这就需要我们了解vue的生命周期。首先贴一张从官网截下来的图吧。 在该图上我已经标注了触发和清除的时期,那么我们在使用中还有几个需要注意的点。使用setInterval时this指向的问题。如果...原创 2018-08-27 16:20:37 · 45783 阅读 · 10 评论 -
v-html加过滤器
之前我们如果想要对展示的代码进行过滤,可以直接像下面这样 但是会发现这样之后内容完全展示不出来了,这是因为vue进行改版之后,我们不能在v-html里面直接这样使用过滤器了。 那么既然不能直接使用,那我们可以把我们的过滤放在函数里面,然后去调用这个函数啊。我们就可以这样写: 这样一来我们就解决这个问题啦!!...原创 2018-08-28 10:40:12 · 4997 阅读 · 2 评论 -
echarts-wordcloud在vue中适配2k,4k
在项目中 install 并在main.js文件中引入 echarts以及在你使用到echarts-wordcloud的vue组件中引入 (因为echarts-wordcloud是echarts的扩展所以需要单独的引用)npm install echartsnpm install echarts-wordcloudmain.js*import echarts from ‘你对应下载的目录...原创 2019-08-12 20:00:23 · 1726 阅读 · 0 评论