このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 リストを分離してみよう (02:14) 無料公開中- 概要
- 学習環境の確認
- components/TodoList.vueの作成
- リストの分離
-
#02 リストを表示してみよう (02:05) 無料公開中- TodoListコンポーネントのimport
- コンポーネントの配置
- propsの設定
-
#03 フォームを分離してみよう (02:19) 無料公開中- TodoAddForm.vueの作成
- フォームの分離
- フォームのスタイリング
- フォームの表示
-
#04 フォームを動作させよう (02:43) 無料公開中- @addTodoEvent="addTodo"
- addTodo関数の定義
-
#05 emit()を使ってみよう (01:57)- @submit.prevent="handleSubmit"
- handleSubmit関数の定義
- defineEmits()
- emit()
-
#06 App.vueに値を渡してみよう (02:48)- ref()
- emit('addTodoEvent', newTodo)
- 処理の流れ
-
#07 フォームの動作確認をしよう (02:09)- trim()
- return
-
#08 チェックボックスを追加しよう (02:13)- isCompleted
- チェックボックス実装
-
#09 checked属性を操作してみよう (02:37)- :checked
- has()
-
#10 コンソールで値を確認しよう (02:26)- @click="handleCheck(todo)"
- handleCheck関数の定義
- コンソールの表示
- emit()
- defineEmits()
-
#11 完了状態を反転させよう (02:33)- @checkTodoEvent="toggleIsCompleted"
- toggleIsCompleted関数の定義
- findIndex()
-
#12 削除ボタンを配置しよう (02:06)- チェックボックス動作確認
- 削除ボタン実装
-
#13 削除処理を実装していこう (01:50)- defineEmits()に複数の値を設定
- @deleteTodoEvent="deleteTodo"
- deleteTodo関数の定義
-
#14 削除時に確認をはさんでみよう (02:03)- splice()
- confirm()
-
#15 onMounted()を使ってみよう (01:53)- onMounted()
- import
- localStorage
-
#16 ブラウザからデータを読み込もう (02:08)- localStorage.getItem()
- JSON.parse()
-
#17 watch()を使ってみよう (02:58)- watch()
- localStorage.setItem()
- JSON.stringify()
