Vuejs学习笔记(一)-5.Vue的生命周期

Vue对象的生命周期：Vue的 生命周期

 

以上红色部分的都是Vue实例创建过程中生命周期的回调函数。有：beforeCreate,create,bemounted,mounted,destoryed等。以下代码是简单用法：

 1 <!--
 2 @author:invoker
 3 @project:project_lianxi
 4 @file: 03-vue的生命周期.html
 5 @contact:invoker2021@126.com
 6 @descript:
 7 @Date:2021/6/30 19:34
 8 @version: html5
 9 -->
10 
11 <!DOCTYPE html>
12 <html lang="en">
13 <head>
14   <meta charset="UTF-8">
15   <title>03-vue的生命周期</title>
16 </head>
17 <body>
18 <div id="app">
19 
20 </div>
21 <script src="../js/vue.js"></script>
22 <script>
23   const app = new Vue({
24     el:'#app',
25     data:{
26       message:'hello vuejs'
27     },
28     //打开网页后再console控制台里面查看是否调用created方法
29     created(){
30       console.log('created');
31     },
32     destroyed(){
33       console.log('destroyed');
34     }
35   })
36 </script>
37 </body>
38 </html>

 

 

 

posted @ 2021-06-30 20:05  kaer_invoker  阅读(46)  评论(0)  编辑  收藏  举报