Vueコード

雛形コードを元に Vue.js を用いて実装していきましょう。

1. マスタッシュ構文で変数を表示しよう

#1-1. カウンターの変数を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    count: 0, // 追加
  },
});

#1-2. HTML で変数を表示する。

index.html

<div class="counter">
  <!-- マスタッシュ構文で表示 -->
  <div class="counter__display">{{ count }}</div>
  <div class="counter__buttons">
    <button>-1</button>
    <button>+1</button>
  </div>
  <button class="counter__reset">リセット</button>
</div>

2. v-on:click でカウントアップを実装しよう。

#2-1. 関数を用意する。

関数は methods オプションの中に記載します。 data オプション内のデータは this.データ名で参照して変更する事ができます。

app.js

new Vue({
  el: '#app',
  data: {
    count: 0,
  },
  methods: {
    increment() {
      this.count++; // 追加
    },
  },
});

#2-2. ボタンに v-on:click を記載する。

index.html

<div class="counter">
  <div class="counter__display">{{ count }}</div>
  <div class="counter__buttons">
    <button>-1</button>
    <!-- v-onディレクティブを記載する -->
    <button @cilck="increment">+1</button>
  </div>
  <button class="counter__reset">リセット</button>
</div>

3. v-on:click でカウントダウンを実装しよう。

#3-1. 関数を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    count: 0,
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--; // 追加
    },
  },
});

#3-2. ボタンに v-on:click を記載する。

index.html

<div class="counter">
  <div class="counter__display">{{ count }}</div>
  <div class="counter__buttons">
    <!-- v-onディレクティブを記載する -->
    <button @click="decrement">-1</button>
    <button @cilck="increment">+1</button>
  </div>
  <button class="counter__reset">リセット</button>
</div>

4. v-on:click でリセットを実装しよう。

#4-1. 関数を用意する。

app.js

new Vue({
  el: '#app',
  data: {
    count: 0,
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
    },
    reset() {
      this.count = 0; // 追加
    },
  },
});

#4-2. ボタンに v-on:click を記載する。

<div class="counter">
  <div class="counter__display">{{ count }}</div>
  <div class="counter__buttons">
    <button @click="decrement">-1</button>
    <button @cilck="increment">+1</button>
  </div>
  <!-- v-onディレクティブを記載する -->
  <button class="counter__reset" @click="reset">リセット</button>
</div>