![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
Book > JavaScript > 基礎から学ぶ Vue.js
#html{{
table border="0" cellpadding="5"><tr><td valign="top"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4863542453/vertex9-22/" target="_blank"><img src="
" border="0"></a></td><td> </td><td valign="top"><a href="https://www.amazon.co.jp/exec/obidos/ASIN/4863542453/vertex9-22/" target="_blank">基礎から学ぶ Vue.js</a><br>mio<br>シーアンドアール研究所<br>2018-05-29<br>￥ 3,694</td></tr></table>
}}
01 Vue.jsについて
●実際にVue.jsを採用した現場の声
●なぜVue.jsなのか？
●フレームワークとは？
02 Vue.jsのキーコンセプト
●親しみやすいテンプレート
●データバインディング
●「v-」からはじまるディレクティブ
●コンポーネント指向の画面構築
03 豊富なリソースを活用しよう
●Element
●Onsen UI
04 Vue.jsのインストール
●vue.jsファイルを読み込む
●学習用のファイル
●Vueアプリケーションの作成
[POINT] 始める前からエラーが出てしまった場合
05 Vue.jsの基本機能
●テキストのバインディング
●繰り返しの描画
●イべントの利用
●フォーム入力との同期
●条件分岐
●トランジション＆ア二メーション
06 オプションの構成を見てみよう
●基本的なオプションの構成
●el - マウントする要素
●data - データ
●computed - 算出プロパティ
●created - ライフサイクルフック
●methods - メソッド
[COLUMN] いつ、どこに、「new Vue()」したらよいの？
□まとめ
07 基本のデータバインディング
●リアクティブデータって何？
●リアクティブなデータの定義
08 テキストと属性のデータバインディング
●テキストのデータバインディング
●属性のデータバインディング
[POINT] データの内容の確認
●データの更新
●クリックで力ウンターを増やそう
[COLUMN] thisは今、何を指している？
●クラスとスタイルのデータバインディング
●複数の属性のデータバインディング
●SVGのデータバインディング
[POINT] よくわからないけどエラーが起きた！
09 テンプレートにおける条件分岐
●v-ifとv-showの違いと使い分け方
●<template>タグによるv-ifグループ化
●v-else-ifおよびv-elseによるグループ化
10 リストデータの表示と更新
●要素を繰り返し描画する
[POINT] オブジェクトが処理される順序（公式ガイドより）
●キーの役割
[POINT] 不変でユ二ークなキーを設定しよう
●繰り返し描画しながら、さまざまな条件を適用する
●リストの更新
[POINT] 配列インデックスを使って操作してはいけないケース
[COLUMN] Vue.setについて
●ユ二ークキーを持たない配列
●オプションにデータを持たないv-for
●文字列に対するv-for
●外部からデータを取得する
11 DOMを直接参照する$elと$refs
●$elの使い方
●$refsの使い方
●$elや$refsは一時的な変更！
12 テンプレート制御ディレクティブ
●v-pre
●v-once
●v-text
●v-html
[POINT] 「v-html」「テンプレート」は信頼できるコンテンツに
●v-cloak
[COLUMN] 仮想DDMって何？
□まとめ
13 イべントハンドリング
●メソッドイべントハンドラ
●インラインメソッドハンドラ
●使用可能なイべント
●フォーム入力の取得
●イべント修飾子
●キー修飾子
●システム修飾子
14 フォーム入力バインディング
●v-modelの使い方
●Vue.jsの双方向データバインディング
●v-modelで受け取るデータの型
[POINT] v-modelを使うときは属性の値は使われない
●復数行テキスト
●チェックボックス
●ラジオボタン
●セレクトボックス
●画像ファイル
●その他の入力タイプ
●修飾子
15 マウント要素外のイべントと操作
●スクロールイべントの取得
●スムーススクロールの実装
[COLUMN] Vue.js以外からのイべントの受け取り
□まとめ
16 算出プロパティで処理を含むデータを作成する
●算出プロパティの使い方
●算出プロパティを組み合わせて使用しよう
●ゲッターとセッター
●算出プロパティのキャッシュ機能
●リストの絞り込みに利用しよう
●ソート機能を追加しよう
17 ウォッチャでデータを監視して処理を自動化する
●ウォッチャの使い方
●一度だけ動作するウォッチャ
●実行頻度の制御
●複数の値を監視する
[POINT] オブジェクト型の古い値との比較方法
●フォームを監視してAPIからデータを取得しよう
18 フィルタでテキストの変換処理を行う
●フィルタの使い方
●フィルタに引数を持たせる
●複数のフィルタをつなげて使用する
19 力スタムディレクティブでデータを監視しながらDOMを操作する
●力スタムディレクティブの使い方
●使用可能なフック
●動画の再生を操作する例
●前の状態と比較して処理を行う
20 nextTickで更新後のDDMにアクセスする
●nextTickの使い方
●更新後のDOMの高さを取得しよう
□まとめ
21 コンポーネントとは
●コンポーネントは設計図
●コンポーネントの再利用
22 コンポーネントの定義方法
●コンポーネントの登録
[POINT] コンポーネントを定義をするタイミング
●コンポーネントのオプション
●コンポーネントインスタンス
23 コンポーネント間の通信
●親子コンポーネント
●親子間のデータフロー
●親から子
●子から親
[COLUMN] $emitで渡したデータの変化
●非親子コンポーネント
●子コンポーネントを参照する「$refs」
●コンポーネントの属性のスコープ
24 スロットを使ったコンポーネントの力スタマイズ
●デフオルトスロット
●名前付きスロット
●スコープ付きスロット
25 コンポーネントの双方向データバインディング
●コンポーネントのv-model
●.syncこよる双方向データバインディング
26 テンプレートの定義方法
●テンプレートの種類
●テンプレートがDOMと認識されるケース
27 その他の機能やオプション
●関数型コンポーネント
●動的コンポーネント
●共通処理を登録するMixin
●コンポーネントのライフサイクル
●keep-aliveで状態を維持する
[COLUMN] コンポーネントの依存について
□まとめ
28 トランジションとは
●動作デモについて
●基本的なトランジションの使い方
●スタイルを定義して動かしてみよう
●トランジションクラス名とクラスのプレフイックス
●初期描画時にもトランジションを行う
29 単一要素トランジション
●単一要素トランジションで使用するトランジションクラス
●EnterとLeaveで別々のスタイルを定義する
●複数の要素をグループ化する
●EnterとLeaveのタイミングを変更する
●キーの変化によるトランジションの発動
30 リストトランジション
●リストトランジションで使用するトランジションクラス
●移動トランジション
●LeaveとMoveは同時に発生することがある
31 SVGのトランジション
●SVGをトランジションで切り替えよう
32 トランジションフック
●使用できるトランジションフック
●Vue.js側でCSS操作を行わないようにする
□まとめ
33 アプリケーションを拡張しよう
34 Vue CLIとは
●ソースコードを分けて管理
●webpackとは
[COLUMN] なぜ抽象化が必要なの?
35 単一ファイルコンポーネントとは
●スコープ付きCSS（Scoped CSS）
●外部ファイルの読み込み
●他のマークアップ言語やスタイルシート言語の使用
●本書におけるコーディングスタイル
36 ES2015モジュールの書き方
●モジュールを定義する
●モジュールを使用する
[COLUMN] 単一ファイルコンポーネントの正体
37 Node.Jsの導入
●npmとは
●Babelとは
38 Vue CLIの導入
●新しいプロジェクトの作成
●フォルダとファイルの構成
●開発サーバーを起動する
●ホットリロード
●プロジェクトをビルドする
●開発時のAPIのパスの統一やクロスドメイン対策
39 Vue.jsプラグイン
●Vue.jsプラグインの使い方
●プラグインを自作してみよう
40 ES2015で書いてみよう
●変数宣言の書き方
●関数とメソッドの書き方
●テンプレートリテラル
●オブジェクトプロパティのショートハンド
●分割代入
●スプレッド演算子
●配列メソッド
●Promise
□まとめ
41 Vuexとは
●Vuexを導入するメリット
●Vuexのインストール
42 シンプルなストア構造
●ストアをVueアプリケーションに登録する
●Vuex内のインスタンスの参照方法
43 コアコンセプト
●ステート（state）
●ゲッター（getter）
●ミューテーション（mutations）
●アクション（actions）
●Vuexのルール
[COLUMN] アクションで非同期処理をするのはなぜ？
44 コンポーネントでストアを使用しよう
●メッセージを使用する
●メッセージを更新する
[COLUMN] Vuexは初期段階で検討しよう
●ステートやゲッタ一にv-modelを使用する
●コンポーネントとストアをバインドするへルパー
45 モジュールで大きくなったストアを分割する
●モジュールの使い方
●同一のミューテーションタイプ
●ネームスペース
●モジュールのネスト
●ネームスペース付きモジュールから外部へのアクセス
●モジュールをファイルごとに分ける
●モジュールの再利用
46 その他の機能やオプション
●ストアの状態を監視する
●Strictモードで開発する
●Vuexでホットリロードを使用する
[COLUMN] コンポーネントとどう切り分けたらよい？
□まとめ
47 Vue Routerとは
●シングルページアプリケーション
●Vue Routerのインストール
●組み込みコンポーネント
48 シンプルなSPA構造
●URLにハッシュを付けない
●ルーティング用プロパティ
49 ルートの定義とオプション
●名前付きのルート
●パラメータ
●クエリー
●メタフィールド
●リダイレクト
50 ナビゲーションの作成
●テンプレートによるナビゲーション
●プログラムによるナビゲーション
51 パラメータ付きの動的ルートからコンテンツを作成しよう
[POINT] ページコンポーネントの構成
●パターンマッチのルーティング
●パラメータをpropsとしてコンポーネントに渡す
●コンテンツを表示する
52 ネストされた複雑なページを作成しよう
●ネストされたルートの定義
●データの共有にはVuexを使用する
●親ルート用コンポーネントの定義
53 ナビゲーションガード
●ナビゲーションガードの引数
[POINT] ナビゲーションガードのトリガについて
●ルート単位のガード
●グローバルのガード
●コンポーネントのガード
●完全なナビゲーション解決フロー
54 ページの遷移にエフェクトを適用する
●簡単なトランジション
●非同期読み込みを含むトランジション
55 その他の機能やオプション
●遷移前のデータの読み込み
●コンポーネントの非同期読み込み
●ルートのアクセス制限
[POINT] ソースコードに大事な情報を書かない
●スクロールの振る舞いを操作する
[COLUMN] SPAの注意点
□まとめ
■サポートページ（サンプルコードなどの掲載）
●mio
群馬県出身
株式会社チャーム ウェブデザイナー・ウェブエンジニア
会社や自宅では犬猫に囲まれつつ、フリーランス活動、勉強会の講師など。
■Webサイト
| 頁+行 | 章節 | 項目 | 日付 |
