Todoリストを作ってみる

CodeSandboxでTodoリストを作ってみましょう

Vueの基礎 - Vue.js勉強記

ここで学んだことを活かせれば作れるはず

大まかな仕様

・input tagにTodoを入力する

・Add Todo ボタンをクリックしたらimcomplete領域に表示する

・imcomplete領域にあるTodoのComplete ボタンをクリックしたら、

　そのTodoをcomplete領域に移動する

・complete領域にあるTodoのReturn ボタンをクリックしたら、

　そのTodoをimcomplete領域に移動する

・Delete ボタンをクリックしたら、そのTodoを削除する

Vue的な仕様

・imcomplete, complete領域にあるTodoリストはそれぞれ別Componentを作成してみる

かなりシンプルなTodoリストですが、基礎には良い感じになると思います

ポイント

・input tagに入力されたTodoのdataを取得

・各ボタンのイベントを発火する

・TodoリストをLoopさせて表示させる

・Todoリストの追加や削除に伴うdataの扱い

次回から解説しながら作っていきます