はじめに
  • コース紹介
  • 受講オリエンテーション
  • 補足:受講オリエンテーション
  • コースカリキュラムの流れ
  • 学習環境について
  • 補足:学習環境について
  • サンプルコードについて
Vue.jsの基本的な使い方
  • イントロダクション - Vue.jsの基本的な使い方
  • 補足:jsFiddleについて
  • JSFiddle 画面説明
  • Vue.jsの読み込み
  • Vue.jsの開発バージョンと本番バージョン
  • Vueインスタンスの作成
  • データバインディングとは
  • ルートのテンプレートを作成
  • テキストのデータバインディング
  • dataオプションにオブジェクトや配列要素を設定
  • 補足:jsFiddleの利用が便利になる設定
  • jsFiddleの利用が便利になる設定
  • jsFiddle ソースコードの保存・読み込み
  • エラーを自力で解決する方法
  • ディレクティブとは
  • 属性のデータバインディング v-bind
  • 補足:属性のデータバインディング v-bind
  • 条件分岐 v-if
  • 条件分岐 v-show
  • 繰り返しの描画 v-for
  • オブジェクトの繰り返し v-for
  • イベント処理の基本 v-on
  • 双方向データーバインディング v-model
  • コンポーネント
  • 演習:Vue.jsの基本的な使い方のまとめ①
  • 演習:Vue.jsの基本的な使い方のまとめ②
  • 補足:テキストエディタを使った開発
  • 補足:JavaScriptのセミコロンについて
実践演習:TODO管理アプリの開発
  • イントロダクション - TODO管理アプリの開発
  • Vueインスタンスとルートテンプレートの作成
  • 主要な要素の配置
  • 追加ボタンのイベントハンドリング
  • inputのvalueを双方向データバインディング
  • タスクの追加
  • タスク追加後の文字列クリア
  • 未入力なら追加しない
  • リスト表示
  • タスクの完了/未完了の管理
  • スタイルの設定
  • タスクの削除
  • 全体を通して動作確認
実践演習:Bitcoin価格表示アプリの開発 - API連携
  • イントロダクション - 実践演習:Bitcoin価格表示アプリの開発 - API連携
  • 利用するAPIの仕様
  • データを格納するプロパティを作成
  • HTTPクライアント axiosの導入
  • Bitcoin価格をAPIから取得
  • 補足:JavaScriptの bindについて
  • 通信エラーのキャッチ
  • Bitcoin価格の表示
  • 中間まとめ
  • 小数点以下の桁数調整
  • チラツキ防止
  • 通信エラーハンドリング
  • ローディング表示
テンプレート構文
  • イントロダクション - テンプレート構文
  • 様々なテンプレート制御ディレクティブ
  • v-once ディレクティブ
  • v-pre ディレクティブ
  • v-htmlディレクティブ
  • v-cloakディレクティブ
  • v-text ディレクティブ
  • バインディング式
  • JavaScript 式
  • フィルタ(ローカルフィルタ)
  • フィルタ(グローバルフィルタ)
  • フィルタの連結
  • フィルタの引数
  • v-bind 省略記法
算出プロパティ
  • イントロダクション
  • 算出プロパティの基本
  • 算出プロパティとメソッドの比較
  • 算出プロパティのgetterとsetter
  • 算出プロパティのキャッシュ
監視プロパティ(ウォッチャ)
  • イントロダクション
  • 監視プロパティの基本
  • 例題:単位変換アプリ
  • 算出プロパティと監視プロパティの比較
  • 監視プロパティのオプション
  • オプション deep ①
  • オプション deep ②
  • オプション immediate
実践演習:APIを用いたリアルタイムサーチ - 監視プロパティの理解を深める
  • イントロダクション - 実践演習:APIを用いたリアルタイムサーチ
  • 利用するAPIについて
  • 開発の準備
  • 空のオプションの用意