このレッスンをはじめる前に
このレッスンを進めるには前提知識が必要です。先に以下のレッスンを完了しておきましょう。
-
#01 Todo管理アプリを作っていこう (01:41) 無料公開中- 概要
- レッスンの構成
- 作るアプリの確認
- 必要な知識
- 学習環境
-
#02 Codespaceを起動しよう (02:03) 無料公開中- Codespaceの起動
- Codespaceの使い方
-
#03 VS Codeで開発していこう (01:59) 無料公開中- VS Codeからの接続
- 拡張機能のインストール
-
#04 アプリケーションを起動しよう (02:34)- ターミナルの起動
- アプリケーションの起動
- ブラウザでの確認
-
#05 リストを配置してみよう (00:47)- リストの配置
-
#06 JavaScriptでデータを管理しよう (02:06)- todos配列の作成
- v-for
- {{ }}
- 入力フォーム設置
-
#07 メッセージを表示してみよう (02:48)- メッセージの表示
- ページ遷移の無効化
- e.preventDefault()
- @submit.prevent
-
#08 入力されたテキストを表示しよう (01:50)- 入力テキストの表示
- :value
- ref()
- import
-
#09 v-modelを使ってみよう (02:53)- e.target.value
- v-model
- フォームバインディング
-
#10 reactive()を使ってみよう (02:18)- import
- reactive()
- ref()とreactive()の違い
- 初期値の変更
- 入力欄の初期化
-
#11 key属性を設定しよう (02:34)- todosのオブジェクト化
- :key
- crypto.randomUUID()
-
#12 空の値を弾いてみよう (02:00)- 入力欄が空の場合値を追加しない
- 空白のみの場合も追加しない
- trim()
