Vue インスタンスの作成とマウント [Vue.js3.X]

Vue.js The Progressive JavaScript Framework

Vueアプリケーションでは、createApp関数で新しいVueインスタンスを作成するところから始まります。

Vueでアプリケーションを作成する際は、まずはじめにVueインスタンスを作成する必要があります。

ここでは、Vueインスタンスを作成してアプリケーションで使えるようにする方法について紹介します。

Vueインスタンスの作成とマウント

Vue.jsでは、createApp関数を使用して新しいVueのインスタンスを作成します。
作成したインスタンスは、HTML要素(コンテナ)にマウント(mount)して使用します。

Vueインスタンスの作成

Vue.jsを利用してアプリケーションを作成するときは、まずVueインスタンスを作成します。
Vueアプリケーションはこのインスタンスの生成からスタートします。

インスタンスの作成はcreateApp関数を使用して次のように記述します。

createApp関数では、引数にデータ(data)や振舞い(method)を定義することで、アプリケーションの機能が実装できます。

createApp関数を使用して作成したインスタンスは、変数を定義して保持することもできます。

Vue.js バージョン2以前

参考
以前のバージョンのVue.jsでは、Vueのインスタンスは以下のようにVue関数を使用して作成していました。

Vueのインスタンスが作成できたら、次はインスタンスをHTMLの要素にマウントします。

Vueインスタンスのマウント

Vueのインスタンスをマウントすることで、マウント先に指定したHTML要素が、Vueが生成するHTML要素に置き換わります。
これによりVueでHTMLの要素(DOM)が管理できるようになります。

Vueインスタンスの有効範囲

Vueのインスタンス内で定義したデータ(data)や振舞い(method)、算出プロパティ(computed)などの機能は、マウントしたHTML要素の中(マウントした要素とその子孫要素)でのみ使用することができます。

例えば以下のようなHTMLがあるとします。

上記のid属性の値が「app」というdiv要素をVueインスタンスにマウントすると

id属性の値が「app」の中でのみVueインスタンスで定義したデータや処理が利用可能になります。

上記のように要素がネストしている(入れ子になっている)場合でも、ルートとなる親要素とその子孫の要素内で、Vueの機能を使うことができます。

HTML要素をマウントするmountメソッド

VueのインスタンスをHTMLテンプレートの要素にマウントする時は次のように記述します。

mountメソッドでHTMLの要素をマウントする際は、メソッドの引数に「CSSセレクタの文字列」、または「DOM要素のオブジェクト」を指定します。

上記の例では「CSSセレクタの文字列」を使用して、id属性の値が「app」の要素を「’#app’」と指定してマウントしています。

Vueのインスタンスを一旦変数に格納してからマウントする場合は、以下のようなコードになります。

マウントする要素が複数ある場合の動作

マウントする要素が複数ある場合は、対象となる要素の先頭の要素がマウント対象となります。

例えば以下のようなHTMLがあるとします。

上記のHTMLに記載されている要素の中でクラス属性が「app」の要素をマウントすると、以下のようになります。

マウント対象の要素がHTML内に複数存在する場合は、先頭の要素がマウントの対象となりので

最初の <div class=”app”> がマウント対象になります。

HTML内の複数の要素にVueのインスタンスをマウントする場合は、通常複数のインスタンスを生成してマウントします。

Vueインスタンスをマウントする際の注意点

マウントされるHTML要素は、Vueによって生成されたDOMに置き換わるので、Vueのインスタンスをマウントする前にDOMを操作したり、イベントを付与したりすると、意図しない動作になる可能性があります。

Vue.js バージョン2以前

参考
以前のバージョンのVue.jsでは、インスタンスは以下のようにelオプション、または$mount関数を使用してマウントしていました。

まとめ

さいごに「Vue インスタンスの作成」と「インスタンスのマウント」についてポイントを整理しておきます。

  • Vue.jsではVueインスタンスを作成することでアプリケーションが始まる
  • Vueインスタンスの作成にはcreateAppメソッドを使用する
  • createAppメソッドの引数にデータや振舞いなどの機能を定義していく
  • 作成したインスタンスはHTML要素にマウントする
  • インスタンスをマウントするにはmountメソッドを使用する
  • mountメソッドの引数にCSSセレクタの文字列やDOM要素のオブジェクトを指定する
  • マウントしたHTML要素はVueが生成するDOMに置き換わる
  • Vueインスタンス内の機能はマウントした要素の内部でのみ利用できる

Vue.jsを利用することで、簡単にWebアプリケーションを開発することができます。
以前にjQueryでのDOM操作や、Microsoft MVCでのサーバーサイドレンダリングで苦労した方は、ぜひVue.jsを利用したアプリケーションの開発を行ってみてください。

今までの苦労がウソのように感じられる瞬間が、きっと訪れると思います。

Vue.js 入門 Tips 一覧