Vue 基本バインディング編 ~UI革命~
リアクティブシステム
リアクティブシステムとは
Vueの内部の核となるシステムで
同期や最適化などを行う。
データバインディングはその機能の内の1つである。
リアクティブシステム中のデータをリアクティブデータという。
クラスのデータバインディング
HTML
<div id = ''one"> <h1 v-bind:class="{'test': test1}">test</h1> <h1 v-bind:style="{color:textColor}">test</h1> </div>
new Vue({ el: '#one', data:{ test1:true, textColor:'red' } })
$elと$refs
$elと$refsはDOMを直接参照する。
画面上の位置などで必要となる。
$elの使用法
Vueのライフサイクルでmounted以降で使用でき、
ルート要素が参照できる。
mounted : function(){ console.log(this.$el) //ルート要素 -> <p>aaa</p> }
$refsの使用法
ルート以外の要素で対象要素にref属性で名前をつけて使用する。
mounted : function(){ console.log(this.$refs.test) //<p ref="test"></p>のDOM }
注意
描画処理の最適化をしないためDOMの更新に使用するには向いていない。
双方向データバインディング
データバインディングとは
ユーザの入力値をデータと同期させ、
v-model
ディレクティブを使用する。
処理
1.要素のvalue属性の更新。(データバインディング)
2.更新後、valueデータを描画(イベントハンドリング)
使用法は要素によって異なるため要確認。
知識
修飾子(.○○)についてはイベントやv-modelなどで覚えきれないほどあるのでその都度調べる必要がある。
dataオプション直下のプロパティは追加ができないため、初期値で定義する必要がある。
データ内容の確認には{{ $data }}でJSON形式で画面に表示できる。{{}}はMustache(マスタッシュ)記法。