【無料講座】初心者向けWebエンジニア養成講座はこちら

【JavaScript】Vue編

リンクが無い学習コンテンツに関しては「Front Hacks」にて公開しております^^

「約350本以上の解説動画(エクササイズの解説動画含む)」「スライド解説」「質問無制限」という内容で学習サポートをしております^^
(学習コンテンツは今後も随時追加予定)

前提

【JavaScript】Vue編では「Node.js」のコマンドをします。

「Node.jsが何かわからない」「Node.jsのコマンドの使い方がわからない」といった方は、先に以下の学習コンテンツから取り組むことをオススメします。

  1. JavaScriptバックエンド編 > Node.js入門

Vue

2020年4月に「Front Hacks」に追加した講座。

  1. 【Vue】Vueとは
  2. 【Vue】Vueを使ってみる
  3. 【Vue】Vueのディレクティブを理解する
  4. 【Vue】v-modelを使ってフォオーム入力を行う
  5. 【Vue】算出プロパティ(computed)を理解する
  6. 【Vue】「ウォッチャ」を理解する
  7. 【Vue】条件に応じて表示を切り替える(v-if, v-else-if, v-else, v-show)
  8. 【Vue】リストレンダリングを覚える(v-for)
  9. 【Vue】コンポーネントのイメージを掴む
  10. 【Vue】Vueインスタンスのライフサイクルを理解する
  11. 【Vue】Vue CLIをインストールする
  12. 【Vue】Vue CLIを使ってプロジェクトを作る
  13. 【Vue】Vue開発に便利なChrome拡張をインストールする
  14. 【Vue】単一ファイルコンポーネントを理解する
  15. 【Vue】単一ファイルコンポーネントでボタンを作ってみる
  16. 【Vue】propsを理解する
  17. 【Vue】propsとdataの違いを理解する
  18. 【Vue】カスタムイベントを使う
  19. 【Vue】propsで関数を渡し、子から親にデータを渡す
  20. 【Vue】slot_v-slotを理解する
  21. 【Vue】フォーム入力を覚える
  22. 【Vue】修飾子を理解する(modifier)
  23. 【エクササイズ】Vueで掲示板アプリを作る
  24. 【エクササイズ】Vueで作成した掲示板アプリとFirebaseを連携する

Vue Router

2020年4月に「Front Hacks」に追加した講座。

  1. 【Vue Router】Vue Routerとは
  2. 【Vue Router】Vue CLIで新規プロジェクトにVue Routerを追加する
  3. 【Vue Router】Vue CLIで既存プロジェクトにVue Routerを追加する
  4. 【Vue Router】Vue.useとは
  5. 【Vue Router】ルーティング設定と画面切り替えの方法
  6. 【Vue Router】router-linkとrouter-viewを理解する
  7. 【Vue Router】動的ルートマッチングを理解する
  8. 【Vue Router】ネストされたルーティング設定を理解する
  9. 【Vue Router】プログラムによるページ遷移の方法を理解する
  10. 【Vue Router】リダイレクト方法を覚える
  11. 【Vue Router】modeオプションを理解する
  12. 【エクササイズ】Vue Routerでページ切り替えができる掲示板アプリを作る
  13. 【エクササイズ】Firebase連携版、Vue Routerでページ切り替えができる掲示板アプリを作る

Vuex

2020年4月に「Front Hacks」に追加した講座。

  1. 【Vuex】Vuexとは
  2. 【Vuex】Vuexに出てくる概念を理解する
  3. 【Vuex】Vue CLIで新規プロジェクトにVuexを追加する
  4. 【Vuex】Vue CLIで既存プロジェクトにVuexを追加する
  5. 【Vuex】Stateの実装とコンポーネントとの連携方法
  6. 【Vuex】Gettersの実装とコンポーネントとの連携方法
  7. 【Vuex】Mutationsの実装とコンポーネントとの連携方法
  8. 【Vuex】Actionsの実装とコンポーネントとの連携方法
  9. 【Vuex】Vuexのテストコードを書く準備をする
  10. 【Vuex】Gettersのテストを書く
  11. 【Vuex】Mutationsのテストを書く
  12. 【Vuex】Actionsのテストを書く
  13. 【Vuex】modulesの使い方
  14. 【エクササイズ】Firebase連携版、Vue Routerでページ切り替えができる掲示板アプリのデータ管理をVuexで行う
【3つの特典付き】Webエンジニアに必要な基礎スキルを体系的に効率良く身につけたいですか？

LINE登録で無料特典を受け取る

次のような方向けに、学習をサポートするコンテンツを無料プレゼントしています。

  • Webエンジニアになりたいけど何から学習を始めれば良いかわからない
  • 今まで独学で頑張ってきたけど、独学に限界を感じてきた
  • プログラミングは出来るけど、大きめのコードが書けない

「プレゼント詳細が知りたい」「プレゼントを受け取りたい」といった方は、以下のボタンをクリックして詳細ページをご確認ください。

無料特典を受け取る