読者です 読者をやめる 読者になる 読者になる

Vue.jsハンズオン@DeNA

DeNAで開催されていたVue.jsのハンズオンに行ってきました。

eventdots.jp

Vue.jsの詳細はこちら。 今回は簡単なTODOアプリを作りました。

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

See the Pen TODO by Vue.js by takanorioki (@takanorioki4) on CodePen.

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;
}

完成!

これで完成です。いい感じに便利ですね。 他のアプリも作っていこう。