1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue学习笔记-15-vue生命周期

vue学习笔记-15-vue生命周期

时间:2024-02-02 09:38:33

相关推荐

vue学习笔记-15-vue生命周期

对于每一个生命阶段,vue提供了一些特定的方法:

这一阶段进行完毕,其对应的方法就会被执行。

比如:

<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/base.css"/><style type="text/css">#app{width: 20%;margin: 200px auto;border: 1px solid #ccc;line-height: 40px;padding: 20px;}</style></head><body><div id="app"><div class="box"><div>{{msg}}</div><button @click="update">更新</button><button @click="destroy">销毁</button></div></div><script type="text/javascript" src="./js/vue.min.js"></script><script type="text/javascript">var vm=new Vue({el: "#app",data:{msg:"生命周期"},methods:{update:function(){this.msg="hello"},destroy:function(){//销毁需要使用这个方法,销毁vue实例对象this.$destroy()}},beforeCreate:function(){console.log('beforeCreate')},created:function(){console.log('created')},beforeMount:function(){console.log('beforeMount')},mounted:function(){console.log('mounted')},beforeUpdate:function(){console.log('beforeUpdate')},updated:function(){console.log('updated')},beforeDestroy:function(){console.log('beforeDestroy')},destroyed:function(){console.log('destroyed')}})</script></body></html>

这些方法又被称为生命周期钩子函数。

更加详细的介绍可以查看官网:/v2/guide/custom-directive.html#ad

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。