HTML側からVueに値を設定する　【JavaScript フレームワーク入門】

Vue.jsの学習メモ。

今日は「JavaScript フレームワーク入門」の第4章を読んでみます。

jsstudy.hatenablog.com

4-2-4　HTML側からVueに値を設定する
- HTML
- CSS
- JavaScript
- 実行結果
v-model属性
- v-bind属性
- ディレクティブとは？
まとめ

4-2-4　HTML側からVueに値を設定する

(p.124)

HTML側から入力した値をVueオブジェクト側に渡すには？

Vue.jsはMVVMパターンのJavaScriptフレームワークです。

MVVMパターンの特徴として「双方向のデータバインディング」（データ結合）という仕組みがありました。

Modelのデータ → Viewに表示する　　（前回練習した方法）
Viewを変更 → Modelにも反映させる　（今回練習する方法）

今回は、(2)Viewの変更をModelに伝える方向のデータバインディングを練習してみます。

HTML

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Hello</title>
  <meta charset="UTF-8">
  <script src="vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css"></link>
</head>

<body onload="initial();">
  <h1>Vue.js</h1>
  <div id="msg">
    <p>{{ message }}</p>
    <input type="text" v-model="message">
  </div>
</body>

</html>

vue.jsは、公式サイトからバージョン2のvue.jsをダウンロードしておく。

CSS

style.css

body {
  color: #F99;
  padding: 5px 16px;
  font-size: 14pt;
  line-height: 150%;
}
h1 {
  font-size: 24pt;
}
p {
  font-size: 18pt;
}

JavaScript

main.js

function initial() {
  new Vue({
    el: '#msg',
    data: {
      message: 'this is Vue.js sample!'
    }
  })
}

実行結果

上記の「index.html」「style.css」「main.js」「vue.js」を同じフォルダの中に保存して、Chromeでindex.htmlを見てみます。

f:id:jsstudy:20170714174135p:plain

テキストボックスに「abc」と入力したら、マスタッシュタグ「{{ message }}」の部分にリアルタイムで反映されました。

v-model属性

<input>タグに、Vue.js用の「v-model」という属性が用意されています。

この属性が目印となって、Vue.jsのViewModelが<input>と接続されます。

v-model="message"という属性値は、「ViewModelに保存されているすべてのオブジェクトの中からmessageというプロパティを探し、その値をこのコントロールに設定する」という意味だそうです。

v-model属性を付けることによって、<input>タグの値と、Vueのdata内にあるmessageという項目の値が同期されるようになります。

f:id:jsstudy:20170714191326p:plain

第2回 Vue.js基礎文法最速マスター：Vue.js入門 ―最速で作るシンプルなWebアプリケーション｜gihyo.jp … 技術評論社

フォーム入力バインディング

先の例では，UIから入力を受け付けて状態を変更するためにイベントハンドリングとメソッドを利用しましたが，v-modelディレクティブを利用すればこれを簡潔に実現できます。

これは双方向データバインディングを実現するディレクティブで，View（DOM）で変更があった場合にはViewModelの状態として反映します。

逆にViewModelの状態の変更があった場合にはView（DOM）の値として反映します。

フォーム入力を扱う方法の詳細は、Vue.jsのリファレンスに説明がありました。

jp.vuejs.org

（↑今の段階では、十分に理解しきれていないので、ちょっと何言ってるのかよく分かんないですねｗ…サンプルコードの写経が必要＞＜）

v-bind属性

「v-model」と似たようなディレクティブで「v-bind」というのもありました。

v-bind　　→　単方向のデータバインディング（表示だけ）
v-model　→　双方向のデータバインディング（表示＋入力を受付ける）

という用途の違いがあるみたいです。

（参考）Vue.jsから手軽に始めるJavaScriptフレームワーク - Qiita

elで指定した要素がVue.jsの管理下となり、この配下の要素についてv-bind/v-modelで属性、v-onでイベントの設定を行うことでdataの値を表示させたり、methodsで定義した処理を呼び出すことができます。

v-bindを利用したバインディング

双方向のバインディング(値を表示するだけでなく、入力を受け取る場合など)では、v-modelを利用します。