以下の本を読みながらVue.js2で遊んでいます。


Learning Vue.js 2
Amazonで見る

Let’s manage time!

ポモドーロタイマーをつくろう、という趣旨のセクション。

vueのデータ変数minuteとsecondを定義して使う。

本の通りにやるとBootstrapを読み込んで無いのでCSSが適用されないため、自分でCDN経由で読むようにリンクを追加。（index.htmlの先頭行）

下記のコードだと再生ボタンを押すたびにタイマーが２つ３つと（内部的に）増えていったり、カウントダウン中と停止中のトグルができなかったり等色々と足りないので、本書の次以降で段階的に改善していく。

Toggle the title by using computed properties

まず、Workが終わった後に、h3が”Rest!”に変わるような処理を追加。

算出プロパティを使うと、今回の例の場合this.pomodoroStateの値が変わらない限りはtitleの処理が呼ばれない、ということらしい。

メソッドを使った場合、毎秒this.pomodoroStateの値をチェックするような処理になってしまい、効率的でない。

・・・ということだと理解。

Pomodoro work to rest

index.html

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div id="app" class="container">
  <h2>
    <span>Pomodoro</span>
    <button  @click="start()">
      <i class="glyphicon glyphicon-play"></i>
    </button>
  </h2>
    <h3>{{ title }}</h3>
  <div class="well">
    <div class="pomodoro-timer">
      <span>{{ minute }}</span>:<span>{{ second }}</span>
    </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
<script src="app.js"></script>

app.js

const POMODORO_STATES = {
  WORK: 'work',
  REST: 'rest'
};
const WORKING_TIME_LENGTH_IN_MINUTES = 2;
const RESTING_TIME_LENGTH_IN_MINUTES = 1;

new Vue({
  el: '#app',
  data: {
    minute: WORKING_TIME_LENGTH_IN_MINUTES,
    second: 0,
    pomodoroState: POMODORO_STATES.WORK,
    timestamp: 0
  },
    computed: {
      title: function () {
        return this.pomodoroState === POMODORO_STATES.WORK ? 'Work!' :
            'Rest!';
      }
    },
  methods: {
    start: function () {
      this._tick();
      this.interval = setInterval(this._tick, 1000);
    },
    _tick: function () {
      //if second is not 0, just decrement second
      if (this.second !== 0) {
        this.second--;
        return;
      }
      //if second is 0 and minute is not 0,
      //decrement minute and set second to 59
            if (this.minute !== 0) {
        this.minute--;
        this.second = 59;
        return;
      }
      //if second is 0 and minute is 0,
      //toggle working/resting intervals
      this.pomodoroState = this.pomodoroState === POMODORO_STATES.WORK ? POMODORO_STATES.REST :
            POMODORO_STATES.WORK;
      if (this.pomodoroState === POMODORO_STATES.WORK) {
        this.minute = WORKING_TIME_LENGTH_IN_MINUTES;
      } else {
        this.minute = RESTING_TIME_LENGTH_IN_MINUTES;
      }
    }
  }
});

参照

算出プロパティとウォッチャ – Vue.js