クリックイベント
1:Vue.jsではボタンのイベント処理が簡単！
Vue.jsではイベント処理も、テンプレート記法*1とVueインスタンス*2を組み合わせることによって行える。
2:「v-」で始まる属性はディレクティブ
「v-」で始まる属性はVue.jsのディレクティブ(命令)。
「v-on」はイベントを処理するためのディレクティブ。
コロン( ; )で区切って処理をDOMのイベントを記述する。
「:click」を指定するとマウスのクリックを捕まえて処理を行う。
「=」の後にはイベントが発生した場合の処理を記述する。
3-1:処理をメソッドとして用意する
「v-on:click」属性に指定できる文は1つだけではない。
複雑な処理はメソッドとして用意して呼び出すとテンプレートの見通しが良くなる。
3-2: 「methods」オプションを用意
プログラム側では、Vueオブジェクトのコンストラクタに「methods」オプションを用意。
その下の階層にメソッドをオブジェクトリテラル((JaveScriptの表記法としてメソッド名をキー関数をその値に設定する。
1で「methodsオプション」を追加し、2で「changeMsg1( )メソッド」を定義。
「dataオプション」で設定したプロパティには、methodsオプションで設定した関数からは「this.プロパティ名」でアクセスすることができる。
4: v-on:click属性の省略形は「@click」
クリックイベントを捕まえるv-on:click属性はよく使うので「@click」という省略形が用意されている。
