目次

第１章　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　商品一覧を単一ファイルコンポーネントで再構築する

新規プロジェクトの作成

モジュール構成の決定

モジュールの作成

アプリケーションを運用環境で公開する