vue 감청 창 변경 페이지 부분 요소 렌더링 작업

1352 단어 vue감청윈도우원소렌더링
문제
일반적으로 페이지를 다시 렌더링하는 방법은 다음과 같습니다.
vue-router로 현재 페이지로 다시 라우팅합니다. 페이지는 새로 고침되지 않습니다.
윈도우를 사용합니다.reload (), 또는router.go(0) 새로 고침 시 전체 브라우저를 다시 불러오고 깜빡이며 체험이 좋지 않습니다
v-if를 사용하여 일부 구성 요소 또는 컨테이너 렌더링
새로 렌더링해야 할 내용

<div v-if="render">
 ...
</div>
vue 감청 창 크기 변경
윈도우를 사용합니다.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 감청 창 변화가 페이지 부분 요소에 대한 렌더링 작업은 바로 편집자가 여러분에게 공유한 모든 내용입니다. 여러분께 참고가 되고 저희를 많이 사랑해 주시기 바랍니다.
mysql 저장 자바 대상 실례 상세 설명
Spring 오류: 요소 "context:component-scan"의 접두사 "context"가 연결되지 않은 문제 해결

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage