Vueの「はじめに」を読んで、TODOアプリを作ってみた。

はじめに

この前、30分アウトプットという話を聞いた。
その手始めに、Vueをちゃんとやってみようと思った。

Vueをやろうと思ったら、必ず見る「はじめに」のページ
https://jp.vuejs.org/v2/guide/

作成物

Todoアプリは作れた。（※保存はできません）

デモ

コード

html

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

javascript

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      { text: 'Learn Javascript' },
      { text: 'Learn Vue' },
      { text: 'Build something sweome'}
    ],

    todo: 'Hello Vue',
  },

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

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

参考

はじめに -- Vue.js
https://jp.vuejs.org/v2/guide/

Vue.jsは気難しい（配列編）
https://qiita.com/tmak_tsukamoto/items/e303328681f20a036530

2日目

前回の続き
今回は、「はじめに」の「コンポーネントによる構成」から再開

コンポーネントによる構成

Vueには、コンポネートというものがあり、いわゆるパーツのようなもの。
前回書いたコードをコンポーネントに、当てはめると以下のようになる。

html

<div id="app">
  <ol>
    <todo-item
        v-for="item in todos"
        v-bind:todo="item"
        v-bind:key="item.id"
      ></todo-item>
  </ol>
  <input v-model="todo" >
  <button @click="addTodo">
    Todoに追加
  </button>
</div>

javascript

Vue.component('todo-item', {
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

var app = new Vue({
  el: '#app',
  data: {
    todos: [
      {
        id: 1,
        text: 'Learn Javascript'
      },
      {
        id: 2,
        text: 'Learn Vue'
      },
      {
        id: 3,
        text: 'Build something sweome'
      }
    ],

    todo: 'Hello Vue',
  },

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

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

ただ、コンポーネント化はできたが、削除ボタンが上手く機能しなかった。
そこで、手間取り今日のアウトプットは終了。