Vue.jsのオプション構成（インスタンスのプロパティ）

ここでは、Vue.jsのオプション構成（インスタンスのプロパティ）について紹介します。

1 Vueインスタンスの作成
- 1.1 Vueクラスの書式とcreateAppメソッドの書式
2 Vueインスタンスの引数として使用できるプロパティ
- 2.1 Vueクラスの書式とcreateAppメソッドの書式
3 Vueのオプション構成
- 3.1 Vueオプション構成

Vueインスタンスの作成

Vue.jsのアプリケーションでは、Vue.jsのバージョン2以前ならVueクラス（Vue関数）、Vue.jsのバージョン3以降ならcreateAppメソッドでインスタンスを生成するところから始まります。

インスタンスの中で使用するデータ（属性）やメソッド（振る舞い）は、あらかじめインスタンスの引数（Vueクラスのコンストラクタの引数、またはcreateAppメソッドの引数）として渡します。

引数は単純な数値や文字列値などのリテラル値では扱いきれないため、役割に応じた名前を持つプロパティとして、オブジェクト表記で定義されます。
そのため、Vueクラス、createAppメソッドは、「new Vue(a, b, c…)」「createApp(a, b, c…)」の形式ではなく、引数にオブジェクトを受け取ることになっています。

Vueクラスの書式とcreateAppメソッドの書式

Vueクラスの書式

var vm = new Vue({オブジェクト});

1	var vm = new Vue({オブジェクト});

createAppメソッドの書式

Vue.createApp({オブジェクト})

1	Vue.createApp({オブジェクト})

Vueインスタンスの引数として使用できるプロパティ

Vueインスタンスが持てる主なプロパティ（引数）には以下のものがあります。
ここでは、一覧表にまとめておきます。

プロパティ名	役割	備考
el	VueインスタンスをどのHTML要素に結び付けるを定義	v2以前で使用
data	Vueインスタンスが保持するデータ（状態）を定義する
methods	Vueインスタンスのメソッド（振る舞い）を定義する
filters	Vueインスタンスが持つフィルターを定義する	v2以前で使用
computed	Vueインスタンスが持つ算出プロパティを定義する
watch	Vueインスタンスが持つウォッチャを定義する
components	Vueインスタンスが持つコンポーネントを定義する
props	コンポーネントが持つプロパティを定義する
emits	コンポーネントが発行するイベントを定義する	v3で追加
ライフサイクルフック	Vueインスタンスのライフサイクルフック	下表を参照

Vue ライフサイクルフック

フック名	発生のタイミング	備考
beforeCreate	Vueインスタンスが生成された直後に発生
created	リアクティブデータを監視する準備が終わった時
beforeMount	VueインスタンスがDOMと結びつく直前
mounted	VueインスタンスがDOMと結びついた直後
beforeUpdate	リアクティブデータが更新され、DOMに反映される直前
updated	リアクティブデータが更新され、DOMに反映された直後
beforeUnmount	Vueインスタンスのマウントが解除される直前	v3で追加
unmounted	Vueインスタンスのマウントが解除された直後	v3で追加
beforeDestroy	Vueインスタンスが破棄される直前	v2以前で使用
destroyed	Vueインスタンスが破棄された直後	v2以前で使用

Vueクラスの書式とcreateAppメソッドの書式

Vueクラスの書式

var vm = new Vue({プロパティ名: 値, プロパティ名: 値, プロパティ名: 値,...});

1	var vm = new Vue({プロパティ名: 値, プロパティ名: 値, プロパティ名: 値,...});

createAppメソッドの書式

Vue.createApp({プロパティ名: 値, プロパティ名: 値, プロパティ名: 値,...})

1	Vue.createApp({プロパティ名: 値, プロパティ名: 値, プロパティ名: 値,...})

Vueのオプション構成

上記の表に示したプロパティ以外にも、独自のディレクティブを定義するdirectivesなど、多くのプロパティがVue.jsではサポートされています。
これらのプロパティは「オプション」と呼ばれており、Vue.jsの公式ドキュメントには

Vue インスタンスを生成するには、オプションオブジェクトを渡します。

と記載されています。

Vueオプション構成

Vueクラスの書式

var vm = new Vue({
  el: '#app',
  data: {
    // インスタンスが保持するデータをここに定義します。
  },
  methods: {
    // インスタンスが持つメソッドをここに定義します。
  },
  filters: {
    // インスタンスが持つフィルターをここに定義します。
  },
  computed: {
    // インスタンスが持つ算出プロパティをここに定義します。
  },
  watch: {
    // インスタンスが持つウォッチャーをここに定義します。
  }
});

var vm = new Vue({

el: '#app',

data: {

// インスタンスが保持するデータをここに定義します。

methods: {

// インスタンスが持つメソッドをここに定義します。

filters: {

// インスタンスが持つフィルターをここに定義します。

computed: {

// インスタンスが持つ算出プロパティをここに定義します。

watch: {

// インスタンスが持つウォッチャーをここに定義します。

}

});

createAppメソッドの書式

Vue.createApp({
  data: {
    // インスタンスが保持するデータをここに定義します。
  },
  methods: {
    // インスタンスが持つメソッドをここに定義します。
  },
  computed: {
    // インスタンスが持つ算出プロパティをここに定義します。
  },
  watch: {
    // インスタンスが持つウォッチャーをここに定義します。
  }
}).mount('#app')

Vue.createApp({

data: {

// インスタンスが保持するデータをここに定義します。

methods: {

// インスタンスが持つメソッドをここに定義します。

computed: {

// インスタンスが持つ算出プロパティをここに定義します。

watch: {

// インスタンスが持つウォッチャーをここに定義します。

}

}).mount('#app')

Vue.js 入門 Tips 一覧

リンク