【Vue.js2&Vue.js3対応】基礎から【Vuetify】を使った応用まで！ 超初心者から最短距離でレベルアップ

『Vue.js』はプログレッシブ(段階的)フレームワークと呼ばれ、

はじめは小規模から、機能を追加することで大規模まで対応できるというつくりになっているのですが、

いきなり小規模〜大規模を覚えようとすると、覚えることが多すぎて、

『結局なにをどうすればいいのさ・・・』となってしまいがちです。

そんな実体験もありこの講座では、

はじめはちょっとずつ、

jQueryでもできることから取り組んで、

『できる！』と思えるように時間をかけて進めるような構成にしています。

初心者の視点で、

ちょっとでも『ん？』と思う箇所はできるだけ掘り下げ、

スッキリした状態で先へ進めるように解説しています。

簡単でもいいのでできるだけ手を動かしてアプリをつくりつつ、

知識だけでなく実際に使えるようになるような構成を意識しております。

Vue.js2の方が初心者向けということもあり、

セクション1～9まではVue.js2でレクチャーし、

セクション10以降でVue.js3を解説しています。

■更新情報

2022/7 Vue.js3.2 script setupを追加しました。

■講座内のサンプル

• タブメニュー

• モーダルウィンドウ

• カルーセル(スライドショー)

• フォーム

• ボタンクリックでAjax画像取得(Vuetify)

• フォーム(Ajax + API)

• 簡易読書管理アプリ(GoogleBooksAPI + VueCLI + VueRouter + Vuetify)

■講座で扱っている内容

• ディレクティブ(v-if/v-show/v-for/v-bind/v-on/v-cloak/v-text/v-html)

• オプションAPI(data/methods/computed/watch)

• リアクティブシステム(get/set)

• ライフサイクルフック(created/mounted)

• トランジション(transition/transition-group)

• 双方向データバインディング(v-model)

• Ajax(fetch/async/await)

• Lodash

• フォーム(v-model/computed(get/set)

• コンポーネント間通信(props down/event up)

• スロット(名前付き、スコープ付き)(v-slot)

• Vuetify(CDN/NPM)

• VueCLI(SFC/MPA)

• VueRouter(SPA)

• Vuex

• Vue.js3対応(Provide/Inject, Teleport, CompositionAPI、合成関数)

• Vue.js3.2 対応 script setup

■収録時のバージョン

・セクション1～9

Vue.js 2.6.11

Lodash 4.17.20

Vuetify 2.3.10

Material design font 5.5.55

VueCLI 4.5.6

Node.js 12.16.2

Vuex 3.4.0

・セクション10

Vue.js 3.0.0

GoogleChrome拡張機能 Vue.js Devtools ver6.0.0 beta 15

VueRouter 4.x

Vuex 4.x

・セクション11

Vue.js 3.2