はじめに
  • はじめに
Vue.jsの学習環境の準備
  • JSFiddleの使い方
  • CDNを利用したVue.jsの導入
Vue.jsの基礎
  • Vueコンストラクタのelオプション
  • Vueコンストラクタのdataオプション
  • Vueインスタンスの$watchメソッド
  • Vueインスタンスのwatchオプション
  • Vue.jsのテンプレートと仮想DOMの関係について
  • v-bindディレクティブの解説
  • フィルター機能の解説
  • computedプロパティの解説
  • v-onディレクティブとmethodsプロパティ
  • v-ifディレクティブとv-showディレクティブの解説
  • v-if, v-else-if, v-elseディレクティブを使用した条件分岐
  • v-forディレクティブの解説
  • v-forディレクティブにおけるkeyの指定について
  • v-modelディレクティブの解説
  • templateオプションの解説
Vueインスタンスのライフサイクル
  • Vueインスタンスのライフサイクルとは
  • ライフサイクルフックで呼び出されるメソッドの定義方法
コンポーネントの基礎
  • コンポーネントについての概要
  • コンポーネントの作成方法
  • コンポーネントの親子構造について
  • コンポーネントのローカル登録とグローバル登録
  • 親コンポーネントから子コンポーネントへのデータの伝搬
  • propsとdataの違いについて
  • 子コンポーネントから親コンポーネントへのデータの渡し方
  • .sync修飾子を使用したのデータの渡し方
  • スロットの使用方法について
Vue CLIによる開発環境構築
  • Vue CLIの概要
  • Vue CLIの導入
  • Vueコマンドによる開発環境のセットアップ
エディターの紹介
  • Visual Studio Codeの紹介
Vue CLIで作成した開発環境の解説
  • Vue CLIで作成したプロジェクトの 動作環境について
単一ファイルコンポーネントの解説
  • 単一ファイルコンポーネントとは
  • 単一ファイルコンポーネントの作成
  • 単一ファイルコンポーネントの利用方法
Vue Routerの解説
  • シングルページアプリケーション(SPA)の解説
  • Vue Routerの設定方法についての解説 その1
  • Vue Routerの設定方法についての解説 その2
  • router-viewとrouter-linkの使用方法
アドレス帳アプリケーションの作成
  • Vuetifyの導入
  • Vuetifyのバージョンダウングレードについて
  • 画面の整理とツールバーのカスタマイズ
  • 画面の整理とツールバーのカスタマイズ(Vuetify2系の場合)
  • サイドメニューコンポーネントの作成
  • サイドメニューコンポーネントの作成(Vuetify2系の場合)
  • サイドメニューコンポーネントの解説
  • Vuexの解説
  • メニューの開閉状態の管理 ストアの実装
  • メニューの開閉状態の管理 コンポーネントからのストアの利用
  • メニューの開閉状態の管理 コンポーネントからのストアの利用(Vuetify2の場合)
  • メニューの開閉状態の管理 mapActionsの利用方法
  • メニューの開閉状態の管理 mapActionsの利用方法(Vuetify2系の場合)
  • 連絡先一覧ページの作成
  • 連絡先一覧ページの作成(Vuetify2系の場合)
  • レイアウト修正と サイドメニューへのリンク追加
  • レイアウト修正と サイドメニューへのリンク追加(Vuetify2系の場合)
  • 連絡先追加画面の作成
  • 連絡先追加画面の作成(Vuetify2系の場合)
  • 連絡先追加機能の作成
  • 連絡先追加機能の作成(Vuetify2系の場合)
  • Firebaseとは
  • Firebaseを利用するためのセットアップ
  • Firebaseのライブラリ追加と設定の修正
  • Googleアカウントで ログインするための設定
  • Googleログイン機能の実装
  • Googleログイン機能の実装(Vuetify2系の場合)
  • ログインユーザーの取得機能の実装
  • ログアウト機能の実装
  • ログアウト機能の実装(Vuetify2系の場合)
  • ログイン状態による表示の切り替え
  • ログイン状態による表示の切り替え(Vuetify2系の場合)
  • ログイン状態によるルートの制御
  • ログイン状態によるルートの制御(Vuetify2系の場合)
  • Cloud Firestoreへのデータベースの設定
  • Cloud Firestoreへのデータの保存
  • Cloud Firestoreからのデータ取得
  • 連絡先編集画面へのページ遷移
  • Cloud Firestoreへのデータの保存(Vuetify2系の場合)
  • 連絡先編集フォームへのデータの復元
  • 連絡先データの更新処理
  • 連絡先データの削除処理
  • 連絡先データの削除処理(Vuetify2系の場合)
アプリケーションの公開
  • FirebaseのHostingを使用したアプリケーションのデプロイ