Vue.jsを使って簡単なtodoアプリを作ってみた

身内用進捗内容報告記事

初めに

Vue.jsが初めてのjsライブラリとなったが苦難することなく作ることができた

デモ

コード

HTML

<div id="app">
  <div>
    <li v-for="(todo, i) in todos">
     {{ todo.text }}
     <button @click="remove(i)">
    削除
  </button>
    </li>
  </div>
  <input v-model="todo" >
  <button @click="add">
    追加
  </button>
</div>

javascript

var app = new Vue({
  el: '#app',
  data: {
    todos: [],
    todo: 'sample',
  },

  methods: {
    add() {
      this.todos.push({ text: this.todo })
    },

    remove(i) {
      this.todos.splice(i, 1) 
    }
  }
})