您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
生命周期
发布时间：2020-02-16 21:43:38编辑：雪饮阅读（）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var Test={
data:function(){
return {msg:"hello world"}
}
, template:
`<div>
<span>{{msg}}</span>
<button @click = 'changeHandler'>触发update</button>
</div>`,
beforeCreate:function() {console.log("组件创建之前:",this.msg);},
created:function() {
console.log("组件创建之后:",this.msg);
// 使用该组件，就会调用created方法 在created这个方法中可以操作后端的数据，数据响应视图
},
beforeMount:function () {
console.log("挂载数据到DOM之前会调用:",document.getElementById('app'));
},
mounted:function() {
console.log("挂载数据到DOM之后会调用 Vue 作用以后的DOM:",document.getElementById('app'));
},
beforeUpdate(){console.log("在更新DOM之前 调用此钩子函数");},
updated(){console.log("在更新DOM之后 调用此钩子函数");},
beforeDestroy(){console.log('销毁前');},
destroyed(){console.log('销毁后');},
activated(){console.log('组件被激活了');},
deactivated(){console.log('组件被停用了');},
methods:{
changeHandler(){
this.msg = this.msg +'哈哈哈';
}
}
}
var App = {
data:function() {
return {
isShow:true,
isShow1:true,
menuList:[{name:"menu1"},{name:"menu2"}]
}
},
// Vue的内置组件，能在组件的切换过程中将状态保留在内存中父，防止重复渲染DOM
//如果没有keep-alive，则这里的isShow就会可能触发到”beforeDestroy、destroyed、beforeCreate、created、beforeMount、mounted“
template:`
<div class='app'>
<keep-alive>
<Test v-if = 'isShow'></Test>
</keep-alive>
<Test v-if = 'isShow1'></Test>
<button @click = 'isShow = !isShow'>组件激活与停用</button>
<button @click = 'isShow1 = !isShow1'>组件销毁与创建</button>
</div>
`,
components:{
Test
}
}
new Vue({
el: '#app',
template: `<App />`,
data() {
return {}
},
components:{App,Test}
});
</script>
</body>
</html>
关键字词：vue,生命周期
上一篇：getter与setter