Vueの基本を押さえたいけど時間がない方、Vueを使ってみたいけど何から始めれば良いか？さっぱり分からない方に向けてまとめた学習ロードマップリンク集です。
＊ 公式：ガイド、チュートリアル、リファレンスのリンクのみで構成しております。
公式サイトの情報なら、公式で読めば良いのでは？
もしもそんな疑問があれば、是非一度挑戦してほしいです。問題なく理解できるなら、全部理解するのが一番です！
あくまで個人の感想ですが、公式サイトは、初学者がVueを使えるようになるためには余分で過剰な情報が多く、情報もガイド、チュートリアル、リファレンスと散在しており、体系立てて理解するには骨が折れる感じです。
Option APIとComposition APIといった選択肢もVueの柔軟性を表す良さですが、学習初めには「どっちが良いの？」の答えがない中進めることは苦痛だと感じます。
そこでVueの公式サイトで何度も挫けた自分が、初学者にとって重要なVueの基礎を必要な順に必要な所だけ集めてみました。
このリンク集で最短速習が出来ると信じています。
Vueのクリックスタート
まずは気軽にオンラインエディターでVueを体験してみる。
このオンラインエディターでサクッと体感してみる。が今回の方針です。
https://ja.vuejs.org/guide/quick-start.html#try-vue-online
→ Playgroundからオンラインエディターに遷移できます。
Vueとは？
https://ja.vuejs.org/guide/introduction.html#what-is-vue
→ 最小構成のWebアプリケーションを作ってみます
Comoposition API
Option APIとComposition APIがありますが、Composition APIを選択します。
オブジェクト指向、Vue2.x系のクラススタイルから入るならOption APIの方が理解しやすいかもですが、今後の主流はComposition APIと思われます。
https://ja.vuejs.org/guide/introduction.html#composition-api
リアクティブ
ロジック処理で値が変わっても画面に表示される値は、変更されません。
DOMの再描写を行うための仕組みです。
ガイド
https://ja.vuejs.org/guide/essentials/reactivity-fundamentals.html#script-setup
チュートリアル
https://ja.vuejs.org/tutorial/#step-2
算出プロパティ
値を加工して表示したいときに大活躍。メソッドでも実現出来ますが、キャッシュといったメリットが勿論あります
ガイド
https://ja.vuejs.org/guide/essentials/computed.html#basic-example
チュートリアル
https://ja.vuejs.org/tutorial/#step-8
v-bind
さまざまな属性にスクリプトの値を結びつけます。クラスやスタイルなども。
ガイド
https://ja.vuejs.org/guide/essentials/template-syntax.html#attribute-bindings
リファレンス
https://ja.vuejs.org/api/built-in-directives.html#v-bind
チュートリアル
https://ja.vuejs.org/tutorial/#step-3
v-on
ボタンクリックなどのイベントにスクリプトに書いたメソッドを結びつけます。
ガイド
https://ja.vuejs.org/guide/essentials/event-handling.html
リファレンス
https://ja.vuejs.org/api/built-in-directives.html#v-on
チュートリアル
https://ja.vuejs.org/tutorial/#step-4
v-model
双方向に値を変更、反映できます。入力系で必須の仕組みです。
ガイド
https://ja.vuejs.org/guide/essentials/forms.html
チュートリアル
https://ja.vuejs.org/tutorial/#step-5
v-if
条件で表示を変えることが出来ます。
ガイド
https://ja.vuejs.org/guide/essentials/conditional.html
チュートリアル
https://ja.vuejs.org/tutorial/#step-6
v-for
繰り返し処理はこちら。これでカードやリストなどを一気に処理できます。
ガイド
https://ja.vuejs.org/guide/essentials/list.html
チュートリアル
https://ja.vuejs.org/tutorial/#step-7
コンポーネント
画面を構成するパーツごとにコンポーネントを作成します。まずはコンポーネントの基礎を理解したい。
ガイド
https://ja.vuejs.org/guide/essentials/component-basics.html
チュートリアル
