Help us understand the problem. What is going on with this article?

3つだけ覚えてVue.jsでtodoアプリを作ってみる

More than 3 years have passed since last update.

必要最低限だけ理解して、Vue.jsでtodoアプリを作ってみる記事。

Vue.jsってなんだ?

Vue.jsはJavaScriptのアプリケーションフレームワーク。

特徴

  • シンプルにかける
  • リアルタイムでの反映が簡単に出来る(公式HPで試せる)
  • 学習コストが低い

Vue.js公式HP

などが特徴。

3つだけ覚えてTodoアプリ

シンプルな分、少し覚えたらすぐにかける。
Vue.jsで作ったtodoアプリがこちら。
【デモ】 【github】

覚えることその①:new Vueで初期化

Vue.jsを使いたかったら、vue.jsファイルを読み込んだ上で

var app = new Vue({
//some code
})

で初期化してやればよい。何のことはない。

覚えることその②:html内での関連付け

Vue.jsでは、v-○○というプロパティを付与することで、Vue.js内で利用出来るようになる。
○○に入るものは必要に応じて調べればいい。

 <div id="todo">
    <h1>My Todos</h1>
  //v-○○で関連付け
    <div v-repeat="t : todos | orderBy 'isDone'">
        <input type="checkbox" v-model="t.isDone" />
        //変数を配置
        {{$index}}:{{t.content}}
    </div>
    <input type="text" v-model="input" value="">
    <input type="button" v-on="click: addTodo" value="add todo" />
    <div>
        left {{lefts}} tasks.
    </div>
</div>

v-repeat="t : todos | orderBy 'isDone'"

ここではTodoリストを作るため、v-repeatという要素を指定してtodosに入っている要素を列挙するにしている。
t : todosではtodosというarrayの要素をtとして取り出している。
orderBy 'isDone'は、todosの要素にもたせているisDoneというboolean型をもとに、並びかえる処理を行っている。
要するに、完了したタスク(isDoneがtrueのもの)が下にいく。

t.isDone

todoの要素であるtの、isDoneというプロパティにアクセスする。

{{lefts}}

leftsという要素の中身を表示する。
ここではtodosの要素の中でisDoneがtrueではない数を示している。
すなわち、終わっていないタスクの数。

覚えることその③:データや処理を書き込む

var app = new Vue({
//some code
})

の中の処理が一見わかりにくそうだけど、よく見てみると単純。
基本的な要素を覚えてしまえばすぐに理解できるようになる。

el要素でidやclassを指定

 el: '#todo'

で、html内のid=todoの要素を指定している。
この宣言によって、今から書くコードの適用範囲を指定している。

扱う変数をdataで宣言

dataに変数を宣言して扱うことができる。
外部からデータを読み込んでここに入れてやれば、そのまま表示される

 data: {
       todos: [],
       input: ""
   }

ここでは個々のタスクを格納するarrayと、入力フォームの初期値を宣言している。
todosは空である必要はなく、ここに要素を格納しておけば最初からその要素達が表示される。

created: function(){}で読み込んだ際の処理を実装

created: function(){
//some code
}

と書くことで、読み込んだ際の処理を実装できる。
今回のコードでは、this.todos.pushでtodosに要素の追加を行っている。
Vue.jsの特徴の通り、todosに追加された要素はそのまま反映される。

 created: function(){
       this.title = "My Todos";
       var saved = [
       {
         isDone:true,
         content:"content1"
       },
       {
         isDone:false,
         content:"content2"
       },
       {
         isDone:false,
         content:"content3"
       },
       {
         isDone:false,
         content:"content4"
       }
       ]
       //savedをtodosに入れていく
       for(var i = 0; i < saved.length; i++){
           this.todos.push(saved[i]);
       }

   },

methodsでオリジナルの処理を実装

methods:{
  originalFunction: function(){
   //some code
  }
}

で、originalFunctionという名前のメソッドを作れる。
メソッドの呼び出しは

html
<input type="button" v-on="click:originalFunction" />

のように、v-on要素にてトリガーを指定して呼び出すようにすることができる。

今回の例では、"add todo"がクリックされたらtodosにinputフォームの内容が追加されるようにしている。

<input type="button" v-on="click: addTodo" value="add todo" />

で、要素がclickされたら実装したaddTodoメソッドが呼ばれる。

methods:{
       addTodo: function(){
           if ( this.input === '' ) return;
           this.todos.push({ isDone:false , content:this.input });
           this.input = ""
       }
   }

終わりに

以上、大きく3つの要素を覚えることで(実質10個以上ある気もするけど)、簡単な処理はできるようになる。お試しあれ。
 【github】

コード全容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue.js todo app</title>
  <script src="vue.js"></script>
</head>
<body>
  <div id="todo">
    <h1>My Todos</h1>
  //v-○○で関連付け
    <div v-repeat="t : todos | orderBy 'isDone'">
        <input type="checkbox" v-model="t.isDone" />
        //変数を配置
        {{$index}}:{{t.content}}
    </div>
    <input type="text" v-model="input" value="">
    <input type="button" v-on="click: addTodo" value="add todo" />
    <div>
        left {{lefts}} tasks.
    </div>
</div>

<script type="text/javascript">
 //Vueで初期化
  var app = new Vue({
    //elementを指定
    el: '#todo',
    //データを初期化
    data: {
        todos: [],
        input: ""
    },
    //自動的に計算
    computed: {
        lefts: function(){
            return this.todos.filter(function(t){ return !t.isDone }).length;
        }
    },
    //読み込んだ最初に呼ばれる関数
    created: function(){
        this.title = "My Todos";
        var saved = [
        {
          isDone:true,
          content:"content1"
        },
        {
          isDone:false,
          content:"content2"
        },
        {
          isDone:false,
          content:"content3"
        },
        {
          isDone:false,
          content:"content4"
        }
        ]
        for(var i = 0; i < saved.length; i++){
            this.todos.push(saved[i]);
        }

    },
    //変数の宣言
    methods:{
        addTodo: function(){
            if ( this.input === '' ) return;
            this.todos.push({ isDone:false , content:this.input });
            this.input = ""
        }
    }
  })
</script>

</body>
</html>

 【github】

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした