<DIV ID = "アプリ">
<input type = "ボタン" 値= "修改MSG" @ = "= 'いいえ' MSG" をクリック>
<H3 ID = "H3"> {{MSG}} </ H3>
</ div>
<スクリプト>
// Vueのインスタンスを作成し、ViewModelにを取得します
{（VM =新しいVueのでした
「#app」
データ：{
MSG： 'OK'
}、
方法：{
ショー（）{
console.log（「行うための方法を示します」）
}
}、
beforeCreate（）{//これは完全にインスタンスが作成される前に、我々は、ライフサイクルの機能を最初に遭遇され、それが実行すると述べ
//にconsole.log（this.msg）
// this.show（）
//注意：beforeCreateライフサイクル機能を実行する際に、データとメソッド内のデータはまだ初期化されていません
}、
作成した（）{//これは、ライフサイクル機能の第二の出会いです
//にconsole.log（this.msg）
// this.show（）
//で作成で、データおよび方法が良い初期化されています！
//メソッドがでメソッドを呼び出すか、データ内の運転データ、早いする場合は、だけで作成して動作することができ
}、
beforeMount（）{//これは、機能のライフサイクルの第三の出会いであるテンプレートは、我々は仮想DOMを作成し、メモリ内で編集、まだページにテンプレートをレンダリングしていないされています表し
//に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は、次のとおりです。' + this.msg）* /
//結論づけ：実行したときのBeforeUpdateは、ページに表示されているデータ、または古いが、この時点でのデータが最新のデータであり、最新のデータページが同期していません
}、
更新しました（） {
console.log（ 'インターフェース元素含有量：' +のdocument.getElementById（ 'H3'）のinnerText）。
console.log（ 'MSGデータDATAは、次のとおりです。' + this.msg）
//イベントの実行時間を更新し、ページのデータが同期してデータ内にすでに存在する、そして最新であります
}
}）;