v-onディレクティブ（２） #Vue.js

Viewインスタンス

全てのVueアプリケーションは、Vue 関数で新しい Vue インスタンスを作成することによって起動されます。
Vueインスタンスは、データ監視、イベント通信や DOM 操作をするいくつかのインスタンスメソッドを持っています。

var vm = new Vue({
  // オプション
})

関数とは

同じ処理を定義し何度も使い回しができる形にしたもの。

<script>
  function 関数名(){
  処理
  }
</script>

無名関数とは

関数名なしで関数を定義できるもの。

<script>
  function(){
  処理
  }
</script>

v-on:clickをvueインスタンス内で定義してみます

<body>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  <div id="app">
      <p>現在{{ number }}回クリックされています</p>
      <button v-on:click="countUp">カウントアップ</button>
</div>
<script>
  new Vue({
    el: '#app',
      data: { 
          number: 0
        },
      methods: {
        countUp: function(){
          this.number += 1
        }
      }
  })
</script>
</body>

【参考】関数呼び出しパターンのthis

呼び出し元

number: 0

*data: { }内

呼び出し先

this.number += 1

*methods{無名関数function( ){ }内}

@hiroshimaeasyryo様
https://qiita.com/hiroshimaeasyryo/items/a270b00c420ed96f02f0

@Sthudent_Camilo
https://qiita.com/Sthudent_Camilo/items/29467821eac0a11cfb80

@takkyun
https://qiita.com/takkyun/items/c6e2f2cf25327299cf03

JavaScript Primer
https://jsprimer.net/basic/function-this/