Vue.jsのツボとコツがゼッタイにわかる本

目次

第1章 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の機能

リアクティブシステムとデータバインディング

条件付きレンダリング

リストバインディング

 

第2章 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つ以上の選択肢から1つを選ぶ)

セレクトボックス(プルダウン方式の選択肢)

カレンダー(日付の選択)

応用例1(日付の選択範囲を制限する)

応用例2(レンジ入力とカラー選択を同期する)

制御をサポートする3つの修飾子

2-10 トランジション(表示の切り替えを滑らかにする)

トランジションとは?

CSSトランジション

 

第3章 Vue.jsで商品一覧を描画してみよう!

3-1 商品一覧ページの仕様

初期表示

機能詳細

3-2 モックアップの作成

HTMLとCSSで静的なページを作成する

JavaScriptで絞り込み機能を作成する

JavaScriptで並び替え機能を作成する

3-3 商品データをアプリケーションに結び付ける

Vue.jsを組み込む準備

dataオプションにデータを定義する

構文エラーがないか確認する

3-4 商品データを描画する

出力するHTMLパターン

テンプレート構文で置き換える

うまくいかない例

金額の書式と商品名の改行

3-5 ユーザーの入力に応じて表示を切り替える

フォームコントロールにデータバインドする

絞り込み機能を実装する

並び替え機能を実装する

商品にキー(key)を指定する

第4章 Ajaxで商品データを外部ファイルから読み込もう!

4-1 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で読み込む

通信エラー発生時の処理を追加する

 

第5章 Vue.jsで自動見積フォームを作ってみよう!

5-1 自動見積フォームの仕様

フォームの仕様

5-2 モックアップの作成

HTMLとCSSで静的なページを作成する

JavaScriptで自動計算処理を実装する

5-3 フォームのプログラムにVue.jsを適用する(JavaScript)

Vue.jsを組み込む準備

dataオプションにプロパティを追加する

算出プロパティを追加する

プロパティの初期値を設定する

フィルターを追加する

5-4 フォームのテンプレートにVue.jsを適用する(HTML)

基本料金のデータバインド

オプション料金のデータバインド

合計金額のデータバインド

コンポーネントの動作確認

テンプレートが一瞬見えてしまうのはなぜ?

 

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

新規プロジェクトの作成

モジュール構成の決定

モジュールの作成

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

小学校プログラミング教育の研修ガイドブック

AWS認定資格試験テキスト AWS認定 ソリューションアーキテクト-アソシエイト

関連記事

  1. Instagramでビジネスを変える最強の思考法…

    目次第1章 Instagramでビジネスを変える「基本」を知…

  2. モバイルアプリ開発エキスパート養成読本 (Sof…

    目次第1章 モバイルアプリ開発の基礎知識1‐1 モバ…

  3. JavaScript フレームワーク入門

    目次Chapter1 JavaScript とフレームワーク…

  4. 達人に学ぶSQL徹底指南書 第2版 初級者で終わ…

    目次第1部 魔法のSQL1 CASE式のススメ SQ…

  5. 冒険で学ぶ はじめてのプログラミング

    目次プロローグ 小さな村の大騒動〜東の辺境 トレモロ村〜…

  6. クラウドゲームをつくる技術 ――マルチプレイゲー…

    目次第0章 レンダリング再入門0.1 ゲームプログラ…

  7. 仕事ごっこ ~その“あたりまえ”、い…

    目次第1話 白ヤギさんと黒ヤギさん ~紙…

  8. CSSフレームワーク Bootstrap入門

    目次Chapter1 Bootstrapの基礎知識1…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

最近の記事

タグクラウド

PAGE TOP