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

Vueを使用したアプリケーションでは、Vue関数を使ってVueの新しいインスタンスを作成することで、アプリケーションが起動されます。
Vueでアプリケーションを作成する際には、Vueインスタンスの作成が必須になります。

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

1 Vueインスタンスの作成とマウント
- 1.1 Vueインスタンスの作成
- 1.2 Vueインスタンスのマウント
2 補足

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

Vue.jsでは、Vue関数を使用して新しいVueインスタンスを作成します。
作成したVueインスタンスは、HTML要素にマウント（mount）して使用します。

Vueのインスタンスが状態（変数のデータ）の管理と、DOM（ドキュメント・オブジェクト・モデル）要素の管理を行ってくれます。

VueインスタンスがDOMとの関連性を保ってくれるおかげで、開発者はjQueryの時のような煩雑なDOM操作を行うことなく、簡単にDOMの操作を行うことができるようになります。

Vueインスタンスの作成

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

Vueのインスタンスは以下のようにVue関数を使用して作成します。

new Vue({
  // オプション
})

new Vue({

// オプション

})

または、変数を定義して次のようにも記述します。

var vm = new Vue({
  // オプション
})

var vm = new Vue({

// オプション

})

変数名の「vm」はViewModel（ビュー・モデル）の略で、Vueインスタンスを変数に格納する際の名前として、慣用的に使われています。
特に理由がなければ、変数名は「vm」としておきましょう。

公式サイトのドキュメントには、Vue関数で新しいVueインスタンスを作成すると記載されていますが、オブジェクト指向に慣れ親しんだ方にとっては、Vueクラスのインスタンスをnewで作成（生成）すると考えた方がわかりやすいかもしれません。

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

Vueのインスタンスをマウントすることで、マウント先に指定したHTML要素はVueが生成するHTML要素に置き換わります。

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

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

<div id="app">

</div>

</div>

上記の「app」というdiv要素をマウントすると

<div id="app">
  <!--
  この中でのみVueインスタンスで定義した各種機能が利用可能です。
  -->
</div>

<!--

この中でのみVueインスタンスで定義した各種機能が利用可能です。

-->

</div>

となります。

<!-- ルート（親要素） -->
<div id="app">
  <!-- 子要素 -->
  <div id="child">
    <!-- 孫要素 -->
    <div id="grandchild">
      
    </div>
  </div>
</div>

</div>

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

Vueのインスタンスをマウントする際は、次のように記述します。

new Vue({
  el: '#app'
})

new Vue({

el: '#app'

})

「el」オプションを使用することで、要素をマウントすることができます。

要素をマウントする際は、CSSセレクタの文字列、またはDOM要素のオブジェクトを指定します。

上記の例ではidが「app」の要素をelオプションでマウントしています。

Vueのインスタンスをマウントする記述は、以下のように書くこともできます。

new Vue({
}).$mount('#app')

1 2	new Vue({ }).$mount('#app')

$mountメソッドを使用してelオプションと同様にマウントする要素（ここではid）を指定します。

ここまでは、マウントする要素としてHTML内で一意となるidを指定しましたが、HTML内で同名で複数定義されるclassなどを指定することもできます。

<div class="app">
</div>
<div class="app">
</div>
<div class="app">
</div>

</div>

</div>

</div>

new Vue({
}).$mount('.app')

1 2	new Vue({ }).$mount('.app')

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

<div class="app">
  <!-- この要素がマウントされる -->
</div>
<div class="app">
</div>
<div class="app">
</div>

</div>

</div>

</div>

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

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

補足

※本記事で記載した内容は、Vue.js2.X以前のバージョンに対応しています。

Vue.js 入門 Tips 一覧

リンク