带有普通JavaScript的VueJS

Question

我想在vue组件中添加倒数计时器。我找到了用普通JavaScript编写的脚本。这是我的JavaScript文件。

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中使用普通JavaScript。我希望你能理解我的问题。谢谢

Answer 1

如果您真的想要一个简单明了的解决方案，则可以将所有内容都放在mounted回调中：也就是说，当组件模板已经解析并构建了DOM时，#countdown届时应该可以访问它了。在VueJS中阅读有关生命周期挂钩的更多信息。

注意：但是，如果您想真正地学习如何正确使用VueJS，请在此答案的结尾继续阅读如何创建自定义计时器组件:)，方法是将所有内容填充到mounted回调中，从而错过了有趣的部分编写您的第一个也是相当简单的VueJS组件。

在开始之前，请注意，timer()在setInterval回调中调用时会出错。它应该是：

var countdownTimer = setInterval(timer, 1000);

这是一个概念验证的示例，其中您将所有计时器逻辑“火鸡”塞入mounted()回调中：

var countdownTimer = setInterval(timer, 1000);

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);
  }
})

真正理想的解决方案是为倒数计时器创建一个自定义的VueJS组件；）您可以通过为计时器本身简单地创建另一个自定义组件来实现。一些提示和技巧：

• 使用props这样您就可以在自定义时间段通过
• 记住要使用data该时间段的副本，因为您要减少计时器的数量，但是不能突变道具
• 使用this.$el来引用您的计时器组件，那么您甚至可以在没有id引用的情况下进行操作；）

请参阅下面的概念验证：

<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>

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'
});