What you'll learn:
- VueJsを基礎からわかりやすく
- ES6の文法をメインに
- ディレクティブ・オプションAPI・リアクティブの使い方
- VueCLIやVueRouterを使ったモダン開発の方法
- Vuetifyを使ったマテリアルデザインの構築方法
- Vuexの考え方、よく使う記法
- VueJs3の扱い方
- CompositionAPIの扱い方
『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
VueCLI4.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
