Vue.jsの基本④（v-model、ライフサイクルフック、methods）

●v-model
フォーム入力時のデータバインディングに利用するディレクティブ「v-model」についてのまとめ。v-modelはVueの特徴の一つでもある、双方向データバインディングを実行できる。

<div id='app'>
  <input type="checkbox" value="Yuka" v-model="checkedNames">
  <label for="yuka">Yuka</label>
  <input type="checkbox" value="Emi" v-model="checkedNames">
  <label for="emi">Emi</label>
  <input type="checkbox" value="Mai" v-model="checkedNames">
  <label for="mai">Mai</label>
  <br>
  <span>選択した名前は？: {{ checkedNames }}</span>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    checkedNames: []
  }
})

inputタグでチェックした名前が{{ checkedNames }}のところに入る、という仕組みになっている。（valueが反映される）

●ライフサイクルフック
Vueインスタンスの生成〜消滅に至るまでのライフサイクルがあり、タイミングによって呼ばれる処理を事前に登録することができる。
beforeCreate
インスタンスが生成され、データが初期化される前に呼ばれる処理。
created
インスタンスが生成され、データが初期化された後に呼ばれる処理。
これが呼ばれた段階では、まだDOM要素はインスタンスには紐づいていない。Vuexを導入しない小規模のWebアプリで使用されることが多い。
beforeMount
インスタンスがDOM要素にマウントされる前に呼ばれる処理。
mounted
インスタンスがDOM要素にマウントされた後（紐づいた後）に呼ばれる処理。DOM操作やイベントリスナーの登録が必要な場合に使う。
beforeUpdate
データが変更され、DOMに適用される前に呼ばれる処理。
updated
データが変更され、DOMに適用された後に呼ばれる処理。
beforeDestroy
Vueインスタンスが破棄される前に呼ばれる処理。この処理は適切に行わないと、メモリリークの原因となりユーザー体験を損なう結果に繋がる。
destroyed
Vueインスタンスが破棄された後に呼ばれる処理。

●methods
Vueインスタンスのメソッドとして機能する。methodsはデータの変更やサーバーにHTTPリクエストを送る際に用いる。

methods:{
　　methodsName: function(){
　　　 //処理
　　}
 }

function内にイベントを設定することが可能！
※methods（メソッド）とcomputed（算出プロパティ）は関数の形をとるという点が同じで、慣れていないと分けるのが難しい。
computedは依存しているデータが変更されない限り計算結果をキャッシュする特徴を持っており、データの変更がない限りは再計算を行わない。