はじめに

引き続き、Vue.jsの基礎知識についてアウトプットをしていきます。
今回は、昨日学んだ構文のオプション構成について記述していきます。

基本的なオプションの構成

全ての Vue アプリケーションは、Vue 関数で新しい Vue インスタンスを作成することによって起動。

practice.js

var app = new Vue({
  // mountする要素
  el: '#app',

  // アプリケーションで使用するデータ
  data: {
    message: 'Vue.js'
  },

  // 算出プロパティ
  computed: {
    computedMessage: function() {
      return this.message + '!'
    }
  }

  // ライフサイクルフック
  created: function() {
    // 行いたい処理
  },

  // アプリケーションで使用するメソッド
  methods: {
    myMethod: function() {
      // 行いたい処理
    }
  }
})

practice.js

var app = new Vue({
  // mountする要素
  el: '#app',

「el」はアプリケーションを紐付ける要素のセレクタ。

practice.js

var app = new Vue({

  // アプリケーションで使用するデータ
  data: {
    message: 'Vue.js'
  },

「data」はアプリケーションで使用するデータであり、オブジェクトや配列も登録可能。

practice.js

var app = new Vue({

  // 算出プロパティ
  computed: {
    computedMessage: function() {
　　　　//何か処理をした結果をデータとして返す
      return this.message + '!'
    }
  }

「computed」は「data」と似たように扱うことのできる、関数によって算出されるデータ。

practice.js

var app = new Vue({

  // ライフサイクルフック
  created: function() {
    // 行いたい処理
  },

ライフサイクルフックとは、予め登録した処理を、Vueインスタンスの特定のタイミングで自動的に呼び出すもの。
createdなど様々なライフサイクルフックがあり、使用できるメソッドが決められている。以下はライフサイクルフックの一覧。

メソッド	タイミング
beforeCreate	インスタンスが生成され、リアクティブデータの初期化がされる前
created	インスタンスが生成され、リアクティブデータの初期化がされた後
beforeMount	インスタンスがマウントされる前
mounted	インスタンスがマウントされた後
beforeUpdate	データが変更され、DOMに適用される前
updated	データが変更され、DOMに適用された後
beforeDestroy	Vueインスタンスが破棄される前
destroyed	Vueインスタンスが破棄された後
errorCaptured	任意の子孫コンポーネントからエラーが捕捉されたとき

※リアクティブとは：何かしらの変更（取得した時や、代入された時など）が瞬時に反映されること。（という個人的なイメージです。。。）
※createdとmountedの違い：DOMが構築されているかされていないか。（mountedの場合は、DOMが作成された直後に呼ばれるため、「el」や「getElementById()」などがメソッド内で使用できる。）

practice.js

var app = new Vue({

  // アプリケーションで使用するメソッド
  methods: {
    myMethod: function() {
      // 行いたい処理
    }
  }
})

「methods」はアプリケーションで使用するメソッド。イベントハンドラなどの実装を行う部分。

【Vue.js】基礎知識②

はじめに

基本的なオプションの構成