ネストされたルート定義をすると、より複雑な画面遷移をすることができる。 これまでの「Product」のコンポーネントは、商品詳細と商品レヴューを表示させるためのベースとし、その中に３つのコンポーネントを定義する。 フォルダ構成としては、viewsの中にH…

簡単な商品一覧ページのサンプルを作る。 src/views/Home.vueとsrc/main.js、src/App.vueは前回と同じ。 まず商品一覧ページと商品詳細ページのコンポーネントを作る。

Vue Router を導入してごく単純なSPAを構築するまで。

ストアの状態監視 Vuexで定義されたアプリケーションレベルのウォッチャは、コンポーネントより先に呼び出される。

モジュールの機能を使って、ストアを名前空間で分割し管理することができる。

ゲッターやミューテーションを使うロジックを、コンポーネントの算出プロパティやメソッドに全て記述するのは冗長になる。そういう場合にヘルパーが用意されている。 あらかじめ必要なヘルパーを読み込む。

コンポーネントでストアを使う 親子間コンポーネントで状態管理する例 まずsrc/store.jsを定義

Vuex は Vueアプリケーションで使うデータとその状態を一元管理する「状態管理」のための拡張ライブラリ。 深くネストされたコンポーネント構造では、コンポーネント間でpropsと$emitを使って各コンポーネントどうしのやり取りをする必要があるが、Vuex を使…

Vue CLI のインストール Node.js と npm はインスト済みとする。 次のコマンドで Vue CLI をグローバルインストール $ npm install -g vue-cli

SVGのトランジション SVGでマークアップされた要素にトランジション。 図形が入れ替わる。

リストの要素をグループ化して、追加、削除、移動のアニメーションを行う。 <transition-group>タグを使いtag属性でタグ名を指定する。tag属性を省略するとspan要素でラップされる。リストトランジションではキーの設定が必須。</transition-group>

<transition>タグの中に１つだけ存在する要素に対し使用するものを「単一要素トランジション」と呼ぶ。</transition>

トランジション用クラスの適用 トランジション効果を適用したい要素を<transition>タグで囲むことで、トランジション用のクラスが適用される。</transition>

関数型コンポーネント functionalオプションを付けることで、関数型コンポーネント（状態とインスタンスを持たない）を定義できる。

テンプレートの種類 templateオプション 今まで出てきた書き方。ES2015が使えるなら、テンプレートリテラルが便利 Vue.component('my-calendar', { template: `<div> <p>..........</p> </div>` }); 単一ファイルコンポーネントを使わない場合は、このtemplateオプションが推奨…

親子間でデータを受け渡ししたい場合、親から子へはpropsを介して渡す、子から親へはイベントを$emitするという決まりになっていた。 $emitを介さずに子からpropsで渡された値を更新しようとするとエラーになった。これは親のデータを子から簡単に変更できて…

スロットという機能を使って、親コンポーネントから子コンポーネントにテンプレートの一部を差し込むことができる。 これによって子コンポーネントの一部分をカスタマイズしたりできる。

$refsを使って、親から子のメソッドを使ったり、イベントを発火させたりできる。

カスタムイベントと$emit 子コンポーネントの状態に対応して親コンポーネントに何らかのアクションを起こさせるとか、子コンポーネントが持つデータを親に渡すなどの場合、カスタムイベントとインスタンスメソッドの$emitを使う。

propsで受け取るデータのデータ型を指定する propsで受け取るデータのデータ型を指定しておくことができる。受け取るデータ名にStringなどのデータ型を指定しておく。

コンポーネントのスコープ コンポーネントのインスタンスはそれぞれが自分のスコープを持っている。 スコープ内のデータやメソッドには、thisを使ってアクセスできる。 this.message // スコープ内データ this.update // スコープ内メソッド コンポーネント…

コンポーネントとは、機能を持つUI部品ごとにテンプレートとJavaScriptを１つのセットにして、開発管理するための仕組み。

仮想DOMによるデータの更新は非同期に行われるため、更新後のDOMを操作するためにはDOMの更新を待ち受ける仕組みであるnextTickを使用する。

カスタムディレクティブの仕組みを使って、v-bindのようなディレクティブを自作することができる。 ただしデータバインディングと違い仮想DOMではないので、$elや$refsと同様に描画の最適化はされない。

フィルタでテキストの変換処理ができる。 フィルタはローカルまたはグローバルに登録して使用する。ただしthisへのアクセスはできない。

コンポーネントのwatchオプションに、監視するデータの名前と、変化した時に呼び出されるハンドラ関数を定義する。新旧データ比較のために、ハンドラの引数として第一引数に「新い値」、第二引数に「古い値」を受け取れる。

算出プロパティ 算出プロパティはcomputedプロパティに定義した関数で任意のデータを処理するもの。

スクロールイベントを制御する マウントした要素の外ではv-onディレクティブが使えない。スクロールイベントなど window や body でのイベントをVueインスタンスから制御するには、addEventListenerなどを使って工夫する。

v-modelディレクティブ v-modelディレクティブを使って、フォームの入力値や選択値をデータと同期させる（双方向データバインディング）。

キー修飾子 特定のキーが入力された時のみハンドラが呼び出されるようにする。 一般的によく使用されるキーはエイリアスが登録されている。