今回はVue.jsのメソッドについて説明します。
メソッドとはいわゆる関数のことです。
オブジェクト思考プログラミングでは、クラス(オブジェクト)内に使用される関数のことをC++のような古くからある言語は「メンバ関数」と読んでいますが、Javaが登場した1990年代後半頃以降で登場した言語では「メソッド」と呼ぶのが通例です(メンバ関数と呼ぶのはC++くらいかと)。
メソッドを使うメリット
Vue.jsを勉強しようとしている皆さんなら、プログラミングがある程度できるので、説明する必要は無いかもしれませんが、
メソッドを使う理由は、
- 処理の共通化（同じ処理を複数の箇所に記述しない）
- プログラムの可読性の向上
- 動作確認済みであるメソッドを再利用することでバグの発生率を低減させる（品質向上させる）
などです。
メソッドの基本構文
まず、メソッドの基本構文は次の通りです(ハイライトの部分)。
new Vue({
el: '#app',
methods: {
myMethod: function() {
}
}
})
なお、これだけでは、もちろん動作しません。テンプレートや、メソッドを呼び出す処理が必要になります。
Vue.jsのメソッドを使ったサンプルコード
＜サンプルコード＞
<script src="text/x-template" id="my-template">
<p>{{ number1 }} + {{ number2 }} = {{ answer }}</p>
</script>
<div id="app"></div>
<script src="https://unpkg.com/vue@2.5.17"></script>
<script>
new Vue({
el: '#app',
template: '#my-template',
data: {
number1 : 2,
number2 : 3,
answer : 0
},
//mountedは仮想DOMが生成され、elにマウントされた直後に実行される
mounted: function() {
this.addNumber(this.number1, this.number2)
},
methods: {
addNumber: function(a, b) {
this.answer = a + b
}
}
})
</script>
＜実行結果(ブラウザ表示結果)＞
2 + 3 = 5
処理の流れは次の通りです。
(1)「template: '#my-template'」で指定されたid属性を持つ、<script src="text/x-template"id="my-template"> 〜 </script>の内容がテンプレートとして解析され、仮想DOMが生成される。
(2)「el: '#app'」で設定したid属性を持つ<div id="#app"></div>に組み込まれる(マウントされる)。
(3)マウントされた直後に、mountedの内容が発動する。
(4)mounted内のthis.addNumber(this.number1, this.number2)により、addNumberメソッドが呼び出される。
(5)addNumberメソッドでは、たし算を行い、その答えがthis.answerつまり、dataのanswerに設定される。と、同時に仮想DOM内の{{ answer }}にも設定される。
以上、メソッドの説明でした。
