vue 监听窗口变化对页面部分元素重新渲染操作


Posted in Javascript onJuly 28, 2020

问题

在处理页面重新渲染时通常的做法是:

用vue-router重新路由到当前页面,页面是不进行刷新的

采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好

使用 v-if 重新渲染部分组件或容器

需要重新渲染的内容

<div v-if="render">
 ...
</div>

vue 监听窗口大小发生改变

使用 window.addEventListener() 添加 resize 事件监听窗口变化

new Vue({
 el: '#app',
 data() {
  return { render: true }
 },
 mounted() {
  window.addEventListener('resize', this.reload)
 },
 beforeDestroy() {
  window.removeEventListener('resize', this.reload)
 },
 methods: {
  reload() {
   // 重新渲染
   this.render = false
   this.$nextTick(() => {
    this.render = true
   })
  }
 }
})

补充知识:vue同一个路由,但参数发生变化,页面不刷新的问题(vue监听路由参数变化重新渲染页面)

我就废话不多说了,大家还是直接看代码吧~

watch: {
 $route: function(newVal, oldVal) {
  console.log(oldVal); //oldVa 上一次url
  console.log(newVal); //newVal 这一次的url
  if (newVal != oldVal) {
   this.loading();//重新调用加载函数
  }
 }
}

以上这篇vue 监听窗口变化对页面部分元素重新渲染操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用腾讯的ip地址库做ip物理地址定位
Jul 24 Javascript
JavaScript获取指定元素位置的方法
Apr 08 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
纯javascript移动优先的幻灯片效果
Nov 02 Javascript
详解javascript高级定时器
Dec 31 Javascript
JavaScript实现数据类型的相互转换
Mar 06 Javascript
谈谈JS中常遇到的浏览器兼容问题和解决方法
Dec 17 Javascript
关于JavaScript中的this指向问题总结篇
Jul 23 Javascript
js+canvas实现刮刮奖功能
Sep 13 Javascript
详解前端任务构建利器Gulp.js使用指南
Apr 30 Javascript
JavaScript文档加载模式以及元素获取
Jul 28 #Javascript
javascript实现贪吃蛇小游戏
Jul 28 #Javascript
Element DateTimePicker日期时间选择器的使用示例
Jul 27 #Javascript
Js图片点击切换轮播实现代码
Jul 27 #Javascript
在vue中实现echarts随窗体变化
Jul 27 #Javascript
Vue组件跨层级获取组件操作
Jul 27 #Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 #Javascript
You might like
Yii操作数据库的3种方法
2014/03/11 PHP
学习php设计模式 php实现状态模式
2015/12/07 PHP
Yii框架实现多数据库配置和操作的方法
2017/05/25 PHP
jquery $.ajax入门应用一
2008/11/19 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
javascript实现base64 md5 sha1 密码加密
2015/09/09 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
javascript实现去除HTML标签的方法
2016/12/26 Javascript
js判断手机系统是android还是ios
2017/03/07 Javascript
关于vue.js发布后路径引用的问题解决
2017/08/15 Javascript
JS解决position:sticky的兼容性问题的方法
2017/10/17 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
2018/07/25 Javascript
AngularJS使用$http配置对象方式与服务端交互方法
2018/08/13 Javascript
layer弹出层全屏及关闭方法
2018/08/17 Javascript
layui 给数据表格加序号的方法
2018/08/20 Javascript
详解mpvue scroll-view自动回弹bug解决方案
2018/10/01 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python学习笔记整理3之输入输出、python eval函数
2015/12/14 Python
全面了解Python的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
Python cookbook(数据结构与算法)找到最大或最小的N个元素实现方法示例
2018/02/13 Python
pandas 使用apply同时处理两列数据的方法
2018/04/20 Python
用TensorFlow实现多类支持向量机的示例代码
2018/04/28 Python
Python使用gRPC传输协议教程
2018/10/16 Python
Python实现的远程文件自动打包并下载功能示例
2019/07/12 Python
python3.6、opencv安装环境搭建过程(图文教程)
2019/11/05 Python
pandas实现DataFrame显示最大行列,不省略显示实例
2019/12/26 Python
Python如何在DataFrame增加数值
2020/02/14 Python
护士的自我鉴定
2014/02/07 职场文书
会计个人实习计划书
2014/08/15 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
CSS 实现Chrome标签栏的技巧
2021/08/04 HTML / CSS
Mysql binlog日志文件过大的解决
2021/10/05 MySQL
CentOS7安装MySQL8的超级详细教程(无坑!)
2022/06/10 Servers