Vue.js入門
(全17回)
JavaScriptでUI部品をつくることができるVue.jsについて学んでいきます。
このレッスンでは Vue.js 2.5.13 を使用しています。
-
#01 Vue.jsを使ってみよう (02:54) 無料公開中
- 公式サイトの確認
- index.htmlの作成
- main.jsの作成
- Vue.jsの読み込み
- styles.cssの作成
-
#02 Vue.jsの基本をおさえよう (02:59) 無料公開中
- 双方向データバインディング
- v-model
-
#03 ToDoアプリを作ってみよう (02:31) 無料公開中
- データの用意
- v-for
-
#04 アプリの見た目を整えよう (02:36) 無料公開中
- アプリのスタイリング
- ブラウザでの確認
-
#05 v-onでイベントを設定しよう (02:54)
- addItemの実装
- v-on
- prevent
-
#06 ToDoを削除できるようにしよう (02:46)
- deleteItemの実装
- 動作確認
-
#07 完了状態を管理してみよう (01:40)
- isDoneの追加
- 既存コードの修正
-
#08 v-bindでクラスを操作しよう (02:48)
- チェックボックスの追加
- v-bind
-
#09 v-ifで条件分岐をしてみよう (02:50)
- v-show
- v-ifで条件分岐する際の注意点
-
#10 算出プロパティを使ってみよう (02:35)
- 算出プロパティ
- filter
-
#11 完了したToDoを一括削除しよう (02:41)
- Purgeボタンの作成
- purgeの実装
- リファクタリング
-
#12 LocalStorageでデータを永続化させてみよう (02:56)
- LocalStorage
- watch
- deep watcher
-
#13 LocalStorageからデータを読み出してみよう (02:26)
- LocalStorageの確認
- mounted
-
#14 Componentに機能をもたせよう (02:36)
- Componentの登録
- 動作確認
-
#15 いいね！ボタンを実装してみよう (01:38)
- coutUpメソッドの実装
- dataの用意
-
#16 Propsで値を渡してみよう (02:02)
- props
- デフォルト値や型の指定
-
#17 $emitを使ってイベントを発火させよう (02:40)
- Componentから親要素へのデータ渡し
- $emit
全ユーザーの学習状況
完了済
2
学習中
46
閲覧数
2,080
このレッスンについて
- 最終更新日
- 2018年2月15日 (18時間前)
- バージョン情報
- Vue.js 2.5.13
- 関連キーワード (6)
