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. フツーの人がYouTube登録者数1万人を突破す…

    目次Part1 これからYouTubeを始める方へ1…

  2. Web技術 最強の指南書

    目次第1部 Webの通信プロトコルを学ぶ第1章 HT…

  3. Effective C# 6.0/7.0

    目次第1章 C#言語イディオム項目1 ローカル変数の…

  4. Java 第3版 実践編 アプリケーション作りの…

    目次第1章 パッケージとJava API1-1 パッ…

  5. OAuth徹底入門 セキュアな認可システムを適用…

    目次第1部 はじめの一歩1OAuth2.0とは何か?…

  6. マンガでやさしくわかる生産管理

    目次プロローグ 生産管理とは何か0-1 製品・工程・…

  7. プログラミングをわが子に教えられるようになる本

    目次超画期的な教材との出会い -「はじめに」にかえて…

  8. ドリルの王様 3,4年の楽しいプログラミング 新…

    目次じゅんじょ①じゅんじょ②じゅんじょ③…

最近の記事

  1. れいといちかとまほうのトンネル

タグクラウド

PAGE TOP