1 <！DOCTYPE HTML > 2 < HTML のlang = "EN" > 3 4 < ヘッド> 5 < メタのcharset = "UTF-8" > 6 < メタ名= "ビューポート" コンテンツ= "幅=デバイス幅、初期スケール= 1.0 " > 7 < タイトル>ドキュメント</ タイトル> 8 <！ - 1导入ヴュー的包- > 9 < スクリプトSRC =" HTTPS：//cdn.jsdelivr。スクリプト> 10 </ ヘッド> 11 12 < 本体> 13 < DIV ID = "アプリケーション" > 14 < 入力タイプ= "ボタン" 値= "修改MSG" @click = "MSG = 'いいえ'" > 15 < H3 ID = "H3" > {{MSG}} </ H3 > 16 </ DIV > 17 18 19 < スクリプト> 20 // ViewModelに取得し、Vueのインスタンスを作成する 21 VARをVM = 新しい新しいヴュー（{ 22は EL：' #app ' 、 23は データ：{ 24 MSG：' OK ' 25 }、 26は、 {：方法 27 表示（）{ 28 はconsole.log（' 実行を表示する方法' ） 29 } 30 }、 31 beforeCreateは（）{ // これは我々が生活サイクルの機能を最初に遭遇する前に、完全に作成された例を表し、それが実行される 32 // はconsole.log（this.msg） 33 // this.Showを（） 34 // 注意：機能実行beforeCreateライフサイクル、データ及び方法のデータが初期化されていない 35 36 }、 37 ）（作成{ // これは、第二の機能のライフサイクル中に遭遇する 38である // コンソール.logの（this.msg） 39 // this.Show（） 40 // 作成で、データおよび方法が良い初期化されています！ 41 // 最初に、この方法でデータや操作データをメソッドを呼び出したい場合は、作成中のみ操作 42がある }、 43は beforeMount（）{ // これは、第三の機能のライフサイクルで発生した、プレゼンテーションテンプレート既にメモリ編集に完了しているが、まだテンプレートページにレンダリングされていない 44 // はconsole.log（のdocument.getElementById（「H3」）。のinnerText） 45 //BeforeMountページ要素は、実際にはいくつかのテンプレート文字列書き込む前に、オーバー交換されていない 46 }、 47 マウント（）{ // これは、第四出会いのライフサイクルの関数であるが、テンプレートメモリとユーザーはすでにのレンダリングされたページを参照することができ、実際のページにマウントされている 48 // はconsole.log（のdocument.getElementById（「H3」）を。のinnerText） 49 // インスタンス生成の寿命を長持ちマウント周期関数、インスタンスが完全に作成された前記上に搭載実行する場合、このとき、他の操作は、このインスタンスは、それが私たちのメモリ内に静かに横たわっていない場合、静止 50 } 51 52 // 次の2つのイベントが実行されている 53 {）のBeforeUpdateを（// この時間は、私たちの表現インタフェースは、データがまだ更新されて[更新されていませんか？データは確かに更新された] 54です * / はconsole.log（ 'インタフェース要素のコンテンツ：'。+のdocument.getElementById（ 'H3'）のinnerText） 55 はconsole.log（ 'MSGデータDATAは、次のとおりです。' +これは。 MSG）* / 56 //は結論づけ：実行したときのBeforeUpdateは、ページ上に表示されているデータ、または古いが、この時点ではデータは最新のデータであり、最新のデータページが同期されていない 57 }、 58 59は、 更新（） { 60 にconsole.log（' コンテンツインタフェース要素：' + のdocument.getElementById（' H3 ' ）.innerText） 61がある にconsole.log（' ：データMSGのデータ' + この.MSG） 62がされている // イベントを更新します実行時に、ページデータとデータが同期されていますが、最新のある 63がある } 64 ）}; 65 </ スクリプト> 66 </ボディ> 67 </ HTML >