Vue.jsでinputとpテキストのバインディング

Vue.jsの勉強を始めたので、その基礎的な部分をメモ。このnoteではinputに入力されたテキストとpタグのテキストをバインディングし、inputに入力された段階でpタグテキストを動的に書き換えるものについて。

Vue.jsの読み込み

Vue.jsはjQueryと同じように、CDN(Content Delivery Network)で読み込むかライブラリをダウンロードしておく必要がある。特別な理由のない場合はCDNで読み込みをするのが一般的らしい。でもCDNで読み込むのはネットワーク経由で行うため、おそらくダウンロードをしたものを読み込む方が、速度的には早い。実験してないけども。

CDNで読み込む場合は、以下のスクリプトタグをHTMLに追加する必要がある。

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

Vue.jsでinputとpタグのバインディング

例えばinputのテキストとpタグの文字列を連動させたいとする。Vue.jsを使えば、たった数行でこれが実現する。

<div id="input_email_address">
    <input type="text" v-model="email_address">
    <p> {{ email_address }} </p>
</div>

<script type="text/javascript">
    var email_address = new Vue({
        el: '#input_email_address',
        data: {
            email_address: 'email_address'
        }
    });
</script>

jQueryだと、セレクタのkeyupなどで関数を発火させ、inputの内容を取得し、pタグ内容を書き換えて...みたいないろんなことをまとめなければいけないんだけど、Vue.jsだとここら辺がスマートにできるとのこと。

jsFiddleに上のプログラムを残しておく。

https://jsfiddle.net/keisuke_kurita/acqfg5xn/11/

自分の中ではまだ発想上のものなんだけども、Vue.jsは例えば同一データを違うグラフで表示したい場合とかに力を発揮するんじゃないかなと。まだデータバインディングしか勉強してないけど、それだけでも役に立ちそう。