はじめに
最近Vue.jsの勉強をしています。
現場で作られているソースは見てはいるものの、理解せずに改修しちゃうのは、ないなと
思って初級編からではありますが勉強していこうと思います。
今回のお題
スタイルのデータバインディングです。
何かのアクションをしたときに、特定の色を変更したり、場所を移動させたりすることがあると思います。
これは、ユーザがアクションを起こしたことでアクションしたことが反映されましたよーと教えるには
良い方法です。
できたもの
ボタンを押すことで、「選択した位置はここです。」の文字が移動します。
ソース
今回は、ボタンを押したときに文字の位置を変更するプログラムです。
まずは、htmlを記載します。
スタイルは、v-bindを使って操作可能です。
style02.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>スタイルテスト</title>
</head>
<body>
<div id="app">
<div>
<button @click="setPosition('left')">左</button>
<button @click="setPosition('center')">真ん中</button>
<button @click="setPosition('right')">右</button>
<p v-bind:style="styleObject">{{msg1}}</p>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<script src="./style02.js"></script>
</body>
</html>
上記の
<p v-bind:style="styleObject">{{msg1}}</p>
部分は、
＜div v-bind:style="{ color: activeColor, fontSize: fontSize・・・・＞ のように直接記述することも可能みたいですが、オブジェクトとして置き換えた方が綺麗になります。
style02.js
var app = new Vue({
el: '#app',
data: {
styleObject: {
color: 'red',
textAlign: 'center',
fontSize: '13px',
background: 'black'
},
msg1: '選択した位置はここです。'
},
methods: {
setPosition : function(position) {
this.styleObject.textAlign = position;
}
}
});
まとめ
VueインスタンスとHTMLのテンプレート構文に記述した値がバインドされる。
データ変更とともにDOMツリーに即座に反映し、画面描画されるあたりが凄いですね。
リアクティブシステムなフレームワークって凄いなと実感します。