Question

我是VueJS的初学者。作为我学习过程的一部分，我正在为我的番茄钟应用程序构建一个旋钮。这是我fiddle。我从codepen中复制了旋钮代码，这是使用jquery实现的。正如你在小提琴中看到的那样，大部分工作都是由jquery完成的。我需要尝试使用Vue.js，使用其方法和状态来执行此操作。如何将此代码重构为更好的Vue.JS代码？任何建议都非常赞赏。

Vue.component('timer', {

  mounted() {
  var knob = $('.knob');
  var angle = 0;
  var minangle = 0;
  var maxangle = 270;
  var xDirection = "";
  var yDirection = "";     
  var oldX = 0;
  var oldY = 0;

  function moveKnob(direction) {      
    if(direction == 'up') {
      if((angle + 2) <= maxangle) {
        angle = angle + 2;
        setAngle();
      }
    }      
    else if(direction == 'down') {
      if((angle - 2) >= minangle) {
        angle = angle - 2;
        setAngle();
      }
    }
  }

  function setAngle() {

  // rotate knob
    knob.css({
      '-moz-transform':'rotate('+angle+'deg)',
      '-webkit-transform':'rotate('+angle+'deg)',
      '-o-transform':'rotate('+angle+'deg)',
      '-ms-transform':'rotate('+angle+'deg)',
      'transform':'rotate('+angle+'deg)'
    });

  // highlight ticks
    var activeTicks = (Math.round(angle / 10) + 1);
    $('.tick').removeClass('activetick');
    $('.tick').slice(0,activeTicks).addClass('activetick');

  // update % value in text
    var pc = Math.round((angle/270)*100);
    $('.current-value').text(pc+'%');


  }

    var RAD2DEG = 180 / Math.PI;
    knob.centerX = knob.offset().left + knob.width()/2;
    knob.centerY =  knob.offset().top + knob.height()/2;           
    var offset, dragging=false;
    knob.mousedown(function(e) {
      dragging = true;
      offset = Math.atan2(knob.centerY - e.pageY, e.pageX - knob.centerX);
    })
    $(document).mouseup(function() {
      dragging = false
    })
    $(document).mousemove(function(e) {
      if (dragging) {
        if (oldX < e.pageX) {
          xDirection = "right";
        } else {
          xDirection = "left";
        }   
        oldX = e.pageX;
        if(xDirection === "left") {
          moveKnob('down');
        } else {
          moveKnob('up');
        }
        return false;
      }
    })
   }
  });

Answer 1

此示例在没有jQuery的情况下运行。

https://jsfiddle.net/guanzo/d6vashmu/6/

在data函数中声明所需的所有变量。
声明methods属性下的所有函数。
声明从computed属性中的其他变量派生的变量，例如knobStyle，activeTicks和currentValue，这些变量均来自{{1} }。每当angle更改时，这3个计算属性将自动更新。

关于Vue的一般用法，您应该专注于操作数据，并让Vue为您更新DOM。

如何为vue.js组件实现方法和状态

1 个答案: