目次
第１章 Vue.jsとフレームワークの基礎
1-1 Vue.jsとは？
Vue.jsとは？
フレームワークとは？
なぜフレームワークを使うのか？
Vue.jsの特徴
1-2 Vue.jsを学ぶメリット
UI構築はフロントエンド役目になった
DOMがウェブページとJavaScriptをつなぐ
jQueryでは間に合わない
データ駆動のVue.jsがDOM操作の問題を解決
Vue.jsから利用できるUIコンポーネント
1-3 Vue.jsの概要
Vue.jsの機能
リアクティブシステムとデータバインディング
条件付きレンダリング
リストバインディング
第２章 Vue.jsをはじめよう！
2-1 Vue.jsのインストール
Vue.js本体を入手しよう
Vue.jsをアプリケーションに読み込もう
2-2 基本のファイル構成
一般的なアプリケーションの設計モデル
Vue.jsアプリケーションの設計モデル
Vue.jsアプリケーションのファイル構成
Vue.jsアプリケーションの雛形
2-3 Vue.jsのオプション構成と役割
オブジェクトとは？
JavaScriptのオブジェクト表記
Vueのオプション構成
2-4 レンダリング（ページを描画する）
テキストにバインドする
属性にバインドする
スタイル（style）属性にバインドする
クラス（class）属性にバインドする
リストデータをバインドする
条件付きで描画する
2-5 フィルター（描画用にデータを加工する）
フィルターとは？
グローバルスコープにフィルターを登録する
ローカルスコープにフィルターを登録する
複数のフィルターをつなげる
2-6 算出プロパティ（再利用可能な加工済みデータ）
算出プロパティとは？
算出プロパティはキャッシュされる
2-7 イベントハンドリング（ユーザーの操作を検知する）
イベントとは？
よく使われるイベント
イベントハンドラの登録（v-onディレクティブ）
コンポーネントの外側のイベントハンドリング
イベントハンドラが受け取る引数
2-8 ウォッチャ（データの変更を監視する）
ウォッチャとは？
ウォッチャの登録（watchオプション）
算出プロパティとウォッチャの使い分け
ウォッチャで算出プロパティを監視する
2-9 フォーム入力バインディング（データと入力を同期する）
双方向のデータバインド
テキストボックス（改行できない入力欄）
テキストエリア（改行できる入力欄）
チェックボックス
ラジオボタン（２つ以上の選択肢から１つを選ぶ）
セレクトボックス（プルダウン方式の選択肢）
カレンダー（日付の選択）
応用例１（日付の選択範囲を制限する）
応用例2（レンジ入力とカラー選択を同期する）
制御をサポートする３つの修飾子
2-10 トランジション（表示の切り替えを滑らかにする）
トランジションとは？
CSSトランジション
第３章 Vue.jsで商品一覧を描画してみよう！
3-1 商品一覧ページの仕様
初期表示
機能詳細
3-2 モックアップの作成
HTMLとCSSで静的なページを作成する
JavaScriptで絞り込み機能を作成する
JavaScriptで並び替え機能を作成する
3-3 商品データをアプリケーションに結び付ける
Vue.jsを組み込む準備
dataオプションにデータを定義する
構文エラーがないか確認する
3-4 商品データを描画する
出力するHTMLパターン
テンプレート構文で置き換える
うまくいかない例
金額の書式と商品名の改行
3-5 ユーザーの入力に応じて表示を切り替える
フォームコントロールにデータバインドする
絞り込み機能を実装する
並び替え機能を実装する
商品にキー（key）を指定する
第４章 Ajaxで商品データを外部ファイルから読み込もう！
４-１ AjaxとJSON形式
Ajaxとは？
JSONとは？
4-2 JavaScriptでAjaxを利用する
JSONデータを準備する
イベントハンドラを作成する
XMLHttpRequestオブジェクトの使い方
クロスドメイン制約への対応
レスポンスを処理する
4-3 jQueryでAjaxを利用する
jQueryとは？
イベントハンドラを作成する
JSONを取得する
レスポンスを処理する
4-4 JSONPでクロスドメイン制約を回避する
JSONPとは？
JSONPをAjaxで非同期に読み込む
4-5 Vue.jsアプリケーションにでAjaxを利用する
商品リストをAjaxで読み込む
通信エラー発生時の処理を追加する
第５章 Vue.jsで自動見積フォームを作ってみよう！
5-1 自動見積フォームの仕様
フォームの仕様
5-2 モックアップの作成
HTMLとCSSで静的なページを作成する
JavaScriptで自動計算処理を実装する
5-3 フォームのプログラムにVue.jsを適用する（JavaScript）
Vue.jsを組み込む準備
dataオプションにプロパティを追加する
算出プロパティを追加する
プロパティの初期値を設定する
フィルターを追加する
5-4 フォームのテンプレートにVue.jsを適用する（HTML）
基本料金のデータバインド
オプション料金のデータバインド
合計金額のデータバインド
コンポーネントの動作確認
テンプレートが一瞬見えてしまうのはなぜ？
第６章 Vue.jsのコンポーネントをモジュール化してみよう！
6-1 コンポーネントの基本
コンポーネントの定義方法
データの受け渡し（親コンポーネントから子コンポーネント）
データの受け渡し（子コンポーネントから親コンポーネント）
コンポーネントのイベントハンドリング
コンポーネントを繰り返し描画する（v-for）
コンポーネントの配置場所に関する制限
6-2 商品一覧をコンポーネント化する
コンポーネントの親子関係を決める
モジュールを分割する
データの持たせ方を決める
コンポーネントの動作仕様を決める
ルートコンポーネントの作成
フィルターの作成
商品コンポーネントの作成
ヘッダーコンポーネントの作成
商品一覧コンポーネントの作成
コンポーネントの完成
6-3 単一ファイルコンポーネントとは？
単一ファイルコンポーネントの例
export defaultとは？
scopedとは？
6-4 開発環境「Vue CLI」を導入する
Vue CLIとは？
開発環境（Vue CLI）の導入
Vue CLIの基本的な使い方
デフォルトプリセットで作成したプロジェクトのモジュール構成
6-5 商品一覧を単一ファイルコンポーネントで再構築する
新規プロジェクトの作成
モジュール構成の決定
モジュールの作成
アプリケーションを運用環境で公開する
