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 相关文章推荐
jqgrid 简单学习笔记
May 03 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
May 30 Javascript
JavaScript返回当前会话cookie全部键值对照的方法
Apr 03 Javascript
jQuery获取URL请求参数的方法
Jul 18 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
Sep 06 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
Web制作验证码功能实例代码
Jun 19 Javascript
vue用addRoutes实现动态路由的示例
Sep 15 Javascript
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
JS数组方法slice()用法实例分析
Jan 18 Javascript
关于Js中new操作符的作用详解
Feb 21 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 XML备份Mysql数据库
2009/05/27 PHP
PHP多线程类及用法实例
2014/12/03 PHP
[原创]CI(CodeIgniter)简单统计访问人数实现方法
2016/01/19 PHP
php ucwords() 函数将字符串中每个单词的首字符转换为大写(实现代码)
2016/05/12 PHP
window.name代替cookie的实现代码
2010/11/28 Javascript
jQuery判断checkbox(复选框)是否被选中以及全选、反选实现代码
2014/02/21 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
原生JS和jQuery操作DOM对比总结
2017/01/19 Javascript
Node.js实现连接mysql数据库功能示例
2017/09/15 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
vue element项目引入icon图标的方法
2018/06/06 Javascript
elementUI table表格动态合并的示例代码
2019/05/15 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
vue实现分页的三种效果
2020/06/23 Javascript
[49:59]KG vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python多线程同步Lock、RLock、Semaphore、Event实例
2014/11/21 Python
用Python进行简单图像识别(验证码)
2018/01/19 Python
利用python为运维人员写一个监控脚本
2018/03/25 Python
Python3 关于pycharm自动导入包快捷设置的方法
2019/01/16 Python
Python 多线程搜索txt文件的内容,并写入搜到的内容(Lock)方法
2019/08/23 Python
python接口调用已训练好的caffe模型测试分类方法
2019/08/26 Python
如何基于Python批量下载音乐
2019/11/11 Python
在python shell中运行python文件的实现
2019/12/21 Python
使用Python打造一款间谍程序的流程分析
2020/02/21 Python
Spark处理数据排序问题如何避免OOM
2020/05/21 Python
Python基于traceback模块获取异常信息
2020/07/23 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
Weblogic的布署方式
2013/08/23 面试题
描述内存分配方式以及它们的区别
2016/10/15 面试题
上课看小说检讨书
2014/02/22 职场文书
保护母亲河倡议书
2014/04/14 职场文书
大学竞选班干部演讲稿
2014/08/21 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
Python可视化动图组件ipyvizzu绘制惊艳的可视化动图
2022/04/21 Python
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS