00 vueインスタンスのライフサイクルフック関数
次のコードを実行して、プロセスを見て、意味がわかるはずです.
<div id="app1">
<!-- , innerText-->
：{
{txtmsg}}<br/>
<!-- HTML， innerHTML-->
<div v-html="htmltag"/>
<!-- -->
<input type="button" value=" " v-bind:disabled="isButtonDisabled"/>
<!-- JavaScript -->
<p> :{
{age}} ， :{
{age+1}} </p>
</div>
<script type="text/javascript" src="vue.min.js"/>
<script type="text/javascript">
let v1 = new Vue({
el:"#app1",
data:{
txtmsg:"hello vue",
htmltag:"<p style='background-color:red'> </p>",
isButtonDisabled:true,
age:20
},
beforeCreate:function(){
console.log("vue ");
},
created:function(){
console.log("vue ， ");
},
beforeMount:function(){
alert(" ");
console.log(" ");
},
mounted:function(){
// mounted 。 ， vm.$nextTick mounted：
alert(" ");
console.log(" ");
},
beforeUpdate:function(){
alert(" ");
console.log(" ");
},
updated:function(){
// updated 。 ， vm.$nextTick updated
alert(" ， ");
console.log(" ， ");
},
beforeDestroy:function(){
console.log("vue ， bye-bye ");
}
});
</script>
</code></pre>
<br/>
</div>
</div>
</div>
</div>