vue에서 새로 고침 및 로딩 시 v-cloak 깜박임을 처리하는 방법

이번에는 Vue에서 새로고침 및 로딩 시 v-cloak이 깜박이는 현상을 처리하는 방법을 보여드리겠습니다. 사례를 살펴보겠습니다. vue를 사용하여 데이터를 바인딩하는 경우 페이지를 렌더링할 때

variables

가 깜박입니다. 예를 들어

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

는 로드할 때 페이지에

{{value.name}}이 표시되고 몇 시간이 지나야 데이터가 렌더링됩니다. 초. vue에는 이 문제를 해결할 수 있는 명령이 있습니다. v-cloak

그렇다면, 데이터를 렌더링해야 하는 모든 태그에 이 명령을 추가해야 할까요? 그 v- Cloak은 모든 태그에 추가할 필요는 없고, 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 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

JS 데코레이터 기능 사용에 대한 자세한 설명

vue.js+element-ui로 트리 구조 구현

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