Sec 4 Exercise

by Rushan Sakhibgareev

HTML

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

<div id="app">
  <h1>{{ title }}</h1>
  <button @click="title='Changed'">
      Update Title
  </button>
  <button @click="destroy">
      Destroy
  </button>

</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    title: 'The VueJS Instance',
  },
  beforeCreate: function(){
     console.log('beforeCreate()');  
  },
  created: function(){
     console.log('created()');
  },
  beforeMount: function(){
     console.log('beforeMount()');
  },
  mounted: function(){
     console.log('mounted()');  
  },
  beforeUpdate: function(){
     console.log('beforeUpdate()');
  },
  updated: function() {
     console.log('updated()');  
  },
  beforeDestroy: function() {
     console.log('beforeDestroy()')
  },
  destroyed: function() {
     console.log('destroy()')
  },
  methods:{
     destroy: function() {
        this.$destroy();
     }
  }
});