Vue(2)-生命周期
程序员文章站
2023-12-28 10:35:28
...
生命周期钩子：
beforeCreatecreatebeforeMountmountbeforeUpdateupdatedbeforeDestorydestoryed
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!--<script type="text/javascript" src="js/jquery-3.4.1.js"></script>-->
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div>
<input type="text" v-model="a" />
<p>原值:<span id="span_a" style="color: red;"></span></p>
<p>经过钩子beforeCreate:<span id="beforeCreate_a" style="color: red;"></span></p>
<p>经过钩子created:<span id="created_a" style="color: red;"></span></p>
<p>经过钩子beforeUpdate:<span id="beforeUpdate_a" style="color: red;"></span></p>
<p>经过钩子updated:<span id="updated_a" style="color: red;"></span></p>
</div>
</div>
<script type="text/javascript">
var g_data = { a: 1 };
var app = new Vue({
el: "#app",
data: g_data,
beforeCreate: function () {
document.getElementById('beforeCreate_a').innerHTML = this.a;
},
created: function () {
document.getElementById('span_a').innerHTML = this.a;
this.a = 'create_a';
document.getElementById('created_a').innerHTML = this.a;
},
brforeMount: function () {
},
mounted: function () {
},
//若在钩子created里赋值，则不会进入beforeUpdate和updated
beforeUpdate: function () {
document.getElementById('beforeUpdate_a').innerHTML = this.a;
},
updated: function () {
document.getElementById('updated_a').innerHTML = this.a;
},
beforeDestory: function () {
},
destoryed: function () {
}
});
</script>
</body>
</html>