Vue的生命周期操作示例

本文实例讲述了某视频剪辑软件的生命周期操作。分享给大家供大家参考，具体如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title vue的生命周期/title脚本类型=' text/JavaScript ' src=' http :https://cdn。bootcss。com/vue/2。6 .10/vue。量滴js '/script/headdyh1vue的生命周期/h1 hrdiv id=' app ' { count } } Pb按钮@ click=' add ' add/button/p/div buttonn click=' app .$destroy()'销毁/button/body/html脚本var app=new Vue({ El : ' # app }，data:{ count:1 }，methods : { add : function(){ this。count } }，//有这么多钩子函数一共十个//初始化之后在创建：函数之前(){ console。日志(' 1-创建前初始化之后');}, //创建完成创建了：函数(){ console。日志(' 2-已创建创建完成');}, //挂载之前在安装： function(){ console之前。日志(' 3-安装前挂载之前');}, //被创建已安装：函数(){控制台。日志(' 4-已安装被创建');}, //数据更新前在更新：函数之前(){ console。日志(' 5-更新前数据更新前');}, //被更新后更新了：函数(){ console。日志(' 6-已更新被更新后');}，//激活d :函数(){控制台。日志(' 7-激活')；}，//停用d :函数(){控制台。日志(' 8-停用')；}, //销毁之前beforeddestroy : function(){ console。日志(' 9-befored story销毁之前');}, //销毁之后驱逐舰d :函数(){控制台。日志(' 10-被摧毁销毁之后)} })/脚本运行结果：

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun测试上述代码运行效果。

希望本文所述对大家vue.js程序设计有所帮助。