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 相关文章推荐
最常用的12种设计模式小结
Aug 09 Javascript
前台js调用后台方法示例
Dec 02 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
JavaScript使用cookie实现记住账号密码功能
Apr 27 Javascript
用window.onerror捕获并上报Js错误的方法
Jan 27 Javascript
BootStrap使用popover插件实现鼠标经过显示并保持显示框
Jun 23 Javascript
AngularJS实现数据列表的增加、删除和上移下移等功能实例
Sep 05 Javascript
Node.js读写文件之批量替换图片的实现方法
Sep 07 Javascript
js实现文字跑马灯效果
Feb 23 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
Angularjs实现页面模板清除的方法
Jul 20 Javascript
JavaScript常用进制转换及位运算实例解析
Oct 14 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
B2K与车机的中波PK
2021/03/02 无线电
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
php正则匹配html中带class的div并选取其中内容的方法
2015/01/13 PHP
Smarty最简单实现列表奇偶变色的方法
2015/07/01 PHP
php注册登录系统简化版
2020/12/28 PHP
在Thinkphp中使用ajax实现无刷新分页的方法
2016/10/25 PHP
Laravel的Auth验证Token验证使用自定义Redis的例子
2019/09/30 PHP
PhpStorm连接服务器并实现自动上传功能
2020/12/09 PHP
新浪的图片新闻效果
2007/01/13 Javascript
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
跟我一起学写jQuery插件开发方法(附完整实例及下载)
2010/04/01 Javascript
JS中动态添加事件(绑定事件)的代码
2011/01/09 Javascript
新鲜出炉的js tips提示效果
2011/04/03 Javascript
做web开发 先学JavaScript
2014/12/12 Javascript
JS版元素周期表实现方法
2015/08/05 Javascript
jQuery居中元素scrollleft计算方法示例
2017/01/16 Javascript
HTML5开发Kinect体感游戏的实例应用
2017/09/18 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
es6新特性之 class 基本用法解析
2018/05/05 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
深入理解Python中字典的键的使用
2015/08/19 Python
用Python解决计数原理问题的方法
2016/08/04 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
详解Python3 基本数据类型
2019/04/19 Python
Django实现文件上传下载功能
2019/10/06 Python
Python中six模块基础用法
2019/12/08 Python
Python私有属性私有方法应用实例解析
2020/09/15 Python
英国银首饰公司:e&e Jewellery
2021/02/11 全球购物
应届生法律顾问求职信
2013/11/19 职场文书
八年级音乐教学反思
2014/01/09 职场文书
大学生党员承诺书
2014/05/20 职场文书
学前班幼儿评语大全
2014/12/29 职场文书
2015年教师节演讲稿范文
2015/03/19 职场文书
Java面试题冲刺第十五天--设计模式
2021/08/07 面试题
Spring事务管理下synchronized锁失效问题的解决方法
2022/03/31 Java/Android