vue-3-practices
Vue 3 / Nuxt 3 を学習するためのスライドとハンズオンと演習を用意したリポジトリです。
スケジュール
自習時間を除き、全 16 時間を想定しています。
- Vue 3 のハンズオン (6 時間)
- Vue 3 周辺ライブラリのハンズオン (2 時間)
- Vue 3 サンプルアプリケーションのハンズオン (4 時間)
- Nuxt 3 のハンズオン (4 時間)
スライド
https://tuqulore.github.io/vue-3-practices/
ハンズオン
| 内容 | リンク |
|---|---|
| Vue 3 | ハンズオン |
Vue 3 debounce-throttle vue-router |
ハンズオン |
| Nuxt 3 | ハンズオン |
| Nuxt 3 を触ってみよう | ハンズオン |
| グリッドコンポーネント | ハンズオン 完成 |
| パスワードチェッカー | ハンズオン 完成 |
| デザインラボの記事ビューアー | ハンズオン 完成 |
| デザインラボの記事ビューアー（Nuxt 版） | 完成 |
| 靴のギャラリー | ハンズオン 完成 |
| 靴のギャラリーとショッピングカート | 完成 |
| 付箋アプリ | ハンズオン |
演習
| キーワード | リンク |
|---|---|
style |
演習 解答 |
scoped css component |
演習 解答 |
mustache setup |
演習 解答 |
reactive(ref) class binding event handling |
演習 解答 |
v-if |
演習 解答 |
v-for |
演習 解答 |
reactive(ref) props component v-model |
演習 小問 1 小問 2 小問 3 |
slot |
演習 解答 |
emit event handling |
演習 解答 |
mounted |
演習 解答 |
computed |
演習 解答 |
vue router |
演習 小問 1 小問 2 |
fetch |
演習 解答 |
debounce |
演習 解答 |
StackBlitz の動作環境
以下の環境で動作します。
- Chromium 系ブラウザ (推奨)
- Firefox (ベータサポート)
- Safari (ベータサポート)
詳しくはこちらを参照してください。
講師を依頼したい方
株式会社ツクロアでは、この教材を使ったオンライン講習のご依頼を受け付けています。 ご検討の方はこちらのフォームにてまずはお問い合わせください。
ライセンス
別途指定のないかぎり、以下のライセンスで提供されています。
ソースコード
MIT ライセンスで提供されています。
ドキュメント
tuqulore Inc. 作『Vue 3 / Nuxt 3 の教材集 』はクリエイティブ・コモンズ 表示 4.0 国際 ライセンスで提供されています。