- 博客(15)
- 收藏
- 关注
原创 VUE-ELEMENT实现动态菜单递归组件
VUE-ELEMENT实现递归路由组件 刚入行前端的小伙伴们应该都是在公司框架之上进行开发的吧,菜单路由接口调用都给安排的好好的,需要做的只是创建一个vue,链接上路由,开发业务。 当然啦,仅会写业务的前端格局还是不够打开的,前端更新如此之快系统风格让人眼花缭乱,说不定哪天产品就会觉得之前的框架怎么这么low,你来再重
2021-11-16 10:44:49
1142
6
原创 js轮播图无缝滑动
前两天在某乎上看到一篇前端程序员被框架惯坏了的一篇文章,主要拿轮播图的原理来示例讲的,正好写这篇文复习一下。轮播图是什么应该都不陌生,就不细说了。滑动效果主要是将所有的图片排列在一行,运用了定位加left、right偏移来进行的滚动,用封装的animation或者css3动画进行滑动效果的展示,但是图片一般只有5、6张,当我们滑倒最后一张时,在往右划使其展示第一张的内容,这便是轮播图的无缝滚动的需求。如上图所示,每个方块代表每一张商品轮播图,当我们从倒数第二张图片(4)滑动到最后一张图片(1)时使其
2020-12-19 20:44:45
545
3
原创 Vue全家桶——Vuex简单理解
为什么需要vuex当我们在兄弟组件之间进行传值时,必须要把他们联系起来,要么使用子传父,父在传子的方法,要么使用事件中心。但是这两个方法都有其缺点,例如,事件中心的方法,会有不确定性,而子父子传参又会异常的麻烦,需要找到与他们都有联系的父组件,若是隔了十八辈的兄弟需要引入非常多无用的组件,这就使得开发的难度大大的加大。为此,引入了vuex。vuex使用引入:在利用脚手架工具配置项目时,选中vuex进行自动安装。使用: 在store中index.js中进行写入。//初始化引入后的页面import
2020-12-14 20:32:10
255
原创 vue生命周期mounted数据更新时解析
前面我们简单的介绍了一下vue的生命周期,今天在深入了解一下生命周期中的mounted。根据之前的简单分析生命周期来看当我们的页面完完整整的展现在了我们眼前的话,生命周期就已经到了mounted这个周期内部当我们代码发生变化时,视图也理应发生变化,就进行了如图所示的循环。当我们的代码发生改变时,此时在beforeUpdate阶段代码进行改变从而影响视图发生改变,需要一定的时间,那我们什么时候可以获取并打印出我们修改的数据呢?首先我们应该想到updated这一个周期中,当我们想到并查看该周期的文
2020-12-10 12:55:41
3032
原创 vue watch监听路由变化
在vue日常使用中watch常用来监听数据的变化,今天也是由一些问题用到了监听路由的转换。watch: { '$route.path': { immediate: true, handler: function (newVal, oldVal) { this.activePath = newVal } } }此代码片段中,watch监听的路由地址成为了对象,并且有两个属性,第一个属性是vue提供的一种刚初始化页面就会监听一次,这样
2020-12-05 20:24:20
1243
原创 递归的应用——斐波那契数列、深拷贝
1.利用递归函数求斐波那契数列(兔子序列) 1、1、2、3、5、8、13、21… function fb(n) { if (n === 1 || n === 2) { return 1; } return fb(n - 1) + fb(n - 2); // return n === 1 || n === 2 ? 1 : fb(n - 1) + fb(n - 2);
2020-12-04 21:17:42
208
原创 js闭包的简单理解
闭包就是能够读取其他函数内部变量的函数。优点: 可以将函数当作值传递到其他地方使用(非函数所在作用域),例如在定时器、事件监听器、Ajax 请求、任何其他异步(或同步)任务中,只要使用了回调函数,实际上就是在使用闭包缺点:闭包会让它所在作用域中的变量始终保存在内存中,而不会被垃圾回收机制回收,对内存消耗较大,频繁大量使用,会导致性能问题解决办法:闭包在不使用时,要及时释放。例如将引用内层函数对象的变量赋值为null...
2020-12-03 19:30:13
133
原创 CSS基础复习总结(三)——flex布局、浮动与定位的区别
**1.flex布局**父盒子(flex 容器):display:flex; // 指定为 flex 布局justify-content : flex-start(默认)、flex-end、center、space-around(先贴边后平分)、space-between(平分剩余空间) //子元素的主轴排列方式space-around; // 设置子元素在主轴上的对齐方式flex-direction:row(默认)|row-reverse|column|column-reverse; //
2020-12-02 21:00:55
1411
原创 Vue全家桶——Vue Router路由简单用法(二)
上篇博文讲了Vue Router的一些简单介绍用法,接下来我们继续深入了解一下。**1.动态匹配路由**我们在调用ajax接口的时候附带值的情况很多,那么路由也可以附带一些值 1.1通过$ route.params.id< router-link to="/user/1">user< /router-link>var User = { template:"< div>
2020-12-01 20:14:17
108
原创 Vue全家桶——Vue Router路由简单用法(一)
Vue可以说是在国内非常流行的几个前端框架之一,如果单单是一个框架的话是坐不到这样的宝座的,它需要的是一个生态,几种功能相辅相成共同努力才有现在的地位。vue的全家桶有Vue+Vue-router+Vuex+axios。今天咱们的主角便是Vue Router。1.什么是路由呢?路由的本质就是一种对应关系,比如说我们在url地址中输入我们要访问的url地址之后,浏览器要去请求这个url地址对应的资源。那么url地址和真实的资源之间就有一种对应的关系,就是路由。2.路由又分为前端路由和后端路由后端路由是由
2020-11-30 19:25:35
118
原创 css基础复习总结(二)——伪类选择器、CSS三大特性
伪类选择器:1.a: link:选择未被访问过的元素。2.a: visited:选择已被访问过的链接。 //注意访问过之后在想复原就得清空浏览器。3.a: hover(重要):当光标经过该元素时候显示的样式。4.a: active:官方解释为活跃标签,个人理解为鼠标按下未弹起时的样式。注意:4个伪类选择器单独使用时是没有任何问题的,但是要组合起来使用的话还是要注意书写顺序的,否则会由于层叠性而出现意料之外的情况。CSS三大特性:1.层叠性: 样式冲突并且优先级相同时选择CSS最后写的哪一个样式
2020-11-29 20:11:56
181
1
原创 vue生命周期总结
Vue 实例从创建到销毁的过程,就是生命周期。1.beforeCreate:存在于实例初始化之后,刚new出来vue实例对象。2.created(重要):实例创建完成之后,在这一步,实例完成数据观测,property和方法的运算,以及watch的回调——此时是获取服务器数据的最佳时期3.beforeMount:视图挂载之前,此时数据和视图还没有进行联系。4.mounted(重要):在视图被挂载之后调用——此时是获取视图或者修改DOM的最佳时期。5.beforeUpdate:数据更新完成之后,此时视
2020-11-28 19:55:57
338
3
原创 promise的异步操作
先看一段代码,思考执行的顺序是什么呢?console.log(1)setTimeout(function() { console.log(2); }, 1000)console.log(3)// 打印的结果依次是1 3 2 1.众所周知,javascript是一个单线程的,代码理应是从上往下,并且从左往右开始执行的,那么为什么会出现上述不符合常理的答
2020-11-26 21:16:56
482
5
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人