ログインをしてページを更新するだけでお金を稼ぐことが出来ます。
ページの作成

ページの作成

親となるページを選択してください。

ページは必ず何かしらの親ページに紐づきます。
親ページに紐づくページを子ページといいます。
例: 親=スポーツ, 子1=サッカー, 子2=野球

子ページを親ページとして更に子ページを作成することも可能です。
例: 親=サッカー, 子=サッカーのルール

親ページはいつでも変更することが可能なのでとりあえず作ってみましょう!
テンプレートを更新

7. 【Vue.js】ライフサイクルフック(created / mounted / updated / destroyedの使い方)

ライフサイクルフックとは

ライフサイクルフックを行うことで、任意のタイミングで処理を実行することが出来ます。

それぞれ処理のタイミングが異なるので下記の一覧で確認してください。

 

実装例

var app = new Vue({
  el: '#app',
 
created: function() {
    console.log("created");
  },
})

 

一覧

beforeCreate データの監視とイベント/ウォッチャのセットアップより前の、インスタンスが初期化されるときに同期的に呼ばれます。
 
created インスタンスが作成された後に同期的に呼ばれます。この段階では、インスタンスは、データ監視、算出プロパティ、メソッド、watch/event コールバックらのオプションのセットアップ処理が完了したことを意味します。しかしながら、マウンティングの段階は未開始で、$el プロパティはまだ利用できません。
beforeMount

インスタンスのマウンティングが開始される直前に呼ばれます。

mounted

新たに作成される vm.$el によって置き換えられる el に対して、インスタンスがマウントされたちょうど後に呼ばれます。ルートインスタンスがドキュメントの中の要素にマウントされる場合、vm.$el も mounted が呼び出されるときにドキュメントの中に入ります。

mounted は 全ての子コンポーネントもマウントされていることを保証しないことに注意してください。ビュー全体がレンダリングされるまで待つ場合は、 mounted の代わりに vm.$nextTick を使うことができます。

beforeUpdate データが変更されるとき、DOM が適用される前に呼ばれます。これは、更新前に既存の DOM にアクセスするのに適しています。
updated

データが変更後、仮想 DOM が再描画そしてパッチを適用によって呼ばれます。

このフックが呼び出されるとき、コンポーネントの DOM は更新した状態になり、このフックで DOM に依存する操作を行うことができます。しかしがながら、ほとんどの場合、無限更新ループに陥る可能性があるため、このフックでは状態を変更するのを回避すべきです。

updated は 全ての子コンポーネントも再レンダリングされていることを保証しないことに注意してください。ビュー全体が再レンダリングされるまで待つ場合は、 updated の代わりに vm.$nextTick を使うことができます。

beforeDestroy Vue インスタンスが破棄される直前に呼ばれます。この段階ではインスタンスはまだ完全に機能しています。
destroyed Vue インスタンスが破棄された後に呼ばれます。このフックが呼ばれるとき、Vue インスタンスの全てのディレクティブはバウンドしておらず、全てのイベントリスナは削除されており、そして全ての子の Vue インスタンスは破棄されています。
errorCaptured 任意の子孫コンポーネントからエラーが捕捉されるときに呼び出されます。フックは、エラー、エラーをトリガするコンポーネントインスタンス、そしてどこでエラーが捕捉されたかの文字列情報、これら 3 つの引数を受け取ります。フックはエラーがさらにもっと伝播するのを防ぐために、false を返すことができます。

 

子ページ
子ページはありません
同階層のページ
  1. インストール
  2. for 繰り返し処理
  3. ifの条件分岐とtemplateを用いたグループ化
  4. on:click クリック時のイベント処理
  5. modelとdata フォーム入力値とDOMへの即時反映
  6. computed(算出プロパティ)と使い方とdataとの違い
  7. ライフサイクルフック(created / mounted / updated / destroyedの使い方)
  8. $nextTickの使い方(ライフサイクルフック)
  9. メソッドの定義方法
  10. エラー一覧
  11. ルーティング設定
  12. aリンクの貼り方と動的URLの作成
  13. Mixinを利用した共通処理の記述方法
  14. v-bindによるデータ連携
コメント一覧

コメントがありません