Vue Hooks Test

by nevkatz

HTML

<script src="https://npmcdn.com/vue/dist/vue.js"></script>



<div id="app">
  <h2>
  {{ title }}
  </h2>
    <div>
    <input type="text" v-model="title"/>
  </div>
   <p id="hud">
   last changed:  {{ lastChanged }}
  </p>
  <button @click="destroy()">
  Destroy
  </button>
 </div>

CSS

h2 {
  min-height: 30px;
}

JavaScript

new Vue({
  el:'#app',
  data: {
     title:'The VueJS instance',
     showParagraph:false,
     lastChanged:Date.now()
  },
  methods:{
     updateTitle:function(title) {
       this.title= title;
     },
     destroy:function() {
       this.$destroy();
     }
  },
  watch:{
   title:function(value) {
  	    this.lastChanged = Date.now();
    }
  },
  beforeCreate:function() {
    console.log('before create...');
  },
  created:function() {
    console.log('created...');
  },
  beforeMount:function() {
  	console.log('before mount...');
  },
  mounted:function() {
    console.log('mounted...');
  },
  beforeUpdate:function() {
  	console.log('before update...');
  },
  updated:function() {
    console.log('updated....');
  },
  beforeDestroy:function() {
    console.log('before destroy...');
  },
  destroyed:function() {
   console.log('destroyed...(time for cleanup work)')
  }
})