以前にもこちらの記事「Vue.jsの導入と基本に触れてみる」にてVue.jsの導入や基本的な部分に触れていますが、Vue.jsを使っていく上で避けては通れない、Vueインスタンスと単一ファイルコンポーネントについて改めて学んでおきたいと思います。Vue.jsでアプリケーションを開発するときには必要となるケースがほとんどですね。  

Vueインスタンスとは

Vue.jsの機能を使うには、まずVueインスタンスを作成する必要があります。Vueインスタンスで設定や処理を入れていくことで様々な機能を実装できるようになります。具体的には下記のように作成していきます。

const vm = new Vue ({
 // ここに各種オプションを記述する
})

  new VueでVueインスタンスを定義できます。このVueインスタンスは変数に入れておくと便利です。変数名は自由に命名できるのですが、慣例としては「vm」（ViewModelの意味）や「app」などがよく使われるようです。この定義された中にオプションと呼ばれる、様々な設定や処理を入れていくことになります。  

Vueインスタンスで使う主なオプション

作成したVueインスタンスには必要に応じて様々なオプションを設定していく形になります。かなりの数があるのですが最低限覚えておきたいものはしっかり理解しておく必要があります。今回はよく使うものを中心にまとめています。具体的にはVueインスタンス内で下記のようにオブションを構成していく形になります。 【javascript】

const vm = new Vue ({
 el: '#app',
 data: function() {
  message: 'hello world!!'
 },
 computed: {
  computedFunc: function() {
   return // computedオプションでの処理
 },
 created: function() {
  // createdのフックでの処理
 },
 mounted: function() {
  // mountedのフックでの処理
 },
 methods: {
  methodsFunc_01: function() {
   // アプリケーション内で使う処理
  },
  methodsFunc_02: function() {
   // アプリケーション内で使う処理
  }
 }
})

 

el:	Vueインスタンスを紐づける要素を指定する
data:	アプリケーション内で使う情報を登録する
computed:	算出プロパティと呼ばれ、関数によって値などのデータを返し、その値を扱う
created:	Vueインスタンスが作成され、初期化が終わったタイミングで実行される処理を入れる
mounted:	VueインスタンスやコンポーネントのDOM要素が作成されたタイミングで実行される処理を入れる
methods:	Vueのアプリケーションとして使う関数などの処理を入れる

  これ以外にも様々なオプションがありますが、よく使われる重要なポイントとなるのは上記項目になるのではないでしょうか。最低限これらは覚えておきたいですね。   このようにVue.jsを使うには、まずVueインタンスを作成し、その中でいろんなオプションを設定することにより、意図するアプリケーションの動きを実現していく形となります。  

---

  今回はVueインスタンスとそのオプションについてまとめていきましたが、次回記事では引き続き、Vueの単一ファイルコンポーネントについてまとめていきたいと思います。   （参考にさせて頂いたサイト） Vue インスタンス