Vue.js에서 데이터를 표시할 때 페이지가 깜박이는 문제를 해결하는 방법

아래에서는 Vue.js를 사용하여 데이터를 표시할 때 페이지에서 원본 코드가 깜박이는 문제를 해결하는 기사를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

오늘부터 Vue.js 사용법을 배우기 시작했는데 학습 과정에서 문제를 발견했습니다. 즉, 페이지에서 데이터를 로드할 때 원본 코드가 깜박이는 것입니다. 모든 당사자의 정보를 확인하고 최종 해결책을 찾으십시오.

첫 번째 단계, CSS 코드 조각 추가

<style type="text/css"> 
  [v-cloak] { 
    display: none; 
  } 
</style>

두 번째 단계, 뷰에서 CSS 모듈 참조

<p id="app" v-cloak> 
  <h1>{{message}}</h1> 
  <h1>{{name}}</h1> 
</p>

일부 기사에서는 특정 데이터에 v-를 추가하라고 나와 있습니다. 부분 cloak이지만 이는 너무 번거롭기 때문에 모든 데이터 표시를 추가해야 하므로 뷰 모듈을 직접 로드하면 문제를 해결할 수 있습니다.

세 번째 단계, js 부분은 변경되지 않았습니다.

<script type="text/javascript">   
  var exeData = { 
    message : "Hello World", 
    name:"我是Vue" 
  }; 
 
  new Vue({ 
    el : "#app", 
    data : exeData 
  }) 
</script>

전체 코드는 아래에 붙여넣었습니다.

 
 
 
 
 
<style type="text/css"> 
  [v-cloak] { 
    display: none; 
  } 
</style> 
 
 
   
  
 
    
{{message}}
 
    
{{name}}
 
  
 
 
 
 

위는 제가 모두를 위해 편집한 내용입니다. 도움이 되기를 바랍니다. 앞으로도 모든 사람에게.

관련 기사:

Webpack에서 파일 변경 사항을 감지하지 못하는 핫 배포 문제 해결

Webpack 개발 서버의 핫 로딩 실패 문제

webpack-dev-server에서 원격 액세스 구현 구성 방법

위 내용은 Vue.js에서 데이터를 표시할 때 페이지가 깜박이는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!