소규모 프로젝트에서 Vue의 깜박이는 화면 효과를 방지하는 방법

한 문장 요약

HTML: 요소와 v-cloak

CSS: [v-cloak]{디스플레이: 없음}

프로세스

페이지가 처음 로드될 때 Beard 구문이 표시됩니다.

v-cloak 은 소규모 VueJS 프로젝트에서 사용자 경험을 향상시키는 간단하고 중요한 방법입니다.

용법

HTML에서 플래싱을 구성하는 데 필요한 태그에 v-cloak 추가하세요.

<div id="앱">  
 <nav>블라블라</nav>  
 <main v-cloak>{{text}}</main>  
</div>

CSS에서 v-cloak 스타일을 설정합니다. 이 스타일은 [vue 인스턴스가 컴파일되기 전에]에만 적용됩니다.

[v-망토]{  
 디스플레이: 없음;  
}

원칙

아직 소스 코드를 다 읽지 않았지만 v-cloak 의 원리는 대략적으로 이해하고 있습니다.

첫 번째는 CSS 선택기입니다. [target]을 사용하면 "target 속성이 있는 모든 요소"가 선택됩니다. 여기에서 선택기를 검토할 수 있습니다.

그런 다음 [v-cloak]은 v-cloak 속성이 있는 모든 요소를 ​​선택합니다.

인스턴스 초기화가 완료되면 VueJS는 Vue에 고유한 속성을 제거합니다. 인스턴스 초기화가 완료되기 전에 위에 작성된 기본 HTML 코드는 실제로 다음과 같습니다.

<main id="main" class="row" v-cloak="">

그런 다음 display: block .

사실 그냥 v-cloak이 아닙니다. v-if로 시도해 볼 수도 있습니다. CSS에서 [v-if]{display:none} 사용하면 효과가 동일해 보입니다. v-cloak 과 마찬가지로 v-if도 인스턴스가 컴파일된 후에 제거됩니다.

소스 코드

그런 다음 아마도 이 단락인 소스 코드를 읽었습니다. 관심 있는 사람들은 검색하고 이해하기 위해 읽을 수 있습니다.

if (isRealElement) {  
 // 실제 요소에 마운트  
 // 이것이 서버에서 렌더링된 콘텐츠인지, 그리고 수행할 수 있는지 확인합니다.  
 // 성공적인 수화.  
 if (oldVnode.nodeType === 1 && oldVnode.hasAttribute(SSR_ATTR)) {  
 oldVnode.removeAttribute(SSR_ATTR);  
 수분 공급 = 사실;  
 }  
}

이것으로 소규모 프로젝트에서 Vue의 깜박이는 화면 효과를 방지하는 방법에 대한 기사를 마칩니다. 소규모 프로젝트에서 Vue의 깜박이는 화면에 대한 자세한 내용을 보려면 downcodes.com에서 이전 기사를 검색하거나 다음 관련 기사를 계속 찾아보시기 바랍니다. 앞으로 downcodes.com을 더 많이 지원해 주세요!