Vue.jsについて

MVVMとは？

MVVMとはモデル(M)とビュー(V)間のやり取りをビューモデル(VM)を介して行うアーキテクチャのこと。
Vue.jsではリアクティブデータバインディングというシステムを利用している。

Model

Modelとはdataオブジェクトとmethodsオブジェクトのこと。
dataオブジェクトの属性はv-textやv-modelといったディレクティブによってバインドされる。
ディレクティブとはDOMを操作するための特殊な属性で、v-から始まる。

View

Viewとはelで指定されたDOM要素のこと。
elでDOM要素を指定することで、ViewModelの適用範囲を指定できる。

TODOアプリ

Result

HTML

まずはHTMLを書きます。
テキストの展開は{{}}によって行います。

<div id="myApp">
  <p>
    Task:
    <input type="text" v-model="newTask" v-on:keyup.enter="addTask()">
    <button v-on:click="addTask()">ADD</button>
  </p>

  <ul>
    <li v-for="todo in todos">
      <input type="checkbox" v-model="todo.isCompleted">
      <span v-bind:class="{ 'complete': todo.isCompleted }">{{ todo.task }}</span>
      <button v-on:click="deleteTask(todo)">Delete</button>
    </li>
  </ul>
  <p>Remaining Tasks: {{ remains }}/{{ todos.length }}</p>
</div>

それぞれのディレクティブについて簡単に解説します。

v-for: 配列をレンダリングするディレクティブ。
形式は{{ item in items }} (itemsは配列、itemは配列の要素)
v-model: form input要素で双方向データバインディングをするためのディレクティブ。
checkboxで使用するとboolean値がかえってくる
v-bind: HTMLの属性値(classなど)をバインドするためのディレクティブ。
省略することも可能。
v-on: DOMをListenするためのディレクティブ。
キー修飾子(kyeup.~~~)などの修飾子がある。

JS

つづいてVue.jsで処理を記述していきます。

new Vue ({
  el: '#myApp',
  data: {
    newTask: '',
    todos: [
      { task: 'buy a book', isCompleted: false },
      { task: 'buy a cake', isCompleted: false },
      { task: 'buy a sugar', isCompleted: true }
    ]
  },
  methods: {
    addTask: function(){
      if(this.newTask==''){
        return;
      } else {
      this.todos.push({
        task: this.newTask,
        isCompleted: false
      });
      this.newTask = '';
      }
    },
    deleteTask: function(todo){
      this.todos.$remove(todo);
    }
  },
  computed: {
    remains: function(){
      var counter = 0;
      for(var i=0; i<this.todos.length; i++){
        if(!this.todos[i].isCompleted){
          counter ++;
        }
      }
      return counter;
    }
  }
});

computedプロパティ

動的なプロパティを生成するメソッドを持つオブジェクトで、複雑な計算が必要な場合computed
プロパティを使用する。(methodsとの違いはgetやsetの定義ができるとこ)

CSS

最後にCSSを書きます。

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

ul li{
  margin: 5px;
  text-indent: 0;
}

ul li .complete{
  text-decoration:line-through;
  color: #ddd;
}

感想

最近Reactとか触っていますが、小規模なSPAなどはこちらのほうが使いやすい印象です。
他のアプリも作っていこう。

Vue.jsハンズオン@DeNA