<html>
<body>
<head>
<meta charset="utf-8">
<title>生命周期</title>
<script src="./vue.js"></script>
</head>
<div id="app"> </div>
</body>
<script>
var vm = new **Vue**({
template:`
<div>
<button @click="func()">点击加金币</button>
<button @click="del()">销毁实例</button>
<p>{{name}}</p>
</div>
`,
**data**() {
return {
name : "Dragon",
num : 0
}
},
methods: {
**func**(){
this.num ++;
this.name = this.name + this.num;
},
**del**(){
this.**$destroy**();
}
},
*//生命周期函数*
**beforeCreate**() {
**alert**("这个时候实例还没有被创建");
console.**log**(this.name,this.num);*//这时候，数据还没有被创建*
},
**created**() {
*//这个方法里面适合请求数据*
**alert**("这个时候实例已经被创建，属性也有了，但是没有渲染到页面中");
console.**log**(this.name,this.num);*//这时候，数据已经创建*
},
**beforeMount**() {
**alert**("实例已经创建，正在准备渲染到页面");
},
**mounted**() {
**alert**("已经渲染到页面了，页面已经有内容了，数据时间都有了");
},
**beforeUpdate**() {
**alert**("准备数据修改");
},
**updated**() {
**alert**("数据已经被修改，页面重新加载");
},
**beforeDestroy**() {
**alert**("准备卸载");
},
**destroyed**() {
**alert**("已经销毁组件，不会再触发组件里的事件和属性变化");
},
}).**$mount**("#app");
</script>
</html>
1059
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
