新しいレッスンがあります
旧版のレッスンは更新を終了しており、現状と異なる場合があります。サポートも終了しておりますので、最新版への移行をお願いします。
-
#01 Vue.jsを使ってみよう (02:53) 無料公開中
- 公式サイトの確認
- index.htmlの作成
- main.jsの作成
- Vue.jsの読み込み
- styles.cssの作成
-
#02 Vue.jsの基本をおさえよう (02:59) 無料公開中
- 双方向データバインディング
- v-model
-
#03 ToDoアプリを作ってみよう (02:29) 無料公開中
- データの用意
- v-for
-
#04 アプリの見た目を整えよう (02:35) 無料公開中
- アプリのスタイリング
- ブラウザでの確認
-
#05 v-onでイベントを設定しよう (02:52)
- addItemの実装
- v-on
- prevent
-
#06 ToDoを削除できるようにしよう (02:44)
- deleteItemの実装
- 動作確認
-
#07 完了状態を管理してみよう (01:39)
- isDoneの追加
- 既存コードの修正
-
#08 v-bindでクラスを操作しよう (02:46)
- チェックボックスの追加
- v-bind
-
#09 v-ifで条件分岐をしてみよう (02:48)
- v-show
- v-ifで条件分岐する際の注意点
-
#10 算出プロパティを使ってみよう (02:33)
- 算出プロパティ
- filter
-
#11 完了したToDoを一括削除しよう (02:40)
- Purgeボタンの作成
- purgeの実装
- リファクタリング
-
#12 LocalStorageでデータを永続化させてみよう (02:54)
- LocalStorage
- watch
- deep watcher
-
#13 LocalStorageからデータを読み出してみよう (02:24)
- LocalStorageの確認
- mounted
-
#14 Componentに機能をもたせよう (02:36)
- Componentの登録
- 動作確認
-
#15 いいね！ボタンを実装してみよう (01:36)
- coutUpメソッドの実装
- dataの用意
-
#16 Propsで値を渡してみよう (01:58)
- props
- デフォルト値や型の指定
-
#17 $emitを使ってイベントを発火させよう (02:39)
- Componentから親要素へのデータ渡し
- $emit
