v-cloak이 vue에 로드될 때 깜박임을 처리하는 방법

이번에는 vue 로딩 시 v-cloak 깜박임 처리 방법을 알려드리겠습니다. vue 로딩 시 v-cloak 깜박임에 대한 주의사항은 무엇인지 살펴보겠습니다.

vue를 사용하여 데이터를 바인딩하는 경우 페이지를 렌더링할 때 변수가 깜박입니다. 예를 들어

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

는 로드할 때 페이지에

{{value.name}}

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

그럼, v-cloak을 어디에 배치해야 할까요? 실험 결과, 데이터를 렌더링해야 하는 모든 태그에 이 명령을 추가해야 할까요? 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;
}

2. in @import가 도입한 CSS 파일에서는 @import가 도입한 CSS 파일에 배치하면 이 스타일의 v-cloak이 작동하지 않습니다. 링크로 도입한 CSS 파일이나 인라인 스타일로 배치할 수 있습니다.

추가:

Vue

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-cli 프로젝트에서 부트스트랩을 사용하는 방법

Node.Js를 사용하여 비트코인 ​​주소 생성(코드 포함)

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