【Vue.js】v-onディレクティブでボタンを押したら数字が増える #Vue.js

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

<div id="app">
  <p>{{ number }}回目のクリックです</p>
  <button @click="countUp">ボタン</button>
</div>


new Vue({
    el: '#app',
  data: {
    number: 0,
  },
  methods: {
    countUp: function() {
      this.number += 1
    },
  }
})

これで

ボタンを押すと、数字が増えていくようなものが出来あがる。

<button @click="countUp">ボタン</button>
この@clickは本当は,v-on:clickと記述するが、このように@で省略する記法もある。