【Vue】入門編(v-model)

こんにちは。
本日はVue.jsの入門編です。

概要

v-modelとは

フォームを作成するには、v-onとv-bindを使用して作成することができます。
だた、全てに2つを記述するのは面倒ですよね。
そこで、v-modelディレクティブの登場です。
v-modelディレクティブは、上記2つを記載したときと同様の動作をします。

v-modelディレクティブは、双方向データバインディングを実現するので
変数とフォームの値を連動することができます。

サンプルソース

画面に入力フォームを1つ用意しました。

表示ボタンを押下すると、現在の変数の値を表示します。
すると、変数の値がフォームに入力されている値になっていることが確認できます。

変更ボタンを押下すると、変数を更新します。
すると、画面の値も同時に変更されることが確認できます。

<div id="app">
    <p>入力してください。</p>
    <p><input type="text" v-model="message"></p>
    <button v-on:click="alertInfo()">表示</button>
    <button v-on:click="changeInfo()">変更</button>
</div>
<script>

    new Vue({
        el: '#app',
        data: {
            message   : ''
        },

        methods: {
            alertInfo: function() {
                alert(`message: ${this.message}`);
            },

            changeInfo: function() {
                this.message = 'なんだかGoodVibes!';
            }
        }
    });
</script>

以上です。