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 相关文章推荐
javascript 字符 Escape,encodeURI,encodeURIComponent
Jul 09 Javascript
用JS控制回车事件的代码
Feb 20 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
5分钟理解JavaScript中this用法分享
Nov 09 Javascript
JS获取select的value和text值的简单实例
Feb 26 Javascript
Node.js模块加载详解
Aug 16 Javascript
js实现每日自动换一张图片的方法
May 04 Javascript
jQuery预加载图片常用方法
Jun 15 Javascript
JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)
Nov 24 Javascript
jquery.cookie实现的客户端购物车操作实例
Dec 24 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
原生JS实现层叠轮播图
May 17 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
用PHP调用数据库的存贮过程!
2006/10/09 PHP
phpMyadmin 用户权限中英对照
2010/04/02 PHP
PHP 利用AJAX获取网页并输出的实现代码(Zjmainstay)
2012/08/31 PHP
PHP错误WARNING: SESSION_START() [FUNCTION.SESSION-START]解决方法
2014/05/04 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
php获取微信基础接口凭证Access_token
2018/08/23 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
Laravel框架中缓存的使用方法分析
2019/09/06 PHP
让焦点自动跳转
2006/07/01 Javascript
JSON扫盲帖 JSON.as类教程
2009/02/16 Javascript
将list转换为json失败的原因
2013/12/17 Javascript
js实现页面跳转重定向的几种方式
2014/05/29 Javascript
js使用Array.prototype.sort()对数组对象排序的方法
2015/01/28 Javascript
javascript+canvas实现刮刮卡抽奖效果
2015/07/29 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
总结AngularJS开发者最常犯的十个错误
2016/08/31 Javascript
微信小程序遇到修改数据后页面不渲染的问题解决
2017/03/09 Javascript
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
angular6开发steps步骤条组件
2019/07/04 Javascript
[52:32]完美世界DOTA2联赛PWL S2 Magma vs LBZS 第三场 11.18
2020/11/18 DOTA
使用Python的Treq on Twisted来进行HTTP压力测试
2015/04/16 Python
python安装mysql-python简明笔记(ubuntu环境)
2016/06/25 Python
Python3连接SQLServer、Oracle、MySql的方法
2018/06/28 Python
python ddt数据驱动最简实例代码
2019/02/22 Python
Python2与Python3的区别详解
2020/02/09 Python
汽车技术服务英文求职信范文
2014/01/02 职场文书
迟到检讨书800字
2014/01/13 职场文书
会计学专业自荐信
2014/06/25 职场文书
高温慰问简报
2015/07/21 职场文书
MySQL非空约束(not null)案例讲解
2021/08/23 MySQL
Mysql数据库中datetime、bigint、timestamp来表示时间选择,谁来存储时间效率最高
2021/08/23 MySQL
用Python可视化新冠疫情数据
2022/01/18 Python
什么是Python装饰器?如何定义和使用?
2022/04/11 Python
SQL Server中使用表变量和临时表
2022/05/20 SQL Server
MySQL池化框架学习接池自定义
2022/07/23 MySQL