Vue クラスには用途に応じていくつかの種類の関数が登録できたが、 こいつはその汎用版で、ここで指定したものが Vue オブジェクトのメソッドとして登録される。

なので Vue オブジェクトを掴んでおけばここのメソッドは呼び放題だし、 他の関数の中でも当然 this 経由で呼び出すことができるのだ。

new Vue({
   methods: {
       hoge: function(){
           // 処理
       }
   }
});

汎用版だから、結局こいつになんでも書けばいいというわけでなく、 用途が決まっているものはそれに応じた実装にしたほうがよい。 設計の指針に従うことは重要である。

テンプレート

<div>{{ hoge() }}</div>

これで指定メソッドの return 値をテンプレートに埋め込むことができた

v-on 属性から呼び出す場合は呼び出し括弧無しで名前だけ指定で呼び出せる。 その際に暗黙的に $event が渡されるので、受ける方はそのように実装しておくとよい

名前だけ指定する

<input type="text" v-on:input="hoge" />

受ける側はイベントをうけるように書けばいい

hoge: function(e){
    // 処理
}

暗黙は嫌だという場合は全部自前で書くこともできる。

<input type="text" v-on:input="hoge($event, 123, 'hogehoge')" />

全部自前で呼び出した場合は暗黙でイベントが渡されなくなるので使いたいなら明示的に渡すようにする。

methods: {
    hoge: function(){
        // hoge
    },
    piyo: function(){
        this.hoge();
    },
},

テンプレートからパラメータを渡してメソッドを呼び出すことが多いとは思うが、 このパラメータは元を正せばデータである。

というように、テンプレートから渡されたデータをメソッド側で加工するとそれが 元々であるデータにも反映される。 当然それはテンプレートにバインディングされているので、当然変更があれば再描画される。

これ非常にうまいやり方なのだが Vue はこのような思想では作られておらず、 Vuex の思想とも違うし、対象が算出プロパティの場合は使えないのでこれを積極的に使って何か作るというのはやめたほうがよさそうだ。