Vue.js入門

Vue 3 (Composition API) と Vite/Bun で学ぶフロントエンド教材

採点されません。ログイン不要。じぶんのペースでどうぞ。

📖 教材で学ぶ

解説を読みながら、じぶんのペースで進められます。読むだけでもかまいません。

  1. L00 ch01 — bun + Vite で Vue 環境構築
  2. 環境構築検証アプリ
  3. Vue — Template 補間
  4. Vue — v-bind 詳細
  5. Vue — v-on / @ (イベント)
  6. Vue — v-if / v-show
  7. Vue — v-model
  8. Vue — Props (defineProps)
  9. Vue — Emits (子→親)
  10. Vue — Slot
  11. Vue — provide / inject
  12. Vue — computed
  13. Vue — watch / watchEffect
  14. Vue — Lifecycle Hooks
  15. Vue Router — Setup
  16. Vue Router — 動的ルート
  17. Vue Router — ネストルート
  18. Vue Router — ナビゲーションガード
  19. Vue — Pinia
  20. Vue — Composables
  21. Vue — Pinia 画面間共有
  22. Vue + TypeScript — Setup
  23. Vue + TS — Props 型付け
  24. Vue + TS — Emits 型付け
  25. Vue — vitest
  26. Vue — Vue Test Utils
  27. Vue — Playwright (E2E)
  28. Vue 入門 — 環境構築と最初の画面
  29. Vue — 動く画面をつくる
  30. L08 ch03 — v-for で リスト描画
  31. L08 ch04 — fetch で外部 API
  32. L08 ch05 — リスト + フォーム (TODO アプリ)
  33. L08 ch06 — Vue + FastAPI フルスタック連携
  34. ch01 — 静的データで Vue 基礎
  35. ch02 — Router / Pinia / fetch
  36. ch03 — 一覧から詳細画面へ
  37. ch04 — 検索・お気に入り・認証連携
  38. Vue — リアクティブバリデーション
  39. Vue — 非同期 UX 3 状態
  40. Vue — API クライアントの一元化
  41. Vue — モック先行 → 本番繋ぎ替え
  42. Vue 中級
  43. Vue でサーバーと CRUD
  44. Vue + FastAPI 段階学習
  45. Vue — vue-chartjs でデータ可視化
  46. L16 project-scaffold-ts-js — TypeScript 版と JavaScript 版の違い
  47. L17 build-tools-vite-vuecli — Vue CLI と Vite の違い
  48. datepicker 写経 — 日付入力と送信ペイロード
  49. Vuetify — セットアップとテーマ
  50. Vuetify — フォームとバリデーション