【Vue】入門編(v-on)

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

概要

v-onとは？

v-onディレクティブを使用すると
イベント発生時に属性値に指定した式を実行することができます。

他にも、$event変数を使用することで
メソッドに直接DOMを渡すことができます。

サンプルソース

v-onを使用して、clickイベント、inputイベントの検知を行います。
clickイベント検知では数値の加算減算を行います。

inputイベント検知では$event変数を使用して
画面の更新を行います。

<div id="app">
    <!-- ボタン押下でcountの加算減算を行う -->
    <div>
        <p>Count : {{ count }}</p>
        <button v-on:click="count += 1">+1 ボタン</button>
        <button v-on:click="count -= 1">-1 ボタン</button>
    </div>
    <!-- テキスト入力でnameへ反映し、画面への反映も行う-->
    <div>
        <p>Name : {{ name }}</p>
        <input type="text" v-on:input="name = $event.target.value" v-bind:value="name">
    </div>
</div>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            count  :0,
            name   : ''
        }
    });
</script>

以上です。