집 > 기사 > 웹 프론트엔드 > vue에서 시계 사용량을 미리 로드하세요.

vue에서 시계 사용량을 미리 로드하세요.

亚连원래의: 2018-06-07 14:02:013212검색

아래에서는 Vue를 사용하여 이미지용 시계를 미리 로드하는 방법에 대한 예를 공유하겠습니다. 이는 좋은 참고 가치가 있으며 모든 사람에게 도움이 되기를 바랍니다.

애플리케이션 시나리오 보기

이미지 프리로딩에 다들 노출되셨을 거라 생각합니다. 이미지 양이 많을 때, 페이지의 모든 이미지가 로드되도록 하기 위해 메인 페이지만 표시합니다. 그런 다음 ajax 요청 또는 논리 연산을 수행합니다.

그런 다음 계산을 사용하여 데이터 조각을 모니터링한 다음 일련의 논리 연산과 ajax 요청을 수행합니다. 그런 다음 계산을 사용하면 구현할 수도 있습니다. , 시계 모니터링만 사용할 수 있습니다

 <template>
 <p v-show=show>
  <img src="https://img.alicdn.com/simba/img/TB14sYVQXXXXXc1XXXXSutbFXXX.jpg" alt="">
  <img src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">
  <img src="https://img.alicdn.com/simba/img/TB1C0dOPXXXXXarapXXSutbFXXX.jpg" alt="">
  <img src="//img.alicdn.com/tfs/TB1iZ6EQXXXXXcsXFXXXXXXXXXX-520-280.jpg_q90_.webp" alt="">
 </p>
</template>
<script>
 export default {
  mounted () {
   var _this = this
   let imgs = document.querySelectorAll(&#39;img&#39;)
   console.log(imgs)
   Array.from(imgs).forEach((item)=>{
    let img = new Image()
    img.onload = ()=>{
     this.count++
    }
    img.src=item.getAttribute(&#39;src&#39;)
   })
  },
  data () {
   return {
    count : 0,
    show : false
   }
  },
  watch : {
   count (val,oldval) {
    if(val == 4){
     this.show = true
     alert("加载完毕")
     //然后可以对后台发送一些ajax操作
    }
   }
  }
 }
</script>

4장의 사진이 모두 로드될 때까지 페이지가 표시되지 않는 것을 확인할 수 있습니다

Wan Fang에 따르면 매우 중요한 문장이 있습니다

계산된 속성이 대부분 상황이 더 적합하지만 때로는 맞춤 감시자가 필요할 때도 있습니다. 이것이 Vue가 watch 옵션을 통해 데이터 변경에 응답하는 보다 일반적인 방법을 제공하는 이유입니다. 이는 데이터 변경에 대한 응답으로 비동기식 또는 비용이 많이 드는 작업을 수행하려는 경우 유용합니다.

이 공식적인 이해를 바탕으로 개인적으로 전반적인 이해를 요약하겠습니다. 계산된 요약을 제공하고 관찰하고, 이 요약을 기억하고, 프로젝트 작업 시 이러한 요약을 생각하고, 적용 방법을 선택하세요.

계산:

여러 데이터 또는 유지 관리할 하나의 데이터를 모니터링하여 상태 값을 반환합니다. 하나 이상의 데이터가 변경되면 전체 함수 본문이 다시 계산되고 상태 값이 다시 반환됩니다.

보기:

이 데이터가 변경되는 한 모니터링 데이터는 하나만 있습니다. 두 개의 매개변수가 반환됩니다. 첫 번째는 현재 값이고 두 번째는 변경 전 값입니다. 변경 사항이 있을 때마다 함수 본문의 논리적 동작이 트리거되어 후속 논리 연산을 수행합니다

위에서 컴파일했습니다. 모두를 위해. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

vue에서 시계 사용량을 미리 로드하세요.

관련 기사