一个菜鸟的互联网技术分享博客
您的位置: 主页 > Vue的生命周期及代码实例
advertisement

Vue的生命周期及代码实例

Vue 实例生命周期
在Vue的官网上有上面这样生命周期图,但是理解麻烦,结合以下代码可以理解起来方便

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset="UTF-8">  
  5.         <title>Vue生命周期</title>  
  6.         <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>  
  7.     </head>  
  8.     <body>  
  9.         <div id="app"></div>  
  10.           
  11.         <script>  
  12.             var vm =new Vue({  
  13.                 //生命周期函数就是Vue实例在某一个时间点会自动执行的函数  
  14.                 el:"#app",  
  15.                 template:"<div>hello word</div>",  
  16.                 beforeCreate: function() {  
  17.                     console.log("beforeCreate");  
  18.                 },  
  19.                 created: function(){  
  20.                     console.log("created");  
  21.                 },  
  22.                 beforeMount:function(){ //页面还没有被渲染  
  23.                     console.log(this.$el);  
  24.                     console.log("beforeMount");  
  25.                 },  
  26.                 mounted:function(){  //页面开始被渲染  
  27.                     console.log(this.$el);  
  28.                     console.log("mounted");  
  29.                 },  
  30.                 beforeDestroy:function(){  
  31.                     console.log("beforeDestroy");  
  32.                 },  
  33.                 destroyed:function(){  
  34.                     console.log("destroyed");  
  35.                 },  
  36.                 beforeUpdate:function(){  
  37.                     console.log("beforeUpdate");  
  38.                 },  
  39.                 updated:function(){  
  40.                     console.log("updated");  
  41.                 }  
  42.             })    
  43.         </script>  
  44.     </body>  
  45. </html>  

zhangren.online
上一篇:Vue和jQuery实现数据双向绑定
下一篇:Vue之计算属性、方法、侦听器

您可能喜欢

回到顶部