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. 予算1万円でつくる二足歩行ロボット

    目次第1章 仕様検討[1-1]全体の構成[1…

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

    目次第1章 小学校プログラミング教育の考え方と留意点…

  3. SHIP 医療の現場を支え続けるシップヘルスケア…

    目次第1章 グループの理念と事業グループが掲げる「S…

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

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

  5. 矢沢久雄セレクション アルゴリズム&デ…

    目次Chapter1 つかめ!プログラマの思考法すべ…

  6. ソフトウェアデザイン 2019年9月号

    目次Special Feature1 気になるとこだけまとめ…

  7. Bootstrap 4 フロントエンド開発の教科…

    目次第1章 イントロダクション1.1  Webアプリ…

  8. プログラマのためのGoogle Cloud Pl…

    目次1章 Google Cloud Platformの概要…

コメント

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

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

最近の記事

タグクラウド

PAGE TOP