vue
文章平均质量分 61
我在小楼听着风
这个作者很懒,什么都没留下…
展开
-
vue中如何使用JS通过a标签下载文件
使用window.open()跳转如何处理类似 localhost:xxxx/baidu.com这种问题使用window.open(‘baidu.com’) 时我们会发现跳转后结果会出现localhost:xxxx/baidu.com,导致下载失败。在url前面+'//' 就可以了,即使用window.open('//' + 'baidu.com')使用js生成a标签 const link = document.createElement('a') link.style.display = .原创 2022-03-25 23:45:47 · 2016 阅读 · 0 评论 -
前端的工程化、模块化和组件化
目录前端的工程化、模块化和组件化一、工程化1、为什么要以工程化的思想来看待前端项目?2、 那我们又该怎样去做到前端的工程化呢?二、模块化1、模块2、为什么要模块化?3、作用三、组件化1、组件2、为什么要组件化?3、作用前端的工程化、模块化和组件化个人理解,不一定对,欢迎指正一、工程化 工程化是一种思想而不是某种特定的技术,当然我们在实现项目工程化的过程中,我们也会去使用一些技术。前端工程化是使用软件工程的技术和方法来对前端的开发流程、技术、工具等进行规范化、标准化,其主要目的为了提高效率和降低成原创 2021-07-28 10:36:42 · 1927 阅读 · 0 评论 -
虚拟DOM与Diff算法
目录虚拟DOM与Diff算法一、什么是DOM与虚拟DOM?二、为什么要使用虚拟DOM1、关于回流与重绘2、为什么使用虚拟DOM三、Diff 算法1、为什么要使用Diff算法2、什么是 DOM-Diff 算法3、diff 算法的子节点更新策略4、更新策略的实际运用5、具体代码实现虚拟DOM与Diff算法一、什么是DOM与虚拟DOM?① DOM(文档对象模型):是针对HTML和XML文档的一个API(应用程序编程接口)。DOM描绘了一个层次化的节点树,允许开发人员添加、移除和修改。真实DOM结构如下:&原创 2021-07-27 11:46:26 · 1173 阅读 · 2 评论 -
vue项目中的vue.config.js配置文件中的proxy代理post请求时报ECONNRESET错误
目录1、问题2、分析3、解决4、结果1、问题错误如下所示:vue.config.js中的代理配置如下:devServer: { proxy: { // change xxx-api/login => mock/login // detail: https://cli.vuejs.org/config/#devserver-proxy '/ecustom': { target: 'http://xxx.xx.x.xxx:xx', //AP原创 2021-07-07 13:53:07 · 2756 阅读 · 5 评论 -
/deep/的使用与导致样式失效问题处理
这里写自定义目录标题1、背景2、深度选择器3、关于/deep/导致浏览器样式失效问题1、背景【1】当 style 标签有 scoped属性时,它的 CSS 只作用于当前组件中的元素,使用 scoped 后,父组件的样式将不会渗透到子组件中。不过一个子组件的根节点会同时受其父组件的 scoped CSS 和子组件的 scoped CSS 的影响。这样设计是为了让父组件可以从布局的角度出发,调整其子组件根元素的样式.。【2】样式失效:最近项目用户在使用过程中发现有些样式失效了,经过排查发现是跟最近谷歌升级原创 2021-03-12 14:04:58 · 3172 阅读 · 2 评论 -
vue中如何实现对dom元素大小改变的监听
目录1、背景2、处理方案1、背景在窗口大小没改变的时候,有些dom元素的大小发生了变化,导致页面某些元素没有重新渲染,出现不适应的情况。如下图所示:2、处理方案(1)方案一、vue项目中,我们可以使用element-resize-detector插件来实现,简单粗暴。实现方案如下:1、安装相关插件,npm install element-resize-detector2、在main.js中引入依赖,并挂在vue原型链上:import ElementResizeDetectorMaker f原创 2021-03-10 15:37:27 · 6145 阅读 · 0 评论 -
window.onresize与window.addEventListener(‘resize‘,...)来做浏览器窗口的缩放监听
目录一、背景二、`window.onresize`为什么在重复使用过程中会被覆盖?三、`window.addEventListener`的运用一、背景在做浏览器窗口监听时我们该选用window.onresize还是window.addEventListener('resize',...)呢?之前遇到过这样一种情况,在一个vue项目的navBar部份使用了window.onresize做了监听控制,当窗口缩放到一定大小以下时菜单只显示图标隐藏文字,后面由于在做表格时也需要去做监听以实现自适应策略,在实现的原创 2021-02-23 11:04:19 · 23650 阅读 · 6 评论 -
vue中如何实现对sessionStorage的监听
1、使用场景(1)在vue项目中,为了在浏览器刷新时,页面数据不丢失,我们会选择将数据浏览器缓存sessionStorage中。(2)为了传递参数之所以写这篇文章,也是在上次处理vue中使用keep- alive缓存机制,切换标签含有iframe标签的界面会被重新刷新的问题过程中,由于切换标签,含iframe的组件不会在触发路由钩子函数和生命周期函数,导致界面数据无法做更新操作,同时还要解决浏览器刷新时,界面数据不丢失的问题,所以才考虑到去监听sessionStorage的值,以此来更新数据。2、原创 2020-12-09 15:35:44 · 4992 阅读 · 0 评论 -
vue中使用keep- alive缓存机制,切换标签含有iframe标签的界面会被重新刷新的问题处理
1、序言最近工作中,项目上遇到一个这样的需求,就是在打开报表的打印预览界面时,去切换标签,切回打印预览界面的时候,要求界面不刷新。vue框架中,我们去处理此类问题,通常马上就会想到去使用vue框架中自带的keep-alive组件,所以一开始我也是去使用了keep-alive,但是发现没有达到预期效果,后面通过研究和查阅资料发现,在vue项目中加入了含有iframe的页面,在路由切换的过程中,使用keep-alive是达不到数据缓存的效果的。2、使用keep-alive缓存不了iframe界面原因(1)原创 2020-12-01 11:51:16 · 9543 阅读 · 19 评论 -
Android webview与H5混合开发 -- H5双击返回键退出应用程序
关于 /** * 首页五个界面URL的末尾字符 */ private List<String> strList = new ArrayList<>(Arrays.asList("/chatlist", "/friends", "/shop", "/cart", "/my"));String js = "appgoback()";webView.evaluateJavascript(js, new ValueCallback<String>() {原创 2020-07-24 10:10:46 · 938 阅读 · 0 评论 -
Android webview 与js(vue)实现交互操作(1)
js 与原生交互分为两种情况:js 调用原生方法,原生调用 js 方法。本文将对这两种情况分别讲解,H5 端用 vue 实现。一、前期准备(Vue项目准备)本文的 H5 端用Vue 实现,所以在正式开始前先把 Vue 项目环境准备好。项目写好后,执行 npm run serve 命令启动项目,启动成功后会在命令行看到两个地址:http://localhost:8080/ ,和 http://10.0.0.188:8080/。10.0.0.188 是我本机的 ip 地址,每个人的不一样。在电脑转载 2020-07-23 20:38:10 · 2101 阅读 · 0 评论