时间:2021-05-26
本文实例讲述了Vue的生命周期操作。分享给大家供大家参考,具体如下:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Vue的生命周期</title> <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script></head><body><h1>Vue的生命周期</h1><hr><div id="app"> {{count}} <p><button @click="add">Add</button></p></div><button οnclick="app.$destroy()">销毁</button></body></html><script> var app = new Vue({ el:'#app', data:{ count:1 }, methods:{ add:function () { this.count++ } }, //有这么多钩子函数 一共十个 //初始化之后 beforeCreate:function(){ console.log('1-beforeCreate 初始化之后'); }, //创建完成 created:function(){ console.log('2-created 创建完成'); }, //挂载之前 beforeMount:function(){ console.log('3-beforeMount 挂载之前'); }, //被创建 mounted:function(){ console.log('4-mounted 被创建'); }, //数据更新前 beforeUpdate:function(){ console.log('5-beforeUpdate 数据更新前'); }, //被更新后 updated:function(){ console.log('6-updated 被更新后'); }, // activated:function(){ console.log('7-activated'); }, // deactivated:function(){ console.log('8-deactivated'); }, //销毁之前 beforeDestroy:function(){ console.log('9-beforeDestroy 销毁之前'); }, //销毁之后 destroyed:function(){ console.log('10-destroyed 销毁之后') } })</script>运行结果:
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
希望本文所述对大家vue.js程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
一vue的生命周期如下图所示(很清晰)二vue生命周期的栗子注意触发vue的created事件以后,this便指向vue实例,这点很重要vue生命周期{{a}}
jQuery中可以这样写vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted附上vue.js的生命周期函数执行流程总结以
用Vue框架,熟悉它的生命周期可以让开发更好的进行。首先先看看官网的图,详细的给出了vue的生命周期:它可以总共分为8个阶段:beforeCreate(创建前)
本文实例讲述了React生命周期原理与用法。分享给大家供大家参考,具体如下:React生命周期生命周期概览生命周期的状态组件的生命周期可分成三个状态:Mount
maven插件主要是为maven中生命周期中的阶段服务的,maven中只是定义了3套生命周期,以及每套生命周期中有哪些阶段,具体每个阶段中执行什么操作,完全是交