javascriptフレームワーク「Vue.js」を使ってみるpart1

スポンサーリンク
Pocket
LINEで送る

javascriptフレームワークはangularjs、Reactなどさまざまなものがあります。
今回は双方向データバインディングに特化し、また学習コストもそこまで高くない「Vue.js」を使っていきたいと思います。

Vue.jsはこちらからダウンロードできます

Vue.jsの簡単な説明

・MVVMパターン
Model,View,ViewModelの3つに分割してアプリケーションを作っていくパターンです。

・シンプル!
高機能ではないが、シンプルなため学習コストも低く他のライブラリと組み合わせやすい

・双方向データバインディング
jqueryではデータが更新された場合、手動でコードを書く必要があります。
しかし、Vue.jsはデータが同期され続けるためそのコードを書く必要がなくシンプルに書けます。

詳しくはこちらを見てください
Vue.js概要

では、実際にサンプルを作っていきます。

スポンサーリンク

フォームの値を反映

<div id="demo">
  <p>{{message}}</p>
  <input v-model="message">
</div>
<script>
window.onload = function() {  
  var demo = new Vue({
    el: '#demo',
    data: {
      message: 'Hello world!'
    }
  });

};
</script>

デモ
フォームに入力された値がmessageにリアルタイムに反映されます。

アクセスするには「$」をつけます

demo.$data.message; //Hello world!
demo.$el;  //div#demo

クラス名を付与

classを付与させる
v-bind:class=”{‘付与させたいclass名’: flag}”

<div id="demo2" class="class_demo" v-bind:class="{'class-a':classA,'class-b':classB}">class test</div>
<script>
window.onload = function(){ 
 var class_demo = new Vue({
  el: '#demo2',
  data:{
   classA:true,
   classB:false
  }
 });
};
</script>

classAがtrueなのでclass-aが付与されます

<div id="demo2" class="class_demo class-a" v-bind:class="{'class-a':classA,'class-b':classB}">class test</div>