
vue
alt琳
code
展开
-
前端实现路由
前端实现路由目的:后端实现的路由本质是通过服务器代理与路径的配合去访问服务器上的静态资源。而我们现在的项目都是单页面,路由控制权都是放在前端了。前端框架现在都是单页面模式,了解他们实现的本质变得重中之重。简单分析:前端实现路由有两种方式 hash 与 historyhash路由:hash原本是作为页面定位使用,本身会在URL后携带#,切换路由只改变#后面的值,他不会改变浏览器访问服务器资源的地址(#前的才会被用在请求中),所以改变hash值就像我们改变url参数一样不会导致页面的重载原创 2020-05-29 16:37:03 · 485 阅读 · 0 评论 -
scss中配置式编程(解决大量相似样式与class)
scss中对象式编程(骚操作)好久没有写博客了,最近一直比较忙。今天在做大屏可视化项目的时候,需要写一个动画,供6个表格使用,但是每个表格相差的只有参数不同:具体效果如下:这是左侧的三个面板从左侧弹出 ,右边也有这样的三个正常来说 在vue中我需要写好多的class 从wrap1 - wrap6 <transition appear name="wrap1"> ......原创 2020-03-26 21:12:49 · 1493 阅读 · 0 评论 -
vue、react js变量改变class中的属性
以前写tab切换组件的时候,发现需要根据js的值,生成不同的class样式,开始想到的是map创建很多的class类,用js变量生成不同class名,傻方法如下:今天发现这方法不靠谱,不能一劳永逸,所以换了个方法:在style中根据js的值动态设置css中的变量在class中调用这个css变量就可以动态生成不同属性的class...原创 2019-10-14 10:34:25 · 2778 阅读 · 0 评论 -
vue中实现缓存页面,ajax更新部分内容
举个例子项目中,这9张图与抽奖次数全是后台ajax请求来的,但是每次进页面的时候我就只要检测抽奖次数是否改变就够了。首先要用keep-alive缓存当前页面然后在页面中写activated函数与created中的方法一致,获取抽奖次数的接口加个参数。最后在ajax请求中,判断如果是此参数的,就只更新次数,防止图片一直刷新 getshuju:function(type){ ...原创 2019-01-02 21:02:23 · 1211 阅读 · 0 评论 -
vue页面切换中断ajax请求
项目中遇到个问题,客户端要等服务端操作3到4秒后才能返回结果,这时候用户退出页面ajax请求还在进行,会影响性能。axios中提供了两种方式解决中断ajax问题,这里我就说我用的这种。在main.js中加入以下代码;Vue.prototype.$http= axios;const CancelToken = axios.CancelToken;let cancel;Vue.proto...原创 2019-01-23 19:14:45 · 2851 阅读 · 3 评论 -
vue中判断div滚动条是否置底
业务中遇到这个问题,百度搜索了一下,没有好的方案就自己写了一个。在mounted中监听对应的div滚动事件document.querySelector('.content-box').addEventListener("scroll", this.scrollToTop);在方法中执行scrollToTop(){ let el=document.querySelector('.co...原创 2019-04-18 12:08:48 · 2242 阅读 · 1 评论