ライフサイクル機能のVueの様々な段階

<！DOCTYPE HTML > 
< HTML LANG = "EN" > 

< 頭> 
  < メタ文字コード= "UTF-8" > 
  < メタ名= "ビューポート" コンテンツ= "幅=装置幅、初期の規模= 1.0" > 
  < メタHTTP -equiv = "X-UA-互換性のある" コンテンツ= "IE =エッジ" > 
  < タイトル>ドキュメント</ タイトル> 
  < スクリプトSRC = "./ libに/ VUE-2.4.0.js" > <
> 

< ボディ> 
  < DIV ID = "アプリケーション" > 
    < 入力タイプ= "ボタン" 値= "修改MSG" @click = "MSG = 'いいえ'" > 
    < H3 ID = "H3" > {{MSG}} < / H3 > 
  </ divの> 

  < スクリプト> 
    // 创建Vueの实例、得到ViewModelに
    VAR VM =  新しいヴュー（{ 
      エル：' #app ' 、
      データ：{ 
        MSG：' OK '
      }、
      メソッド：{ 
        ショー（）{ 
          にconsole.log（「表示する方法を実行」）
        } 
      }、
      beforeCreate（）{ // これは、我々が生活サイクルの関数に遭遇した最初のものであるが、完全に前に作成した例を示しそれが実行
        にconsole.log（これは.msg）// ここでの出力が定義されていない
        // エラーはデータのメソッドは初期化されませんので、this.Show（）の実行文
        // 、beforeCreateライフ・サイクル・タイム機能の実行を：注方法およびデータのデータにまだ初期化されていない
      }、
      作成（）{ // これは、第二の機能のライフサイクル中に遭遇する
        にconsole.log（この.MSG）
         この.SHOW（）
         //  で作成さでは、データおよび方法が良い初期化されています！
        // あなただけで動作することができ、方法、データまたは早いにおける運用データのメソッドを呼び出したい場合で作成した
      }、
      beforeMountは（）{ // これは、機能のライフサイクルの第三の出会いであるメモリ内にすでにテンプレートを表し編集が完了し、まだテンプレートページにレンダリングされていない
        にconsole.log（のdocument.getElementById（「H3 」）.innerText）
         // 直前に、本当にオーバー交換されていないbeforeMount、ページ要素を、実行しますいくつかのテンプレート文字列を書き込む
      }、 
      （マウント）{ // これは第四の出会いライフサイクルの関数である、メモリテンプレートが実ページに装着されていると述べた、ユーザが既にレンダリングさ見ることができますページ
        にconsole.log（のdocument.getElementById（「H3 」）.innerText）
         // 注：インスタンスが完全に作成されていると述べた上に取り付けられ実行する際に、インスタンスの作成時にライフサイクル機能を搭載し、最後
　　　　　　ない他の操作は、このインスタンス場合は、この時点で、それが私たちのメモリに静かに横たわっている、動か
      } 


      // 次の2つのイベントが実行されている
      のBeforeUpdate（）{ // この時間は、我々は、発現インターフェースは、データがまだ更新されて[更新されていませんか？データは確かに更新されます] 
        （にconsole.log ' インタフェース要素の内容について：'  + のdocument.getElementById（' H3 ' ）.innerText）
        はconsole.log（' MSGデータDATAがある：'  +  この.MSG）
         // BeforeUpdateが実行されると、ページ内のデータ、または古い、この時点ではデータは最新のデータであり、最新のデータ・ページが同期されていない：それは結論づけ
      、} 

      {）（更新
        はconsole.log（" インターフェース要素の内容："  +document.getElementById（「H3 」）.innerText）
        はconsole.log（「データMSG内のデータがある：」 +  この.MSG）
         // 更新イベント実行、データページとデータが同期され、かつ最新であるされています
      } 
    }）; 
  </ スクリプト> 
</ ボディ> 

</ HTML >
ライフサイクル機能のVueの様々な段階

おすすめ
