Todoリスト #1
まずviewから作成します。
=> vueの機能をあまり使用せずに見た目を作成します。
ファイル構成
今回はシンプルにします。
components --- Complete.vue // 完了したTodoリスト |- Imcomplete.vue // 未完了のTodoリスト App.vue
こちらの2ファイルを使用します。
App.vueにTodoを入力するInputを作成
<div> <input type="text"> <button>Add Todo</button> </div>
各componentにTodoリストを作成
3つほどTodoを作成してみましょう
components/Complete.vue
<ul> <li> <span>Todo1</span> <button>Return</button> <button>Delete</button> </li> <li> <span>Todo2</span> <button>Return</button> <button>Delete</button> </li> <li> <span>Todo3</span> <button>Return</button> <button>Delete</button> </li> </ul>
components/Imcomplete.vue
<ul> <li> <span>Todo1</span> <button>Complete</button> <button>Delete</button> </li> <li> <span>Todo2</span> <button>Complete</button> <button>Delete</button> </li> <li> <span>Todo3</span> <button>Complete</button> <button>Delete</button> </li> </ul>
App.vueから各componentを呼び出す
<template> <div id="app"> <div> <input type="text"> <button>Add Todo</button> </div> <div class="flex"> <div> <p>imcomplete</p> <div> <Incomplete /> </div> </div> <div> <p>complete</p> <div> <Complete /> </div> </div> </div> </div> </template> <script> import Incomplete from "./components/Imcomplete"; import Complete from "./components/Complete"; export default { name: "App", components: { Incomplete, Complete } }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } .flex { display: flex; justify-content: space-around; } .flex > div { width: 45%; } </style>
ここまででviewの部分は完成しました。
次回はvueの機能を使いながら完成を目指していきましょう。