带有普通 JavaScript 的 VueJS

Posted 2023-02-23

【中文标题】带有普通 JavaScript 的 VueJS

【英文标题】：VueJS with normal JavaScript

【发布时间】：2018-08-18 00:24:40

【问题描述】：

我想在我的 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。我希望你能理解我的问题。 谢谢

【参考方案1】：

如果您真的想要一个简单直接的解决方案，您可以简单地将所有这些放在mounted 回调中：即当组件模板已被解析并构建 DOM 时，#countdown 届时应该可以访问. Read more about lifecycle hooks in VueJS.

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

在我们开始之前，请注意，当您在 setInterval 回调中调用 timer() 时会出现错误。应该是：

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>

【讨论】：

非常感谢您的回答。它工作得很好，也启发了我。非常感谢。 =)

【参考方案2】：

最好只用该代码制作一个 CountdownTimer 组件。 也许看看at this post: countdown-timer-using-vuejs