vue에서 v-cloak을 사용하여 새로 고침 또는 로딩 시 깜박이는 문제를 해결하는 방법

이번에는 vue에서 v-cloak을 사용하여 새로고침 또는 로딩 시 깜박임 문제를 해결하는 방법을 보여드리겠습니다. 다음은 실제 사례를 살펴보겠습니다.

<p class="#app">
  <p>{{value.name}}</p>
</p>

로드할 때 페이지에

{{value.name}}이 표시되고 몇 초 후에 데이터가 렌더링됩니다. vue에는 이 문제를 해결하기 위한 지침이 있습니다. v-cloak

그런 다음 v-cloak을 실행하세요. 데이터를 렌더링해야 하는 모든 라벨에 이 명령을 추가해야 합니까? 실험 결과 v-cloak은 마운트된 라벨에만 추가하면 되는 것으로 나타났습니다. by el.

<p class="#app" v-cloak>
  <p>{{value.name}}</p>
</p>

또한 페이지가 깜박이는 것을 방지하려면 CSS에

[v-cloak] {
  display: none;
}

를 추가해야 합니다.

그러나 때때로 작동하지 않는 이유는 두 가지입니다:

1. v-cloak의 표시

속성이 상위 레벨로 덮어쓰기되었으므로

[v-cloak] {
  display: none !important;
}

스타일 레벨을 높여야 합니다. 배치 @import가 도입한 CSS 파일에서 이 스타일의 v-cloak은 @import가 도입한 CSS 파일에 배치하면 작동하지 않습니다. 링크로 도입된 CSS 파일이나 인라인 스타일로 배치할 수 있습니다. 추가됨:

Vue에서 v-cloak의 해석을 살펴보겠습니다.

v-cloak의 역할과 사용법

사용법: 이 지시문은 연결된 인스턴스가 나타날 때까지 요소에 남아 있습니다. 컴파일을 종료합니다. [v-cloak] { display: none }과 같은 CSS 규칙과 함께 사용하면 이 지시어는 인스턴스가 준비될 때까지 컴파일되지 않은 Mustache 태그를 숨길 수 있습니다. 공식 API

<p id="app">
  {{msg}}
</p>

HTML은 Vue 인스턴스에 바인딩되어 있습니다. 페이지가 로드되면 깜박이고 "로딩 완료"라는 단어가 표시됩니다. Vue 인스턴스

setTimeout(() => {
  new Vue({
    el: '#app',
    data: {
      msg: 'hello'
    }
  })
},2000)

v-cloak이 이 문제를 해결할 수 있습니다. CSS에

[v-cloak] {
 display: none;
}

를 추가하고 html의 로딩 지점에 v-cloak를 추가하면 이 문제를 해결할 수 있습니다

<p id="app" v-cloak>
  {{msg}}
</p>

Vue1의 v-cloak 차이점 .x 및 Vue2

Vue1에서는 Vue 인스턴스가 본문에 마운트되는 것이 허용되지만 Vue2에서는 허용되지 않습니다. 전체 페이지를 인스턴스화하려면 전체를 수용하기 위해 추가 p를 사용해야 합니다. 페이지 콘텐츠를 인스턴스화하고

이렇게 v-cloak을 사용할 때 이 방법도 필요합니다

내가 사용하는 v-cloak이 작동하지 않는 이유는 무엇인가요?

실제 프로젝트에서는 @import를 통해 CSS 파일을 로드하는 경우가 많습니다

@import "style.css"
@import "index.css"

그리고 @import는 페이지 DOM이 완전히 로드될 때까지 로드되지 않습니다. @import에 [v-cloak]을 쓰면 로드됩니다. CSS 파일을 사용하면 페이지가 계속 깜박입니다.

이러한 상황을 방지하려면 링크로 소개된 CSS에 [v-cloak]을 쓰거나 인라인 CSS 스타일을 작성하면 해결됩니다. 이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

Vue를 사용하여 카운트다운 버튼을 구현하는 방법

Vue를 사용하여 양방향 데이터 바인딩을 작성하는 방법

위 내용은 vue에서 v-cloak을 사용하여 새로 고침 또는 로딩 시 깜박이는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!