Vue.js 学習メモ
これは何か
Vue.js の公式ドキュメントを読んだときのメモです。
気になったところ、後でもう一度確認が必要そうなもの、など。
Vue.js のバージョンは v2.5.17。
Vue.js ガイド
基本的な使い方
- テンプレート構文
- 算出プロパティとウォッチャ
- クラスとスタイルのバインディング
- 条件付きレンダリング
- vue-101-conditional - StackBlitz
- デモ
- key による再利用可能な要素の制御
しかしこれは必ずしも望ましいことでないかもしれないので、Vue は”この 2 つの要素は完全に別個のもので、再利用しないでください” と伝える方法を提供します。それは、一意の値を持つ key 属性を追加するだけです:
v-show は
<template>
要素をサポートせず、v-else とも連動しないということに注意してください。ー般的に、v-if はより高い切り替えコストを持っているのに対して、 v-show はより高い初期描画コストを持っています。
- vue-101-conditional - StackBlitz
- リストレンダリング
- vue-101-list - StackBlitz
- デモ
繰り返される DOM の内容が単純な場合や、性能向上のために標準の動作に意図的に頼る場合を除いて、可能なときはいつでも v-for に key を与えることが推奨されます。
- 配列の変化を検出
- オブジェクトの変更検出の注意
- フィルタ/ソートされた結果の表示
- 範囲付き v-for
<template>
での v-for- v-for と v-if
それらが同じノードに存在するとき、 v-for は v-if よりも高い優先度を持ちます。これは v-if がループの各繰り返しで実行されることを意味します。
- コンポーネントと v-for
- vue-101-list - StackBlitz
- イベントハンドリング
- vue-101-events - StackBlitz
- デモ
- イベント修飾子
.stop
,.prevent
,.capture
,.self
,.once
,.passive
.passive 修飾子は特にモバイルでのパフォーマンスを改善するのに有用です。
- passive なリスナー を用いたスクロールのパフォーマンスの改善
- キー修飾子
- システム修飾子キー
.exact 修飾子
- マウスボタンの修飾子
ViewModel が消去されるときに、すべてのイベントリスナーは自動で削除されます。手動でそれらの消去をおこなうことを気にする必要はありません。
- vue-101-events - StackBlitz
- フォーム入力バインディング
- コンポーネントの基本
Components In-Depth
- vue-101-components-in-depth - StackBlitz
- デモ
- コンポーネントの登録
- 基底コンポーネントの自動グローバル登録
require.context
- (後でよむ)
- 基底コンポーネントの自動グローバル登録
- プロパティ
多くの場合、プロパティの値を変化させたい場合には、 2 つのケースがあります:
- プロパティのバリデーション
- プロパティでない属性
- カスタムイベント
- スロット
- 動的 & 非同期コンポーネント
動的コンポーネントの再生成は通常は便利な挙動です。しかし、このケースでは最初に作成されたタブコンポーネントのインスタンスがキャッシュされるのが好ましいでしょう。この解決策として、動的コンポーネントを
<keep-alive>
要素でラップすることができます:- 非同期コンポーネント
1つの推奨される方法は、 非同期コンポーネントと Webpack の code-splitting の機能 を使用することです:
- ロード状態のハンドリング
- 特別な問題に対処する
- 要素 & コンポーネントへのアクセス
$root
,$parent
,ref
属性- 依存性の注入
provide
,inject
- https://jp.vuejs.org/v2/api/#provide-inject
- プログラム的なイベントリスナー
$on
,$once
,$off
- 循環参照
- 代替テンプレート定義
inline-template
text/x-template
- 更新をコントロールする
$forceUpdate
$v-once
- 要素 & コンポーネントへのアクセス
トランジションとアニメーション
- (必要になったら)
再利用と構成
- vue-101-reusability-and-composition - CodeSandbox
- デモ
- ミックスイン
コンポーネントがミックスインを使用するとき、ミックスインの全てのオプションはコンポーネント自身のオプションに”混ぜられ”ます。
- オプションのマージ
- グローバルミックスイン
多くのケースでは、上記の例のような、カスタムオプションを処理するようなものに使用すべきです。また、重複適用を避けるため プラグイン としてそれらを作成することをお勧めします。
- カスタムオプションのマージストラテジ
カスタムオプションがマージされるとき、それらは単純に既存の値を上書きするデフォルトのストラテジを使用します。カスタムロジックを使用してカスタムオプションをマージする場合、Vue.config.optionMergeStrategies をアタッチする必要があります:
- カスタムディレクティブ
- 基本
- フック関数
bind
,inserted
,update
,componentUpdated
,unbind
- ディレクティブフック引数
el
,binding
,vnode
,oldVnode
el を除いて、これらの全てのプロパティは読み込みのみ (read-only) で変更しないものとして扱わなくてはいけません。フックを超えてデータを共有する必要がある場合は, 要素の
dataset
を通じて行うことが推奨されています。
- フック関数
- 関数による省略記法
- オブジェクトリテラル
あなたのディレクティブが複数の値を必要ならば、JavaScript オブジェクトリテラルも渡すことができます。
- 基本
- 描画関数とJSX
- ノード、ツリー、および仮想 DOM
全ての要素はノードです。全てのテキストはノードです。コメントさえもノードです!
- 仮想 DOM
Vue は、実際の DOM に加える必要がある変更を追跡する仮想 DOM を構築することで、これを達成します。
return createElement('h1', this.blogTitle)
- createElement 引数, 素の JavaScript によるテンプレートの書き換え, JSX, 関数型コンポーネント, テンプレートのコンパイル
- (後で読む)
- ノード、ツリー、および仮想 DOM
- プラグイン
- フィルター
ツール
- (後でよむ)
スケールアップ
内部
移行
- (必要になったら)
その他
- (必要になったら)
その他のドキュメントへのリンク
- スタイルガイド — Vue.js
- はじめに — Vue.js
- クックブック