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>

JavaScript

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(マスタッシュ)記法。


参考文献

基礎から学ぶ Vue.js
https://www.amazon.co.jp/基礎から学ぶ-Vue-js-mio/dp/4863542453/