<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue实例生命周期函数</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
// 生命周期函数就是VUE在某一个时间点会自动执行的函数
var vm = new Vue({
el:'#app',
template:'<div>{{test}}</div>',
data:{
test : 'Hello world'
},
beforeCreate() {
console.log('beforecreate');
},
created() {
console.log('created');
},
beforeMount() {
//当页面渲染之前执行
console.log(this.$el);
console.log('beforeMont');
},
mounted() {
//当页面渲染完后执行
console.log(this.$el);
console.log('mouted');
},
beforeDestroy() {
//当vm被销毁的时候执行
console.log('beforeDestroy');
},
destroyed() {
console.log('destory');
},
beforeUpdate() {
//当data里面的值改变的时候就执行
console.log('beforeUpdate');
},
updated() {
console.log('update');
},
activated() {
//只有当父组件使用keep-alive的时候才会生效
window.addEventListener('scroll',this.handleScroll)
},
deactivated() {
//当前页面切换的时候才会生效
window.removeEventListener('scroll',this.handleScroll)
}
})
</script>
</html>
vue生命周期
最新推荐文章于 2022-10-31 10:18:26 发布