【Vue.js】vueファイルの書き方

methods

• methodは基本的にviewから呼ばれ、処理を行い、その結果をdataに反映する。
• viewから呼ばれないメソッドをmethodsに定義したくなった場合は、まずcomputedに定義する方法を検討した方が、結果的に理解し易いコードになる可能性が高いような気がする。
• 結果をdataに反映するので、基本的にメソッドの戻り値は void になる。
• methodを controller だと考えると、実装し易いかも。

<template>
  <div>
    <span>{{ num }}</span>
    <button @click="add(1)" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      num: 0,
    };
  },
  methods: {
    add (num) {
      this.num = this.num + num;
    }
  }
};
</script>