vue 監(jiān)聽窗口變化對(duì)頁(yè)面部分元素重新渲染操作
問(wèn)題
在處理頁(yè)面重新渲染時(shí)通常的做法是：
用vue-router重新路由到當(dāng)前頁(yè)面，頁(yè)面是不進(jìn)行刷新的
采用window.reload()，或者router.go(0)刷新時(shí)，整個(gè)瀏覽器進(jìn)行了重新加載，閃爍，體驗(yàn)不好
使用 v-if 重新渲染部分組件或容器
需要重新渲染的內(nèi)容
<div v-if="render"> ... </div>
vue 監(jiān)聽窗口大小發(fā)生改變
使用 window.addEventListener() 添加 resize 事件監(jiān)聽窗口變化
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
})
}
}
})
補(bǔ)充知識(shí)：vue同一個(gè)路由,但參數(shù)發(fā)生變化，頁(yè)面不刷新的問(wèn)題（vue監(jiān)聽路由參數(shù)變化重新渲染頁(yè)面）
我就廢話不多說(shuō)了，大家還是直接看代碼吧~
watch: {
$route: function(newVal, oldVal) {
console.log(oldVal); //oldVa 上一次url
console.log(newVal); //newVal 這一次的url
if (newVal != oldVal) {
this.loading();//重新調(diào)用加載函數(shù)
}
}
}
以上這篇vue 監(jiān)聽窗口變化對(duì)頁(yè)面部分元素重新渲染操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
案例實(shí)操vue事件修飾符帶你快速了解與應(yīng)用
這篇文章主要介紹了vue常見的事件修飾符,在平時(shí)無(wú)論是面試還是學(xué)習(xí)工作中都會(huì)經(jīng)常遇到的,本文就帶你快速上手,需要的朋友可以參考下2023-03-03
Vue web前端三大主流框架之一,是一套用于構(gòu)建用戶界面的漸進(jìn)式框架,下面這篇文章主要給大家介紹了關(guān)于Vue安裝與配置教程的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
這篇文章主要為大家詳細(xì)介紹了vue右鍵菜單的簡(jiǎn)單封裝，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue中keep-alive多級(jí)路由緩存問(wèn)題
本文主要介紹了vue中keep-alive多級(jí)路由緩存問(wèn)題，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
Vue屏幕自適應(yīng)三種實(shí)現(xiàn)方法詳解
在實(shí)際業(yè)務(wù)中，我們常用圖表來(lái)做數(shù)據(jù)統(tǒng)計(jì)，數(shù)據(jù)展示，數(shù)據(jù)可視化等比較直觀的方式來(lái)達(dá)到一目了然的數(shù)據(jù)查看，但在大屏開發(fā)過(guò)程中，常會(huì)因?yàn)檫m配不同屏幕而感到困擾，下面我們來(lái)解決一下這個(gè)不算難題的難題2022-11-11
Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼
這篇文章主要介紹了Vue.js動(dòng)態(tài)添加、刪除選題的實(shí)例代碼,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下2016-09-09
在 Vue 3 中,.sync 修飾符已經(jīng)被移除,在 Vue 2 中,.sync 修飾符是一個(gè)語(yǔ)法糖,用于簡(jiǎn)化子組件和父組件之間的雙向數(shù)據(jù)綁定,那么本文將給大家介紹一下vue3中不支持.sync語(yǔ)法糖的解決方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
element-ui多選表格禁用某一行不被選擇問(wèn)題
這篇文章主要介紹了element-ui多選表格禁用某一行不被選擇問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue如何通過(guò)id從列表頁(yè)跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁(yè)
這篇文章主要介紹了vue如何通過(guò)id從列表頁(yè)跳轉(zhuǎn)到對(duì)應(yīng)的詳情頁(yè) ,需要的朋友可以參考下2018-05-05
Vue項(xiàng)目打包(build)時(shí),自動(dòng)打以時(shí)間命名的壓縮包方式
這篇文章主要介紹了Vue項(xiàng)目打包(build)時(shí),自動(dòng)打以時(shí)間命名的壓縮包方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10