vue生命周期与钩子函数简单示例

来源：动视网责编：小采时间：2020-11-27 22:00:05

vue生命周期与钩子函数简单示例

vue生命周期与钩子函数简单示例:本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.gxlcms.com vue生命周期与钩子

推荐度：

点击下载本文 文档为doc格式

导读vue生命周期与钩子函数简单示例:本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.gxlcms.com vue生命周期与钩子

本文实例讲述了vue生命周期与钩子函数。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>www.gxlcms.com vue生命周期与钩子函数</title>
 <style>
 </style>
 <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
</head>
<body>
 <div id="box">
 {{msg}}
 </div>
 <script>
 var vm=new Vue({
 el:'#box',
 data:{
 msg:'well'
 },
 created:function(){
 alert('实例已经创建');
 },
 beforeCompile:function(){
 alert('编译之前');
 },
 compiled:function(){
 alert('编译之后');
 },
 ready:function(){
 alert('插入到文档中');
 },
 beforeDestroy:function(){
 alert('销毁之前');
 },
 destroyed:function(){
 alert('销毁之后');
 }
 });
 /*点击页面销毁vue对象*/
 document.onclick=function(){
 vm.$destroy();
 };
 </script>
</body>
</html>

网上找来一张流程图：