일반 자바스크립트의 VueJS

일반 자바스크립트의 VueJS

내 vue 구성 요소에 카운트다운 타이머를 추가하고 싶다.나는 보통 자바스크립트로 쓰여진 대본을 찾았다.이것은 나의 자바스크립트 파일이다.

var upgradeTime = 7200;
var seconds = upgradeTime;
function timer() {
   var days        = Math.floor(seconds/24/60/60);
   var hoursLeft   = Math.floor((seconds) - (days*86400));
   var hours       = Math.floor(hoursLeft/3600);
   var minutesLeft = Math.floor((hoursLeft) - (hours*3600));
   var minutes     = Math.floor(minutesLeft/60);
   var remainingSeconds = seconds % 60;
   if (remainingSeconds < 10) {
       remainingSeconds = "0" + remainingSeconds;
   }
   document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
   if (seconds == 0) {
       clearInterval(countdownTimer);
       document.getElementById('countdown').innerHTML = "Completed";
   } else {
       seconds--;
   }
}
var countdownTimer = setInterval('timer()', 1000);

나는 이것을 clock.js로 내 vue js 프로젝트 src 폴더에 저장했다.이 clock.js 파일을 vue 구성 요소로 가져와서 출력을 얻는 방법

이 JavaScript 코드에 대해 정상적인 출력 방법이 이와 같은 것이 될 것이다.

<span id="countdown" class="timer"></span>

하지만 vue 구성 요소 내에서 출력을 얻는 방법은?나는 후배 개발자인데, vue 안에서 정상적인 자바스크립트를 어떻게 사용하는지 잘 모르겠어.나는 네가 내 질문을 이해하기를 바란다.감사합니다.

정말 간단하고 솔직한 솔루션을 원한다면, 그 모든 것을 간단히 그 안에 넣을 수 있다.mounted콜백: 컴포넌트 템플릿을 구문 분석하고 DOM을 생성하여#countdown그때쯤이면 접근할 수 있을 겁니다VueJS의 라이프사이클 후크에 대해 자세히 알아보십시오.

참고: 그러나 VueJS를 올바르게 사용하는 방법을 실제로 배우고 싶다면 이 답변의 마지막에 사용자 지정 타이머 구성 요소를 생성하는 방법에 대해 계속 읽어 보십시오:)mounted콜백, 처음이자 다소 단순한 VueJS 구성 요소를 제작하는 재미난 부분을 놓치고 있는 경우.

시작하기 전에 호출할 때 오류가 발생한다는 점에 유의하십시오.timer()당신 안에setInterval콜백다음과 같아야 한다.

var countdownTimer = setInterval(timer, 1000);

여기 개념 증명 예제가 있는데, 타이머 논리를 모두 "터키"하여mounted()콜백:

new Vue({
  el: '#app',
  template: '#custom-component',
  mounted: function() {
    var upgradeTime = 7200;
    var seconds = upgradeTime;

    function timer() {
      var days = Math.floor(seconds / 24 / 60 / 60);
      var hoursLeft = Math.floor((seconds) - (days * 86400));
      var hours = Math.floor(hoursLeft / 3600);
      var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
      var minutes = Math.floor(minutesLeft / 60);
      var remainingSeconds = seconds % 60;
      if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
      }
      document.getElementById('countdown').innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
      if (seconds == 0) {
        clearInterval(countdownTimer);
        document.getElementById('countdown').innerHTML = "Completed";
      } else {
        seconds--;
      }
    }
    var countdownTimer = setInterval(timer, 1000);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app"></div>

<script type="text/x-template" id="custom-component">
  <div>
    <p>I am a custom component.</p>
    <p>
      My timer:<br />
      <span id="countdown" class="timer"></span>
    </p>
  </div>
</script>

---

실제 이상적인 해결책은 실제로 카운트다운 타이머를 위한 사용자 지정 VueJS 구성 요소를 만드는 것이다;) 타이머 자체를 위한 또 다른 사용자 지정 구성 요소를 만드는 것만으로 이 작업을 수행할 수 있다.몇 가지 팁과 요령:

• 사용하다props사용자 지정 기간을 경과할 수 있도록
• 사용하는 것을 잊지 마십시오.data타이머를 감소시키지만 소품을 변이할 수는 없기 때문에, 시간을 복사하는 것
• 사용하다this.$el타이머 컴포넌트를 참조하면, 당신은 심지어 당신의 타이머 컴포넌트를 사용하지 않고도 할 수 있다.id참조 ;)

아래 개념 증명서를 참조하십시오.

Vue.component('my-timer', {
  template: '#my-timer',
  props: {
    upgradeTime: Number
  },
  data: function () {
    return { seconds: this.upgradeTime }
  },
  methods: {
    timer: function() {
      var days = Math.floor(this.seconds / 24 / 60 / 60);
      var hoursLeft = Math.floor((this.seconds) - (days * 86400));
      var hours = Math.floor(hoursLeft / 3600);
      var minutesLeft = Math.floor((hoursLeft) - (hours * 3600));
      var minutes = Math.floor(minutesLeft / 60);
      var remainingSeconds = this.seconds % 60;
      if (remainingSeconds < 10) {
        remainingSeconds = "0" + remainingSeconds;
      }
      this.$el.innerHTML = hours + ":" + minutes + ":" + remainingSeconds;
      if (this.seconds == 0) {
        clearInterval(countdownTimer);
        this.$el.innerHTML = "Completed";
      } else {
        this.seconds--;
      }
    }
  },
  mounted: function() {
    setInterval(this.timer, 1000);
  },
});

new Vue({
  el: '#app',
  template: '#custom-component'
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<div id="app"></div>

<script type="text/x-template" id="custom-component">
  <div>
    <p>I am a custom component.</p>
    <p>
      My timer:<br />
      <my-timer upgrade-time="7200"></my-timer>
    </p>
  </div>
</script>

<script type="text/x-template" id="my-timer">
  <span class="timer"></span>
</script>

그 코드에서 CountdownTimer 구성 요소를 만드는 게 좋을 거야.이 게시물을 한번 보십시오: 카운트다운 타임머신 사용-뷰즈

참조URL: https://stackoverflow.com/questions/49193622/vuejs-with-normal-javascript