Vue でカウンタコンポーネントを作る

カウンタコンポーネントを作成していきます。
ファイルは、src/components/Counter.vueとします。

コンポーネントで使うデータを宣言

Vueのコンポーネント内で使うデータは、export default内で、data()メソッドの返り値とする必要があります。

ここでは、カウンタ用のcountを宣言します。

  data() {
    return {
      count: 0
    };
  },

これで、テンプレートの中で、countを利用できるようになりました。
テンプレートで、countの値を表示するようにします。

<template>
  <h1> Counter </h1>
  <div>   
   {{ count }}
  </div>
</template>

コンポーネントで使うメソッドを宣言

続いて、コンポーネント内で利用するメソッドを宣言していきます。
コンポーネント内で使うメソッドは、export default内に、methods{}を書いてその中に記述していきます。

ここでは、カウンタを増減させるための、increment()とdecrement()を宣言します。

  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
      if (this.count < 0) this.count = 0
    }
  }

これで、テンプレート内で、increment()とdecrement()が利用できるようになりました。
テンプレートに、増減用のボタンを追加します。

<template>
  <h1> Counter </h1>
  <div>
    <button @click="decrement"> - </button>
    {{ count }}
    <button @click="increment"> + </button>
  </div>
</template>

カウンタ完成

モジュールのコード全体です。

<template>
  <h1> Counter </h1>
  <div>
    <button @click="decrement"> - </button>
    {{ count }}
    <button @click="increment"> + </button>
  </div>
</template>

<script>
export default {
  name: "Counter",
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    },
    decrement() {
      this.count--;
      if (this.count < 0) this.count = 0
    }
  }
};
</script>