vue2.0生命周期

最新推荐文章于 2024-05-13 09:17:36 发布

Hi毛哥哥

最新推荐文章于 2024-05-13 09:17:36 发布

阅读量605

点赞数

本文链接：https://blog.csdn.net/maolian1995/article/details/78981744

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
watch选项是Vue提供的用于检测指定的数据发生改变的api。
<br />
<br />
<br />
<br />
<div id="app" ref='app'>
{{name}}

<img :src="url" />
</div>

<script>
new Vue({
el:'#app',
data:{
name:'毛大爷',
url:'img/微信图片_20171212174410.jpg'
},
beforeCreate(){ //此阶段为实例初始化之前，此时的数据观察和事件配置都没好准备好。
console.log('即将创建')
console.log(this.$data)
console.log(this.$el)
},
created(){ //此阶段为"实例初始化"后创建完毕，能读取到数据data的值，"DOM"还未生成所以属性el还不存在。
console.log('创建完成')
console.log(this.$data)
console.log(this.$el)
},
beforeMount(){ //此时已经成功关联到指定的dom元素,但是{{}}数据还未成功渲染成data里面的数据。
console.log('即将挂载')
console.log(this.$data)
console.log(this.$el)
},
mounted(){ //{{}}数据已成功渲染成data内的值。
console.log('挂载完毕')
console.log(this.$data)
console.log(this.$el)
},
/* beforeUpdate(){ //修改vue实例的data时，vue就会自动帮我们更新渲染视图，在这个过程中，vue提供了beforeUpdate的钩子给我们，在检测到我们要修改数据的时候，更新渲染视图之前就会触发钩子beforeUpdate。
console.log('=即将更新渲染=');
let name = this.$refs.app.innerHTML;
console.log('Name:'+name);
},
updated(){
console.log('==更新成功==');
let name = this.$refs.app.innerHTML;
console.log('Name:'+name);
}*/
/* beforeDestroy(){
console.log('销毁之前');
},
destroyed(){
console.log('销毁成功');
} */
})
</script>
</body>
</html>

Hi毛哥哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue2.0生命周期

watch选项是Vue提供的用于检测指定的数据发生改变的api。{{name}}new Vue({el:'#app',data:{name:'毛大爷',url:'img/微信图片_20171212174410.jpg'},beforeCreate(){//此阶段为实例初始化之前，此时的数据观察和事件配置都没好准备好。c
复制链接

扫一扫