vue 의 생명주기

1
참고 문장
2, 코드 이해
  
  
  
      
      
      <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"/>
  
  

  <div id="app">
       <p>{{ message }}</p>
  </div>

  <script type="text/javascript">
      
    var app = new Vue({
        el: '#app',
        data: {
            message : "xuxiao is boy" 
        },
         beforeCreate: function () {
                  console.group('beforeCreate      ===============》');
                 console.log("%c%s", "color:red" , "el     : " + this.$el); //undefined
                 console.log("%c%s", "color:red","data   : " + this.$data); //undefined 
                 console.log("%c%s", "color:red","message: " + this.message)  
          },
          created: function () {
              console.group('created       ===============》');
              console.log("%c%s", "color:red","el     : " + this.$el); //undefined
                 console.log("%c%s", "color:red","data   : " + this.$data); //      
                 console.log("%c%s", "color:red","message: " + this.message); //     
          },
          beforeMount: function () {
              console.group('beforeMount      ===============》');
              console.log("%c%s", "color:red","el     : " + (this.$el)); //     
              console.log(this.$el);
                 console.log("%c%s", "color:red","data   : " + this.$data); //       
                 console.log("%c%s", "color:red","message: " + this.message); //       
          },
          mounted: function () {
              console.group('mounted       ===============》');
              console.log("%c%s", "color:red","el     : " + this.$el); //     
              console.log(this.$el);    
                 console.log("%c%s", "color:red","data   : " + this.$data); //     
                 console.log("%c%s", "color:red","message: " + this.message); //      
          },
          beforeUpdate: function () {
              console.group('beforeUpdate      ===============》');
              console.log("%c%s", "color:red","el     : " + this.$el);
              console.log(this.$el);   
                 console.log("%c%s", "color:red","data   : " + this.$data); 
                 console.log("%c%s", "color:red","message: " + this.message); 
          },
          updated: function () {
              console.group('updated       ===============》');
              console.log("%c%s", "color:red","el     : " + this.$el);
              console.log(this.$el); 
                 console.log("%c%s", "color:red","data   : " + this.$data); 
                 console.log("%c%s", "color:red","message: " + this.message); 
          },
          beforeDestroy: function () {
              console.group('beforeDestroy      ===============》');
              console.log("%c%s", "color:red","el     : " + this.$el);
              console.log(this.$el);    
                 console.log("%c%s", "color:red","data   : " + this.$data); 
                 console.log("%c%s", "color:red","message: " + this.message); 
          },
          destroyed: function () {
              console.group('destroyed       ===============》');
              console.log("%c%s", "color:red","el     : " + this.$el);
              console.log(this.$el);  
                 console.log("%c%s", "color:red","data   : " + this.$data); 
                 console.log("%c%s", "color:red","message: " + this.message)
          }
      })
  </script>
  
  
</code></pre> 
 <p>      <br/> app.message= 'yes !! I do';<br/>     <br/> app.$destroy();</p> 
</article>
                            </div>
                        </div>

좋은 웹페이지 즐겨찾기