概要

Vue コンストラクタ

Vue コンストラクタは、Vue.js の中核です。これは、Vue インスタンスの生成を可能にする、コンストラクタ関数です。Vue インスタンスの生成は、簡単です:

1
var vm = new Vue({ /* options */ })

Vue インスタンスを生成するときは、DOM 要素に関する情報やデータオブジェクト、mixin メソッド、ライフサイクルコールバックなどの情報を含むオプションオブジェクトを渡す必要があります。すべてのリストは、コンポーネントオプションを参照してください。

各 Vue インスタンスは、本質的には ViewModel です(それ故に、変数名 vm がドキュメントの各所で見られます)。各インスタンスは関連する DOM 要素 $el をもち、これはおおまかに言って MVVM の V に該当します。また、関連する JavaScript オブジェクト $data も持っており、これは MVVM の M に該当します。M における変更によって、V が更新されます。Two way (双方向)バインディングでは、V におけるユーザーの入力が M の更新を引き起こします。Vue インスタンスで利用可能なプロパティについてより詳細な説明は、インスタンスプロパティを参照してください。

それぞれの Vue インスタンスは、データ監視、イベント通信や DOM 操作をするいくつかのインスタンスメソッドを持っています。

Vue コンストラクタそのものはグローバル API を公開しており、Vue クラスの拡張や、グローバル設定、コンポーネントやディレクティブ、フィルタなどのグローバルなカスタムの資産を登録することを可能としています。

初期化

インスタンスの生成の際に el オプションが与えられた場合、Vue インスタンスは直ちにコンパイルの段階に入ります。さもなければ、コンパイルが開始される前に、vm.$mount() が呼ばれるのを待ちます。コンパイルの段階の間に、Vue は DOM をひと通り見て、遭遇したディレクティブを収集します。一旦紐付けられると、それらの DOM ノードは Vue インスタンスによって管理されていると言えます。ひとつの DOM ノードはひとつの Vue インスタンスによってのみ管理され、一回より多くコンパイルされるべきではありません。

データのプロキシ

Vue インスタンスはその $data オブジェクトにプロキシアクセスするため、もし vm.$data.msg があれば、vm.msg としてもアクセスすることができます。これは少し不思議に見えますが、完全に省略可能です。より明示的なデータアクセスのために vm.$data.msg とすることも可能です。しかし、vm は他の Vue インスタンスからはデータとして監視できないため、vmvm.$data との違いに気をつけることは依然として重要です。

データオブジェクトはひとつの Vue インスタンスのみに属する必要がないことも知っておくべきです。つまり、複数の ViewModel は $data の直下であろうと、ネストされた下のデータであろうと、同じデータを監視することができます。これは複数のコンポーネントが共有されたグローバルなオブジェクトの状態に反応しなければならないときに便利です。