Vueのオプション構成
マウントで使用する要素
elはアプリケーションを紐づける要素のセレクタ
new Vue({
el: '#app'
})
アプリケーションで使用するデータ
dataはアプリケーションで使用するデータ。
オブジェクトや配列を登録することができる
new Vue({
el: '#app',
data: {
message: 'Vue.js'
}
})
算出プロパティ
computedは関数によって算出されたデータ。
dataと同じような感覚で使うことができる。
new Vue({
el: '#app',
computed: {
computedMessage: function() {
//何か処理をした結果をデータとして返す
return this.message + '!'
}
}
})
ライフサイクルハック
ライフサイクルは、一定のサイクルを表す。
フックは、あらかじめ登録した処理を、Vueインスタンスの特定のタイミングで自動的に呼び出しを行う。
使用可能なライフサイクル
createdはライフサイクルハックの一つ
createdは、このメソッドを登録したVueのインスタンスが作成され、データの監視などリアクティブまわりの初期化が終わったあとに呼び出しが行われる
new Vue({
el: '#app',
created: function() {
//このインスタンスの作成&初期化が終わってらすぐ
console.log('created')
}
})
使用できるライフサイクルハックメソッド
| メソッド | タイミング |
|---|---|
| beforeCreate | インスタンスが作成され、リアクティブの初期化がされる前 |
| created | インスタンスが作成され、リアクティブの初期化がされた後 |
| beforeMount | インスタンスがマウントされる前 |
| mounted | インスタンスがマウントされた後 |
| beforeUpdate | データが変更され、DOMに適応される前 |
| updated | データが変更され、DOMに適応された後 |
| beforeDestroy | Vueインスタンスが破壊される前 |
| destroyed | Vueインスタンスが破壊された後 |
| errorCaptured | 任意の子孫コンポーネントからエラーが補足されたとき |
アプリケーションで使用するメソッド
methodsはアプリケーション内で使用するメソッド。
コードを管理しやすくするために処理を分けたり、イベントパンドラなど細かな実装を担当する。
new Vue({
el: '#app',
methods: {
myMethod: function() {
//処理
}
}
})
vueのライフサイクルダイアグラム
