【Vue.js】v-modelデータバインディング事始め（リンダリンダの歌詞を変えてオリジナルラブソングを作る）

Vue.jsの続きです。前回はv-vindでボタンでリアルタイムにclass名の追加、削除をした。今回はv-modelでリアルタイムに「データバインディング」体験してみる。データバインディングとは何ぞや？フォームに入力した情報をリアルタイムで画面に反映できる。どんなことが作れるか？「リンダリンダ」の歌詞を変えて愛する人へのオリジナルラブソングを作る！

　【目次】

※前回：【Vue.js】v-bindでclass名を動的に追加、削除する！（北斗の拳の名言編） - クモのようにコツコツと

データバインディングとは

データをバインドすること。

バインドって何？

あっちとこっちを紐付ける、関連付ける、割り当てること
何かと何かを関連付けるのが「バインド（bind）」です。
「ＡをＢにバインドする」と言った場合は「ＡをＢに割り当てるよ」を意図します。

※参考：バインド (bind)

では、データバインディングとは？

バインディングには「結合」という意味があり、データ・バインディングとは、MVVMパターンでいうViewとViewModelを結び付けるために提供されている仕組みのことです。
データ・バインディングの特徴は、一度だけ値を代入して終わりというわけではなく、値が変化するたびに結び付いている先の値もその都度即座に変化することです。

※参考：データ・バインディングを理解する - marikoootaの日記

ふむふむ。

Vue.jsのデータバインディング（v-model）

Vue.jsのデータバイディングはv-modelに相当し、主にフォームに入力した内容がリアルタイムに画面に反映されることを指す。

form の input 要素 や textarea 要素、 select 要素に双方向 (two-way) データバインディングを作成するには、v-model ディレクティブを使用することができます。それは、自動的に入力要素のタイプに基づいて要素を更新するための正しい方法を選択します。ちょっと魔法のようですが、v-model はユーザーの入力イベントにおいてデータを更新するための基本的な糖衣構文 (syntax sugar) で、それに加えて、いくつかのエッジケースに対しては特別な配慮をしてくれます。

※参考：フォーム入力バインディング — Vue.js

基本形はこんな感じです。

See the Pen v-model 00 by イイダリョウ (@i_ryo) on CodePen.

HTMLコード

<div id="Onamae">
<p>名前を入れてください。</p>
    <input v-model="Name" placeholder="名前"> <hr>
<p>
  こんにちは！「{{Name}}」さん</p>
</div>

• #Onamaeの中にinputタグとpタグ
• inputタグの中にv-model属性、値はname
• pタグの中にマスタッシュタグでname

new Vue({
  el: '#Onamae',
  data: {
    Name: '名無し'
  }
});

• Vueインスタンス作成
• #Onamaeに適用
• Nameに文字列名無しを入れる

inputタグに文字を打つとリアルタイムに「こんにちは○○さん！」のところが変わる！

のはいいけど、使い道がいまいちわからない。フォームのバリデーションとかの用途かなー？あとは確認画面とか。

「リンダリンダ」の歌詞に好きな人の名前を入れる！

リアルタイムの反映が一箇所だとありがたみが少ないので、歌詞の中の固有名詞をリアルタイムで全部変えられるようにした。

See the Pen v-model 01 by イイダリョウ (@i_ryo) on CodePen.

コードはこちら。基本的には先ほどのコードをHTML上で増殖している。

<section id="lovesong">
  <h1>Love Song</h1>
  <p>あなたの愛する人の名前を入れましょう。</p>
    <input v-model="Name" placeholder="名前"> <hr>
<h2>{{Name}} {{Name}}</h2>
<p>
  ドブネズミみたいに美しくなりたい<br>
  写真には写らない美しさがあるから</p>
  <p>{{Name}}{{Name}} {{Name}}{{Name}}{{Name}}<br>
  {{Name}}{{Name}} {{Name}}{{Name}}{{Name}}<br>
  もしも僕がいつか君と出会い話し合うなら<br>
  そんな時はどうか愛の意味を知って下さい<br>
  {{Name}}{{Name}} {{Name}}{{Name}}{{Name}}<br>
  {{Name}}{{Name}} {{Name}}{{Name}}{{Name}} Oh</p>
  <p>ドブネズミみたいに誰よりもやさしい<br>
  ドブネズミみたいに何よりもあたたかく</p>
  <p>{{Name}}{{Name}} {{Name}}{{Name}}{{Name}}<br>
  {{Name}}{{Name}} {{Name}}{{Name}}{{Name}}<br>
  もしも僕がいつか君と出会い話し合うなら<br>
  そんな時はどうか愛の意味を知って下さい</p>
  <p>愛じゃなくても恋じゃなくても君を離しはしない<br>
  決して負けない強い力を僕は一つだけ持つ<br>
  {{Name}}{{Name}} {{Name}}{{Name}}{{Name}}<br>
  {{Name}}{{Name}} {{Name}}{{Name}}{{Name}} Oh</p>
  <p>
  {{Name}}{{Name}} {{Name}}{{Name}}{{Name}}<br>
  {{Name}}{{Name}} {{Name}}{{Name}}{{Name}} Oh<br>
  {{Name}}{{Name}} {{Name}}{{Name}}{{Name}}<br>
  {{Name}}{{Name}} {{Name}}{{Name}}{{Name}} Oh
</p>
<hr>
<p>※愛する人にこのラブソングを送りましょう。
  </p>
</section>

コード上は{{Name}}がうるさいくらい出てくる。ちょっとゲシュタルト崩壊気味w（そのおかげで歌詞を一気に変えることができるんですYo！）

JSの方は先ほどとあまり変わらない。

new Vue({
  el: '#lovesong',
  data: {
    Name: 'リンダ'
  }
});

紐づけるID名や文字列が変わったくらい。

名前を打ち変えると歌詞がリアルタイムに変わる！

長い名前もなんのその！

（なお、「京子」「セバスチャン」は架空の名称であり、実在の名称とは関係ありませんw）

最後に

ということで、v-modelによるVue.jsのデータバインディングを初体験した！

v-modelは他にも複数行の（textareaタグ）、複数選択のチェックボックス（type=checkbox）、単独選択のラジオボタン（type=radio）など様々なフォーム要素に対応している。面白い用途が思いついたらまた記事にしていきたいと思ふ。それではまた！！

---

※参考：Vue.jsの習得のためにやったことまとめ
qiita.com