Vue - Test Destroy

test life cycle hooks

by Ben Clayton

HTML

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

<div id="blockmenu"></div>


<hr>

<script id="tmpl-hello-world" type="text/x-template">
    <div>
    	Hello World {{ user }} {{ global.name }}
      <input v-model="global.name" />
    </div>
</script>


<script id="tmpl-blockmenu" type="text/x-template">
  <div>
    {{ global.name }}
    
</div>
</script>


<script id="tmpl-accordion" type="text/x-template">
  <div class="box">
   {{ global.name }}<br>
  	<slot :currentIdx="currentIdx">
    </slot><br>
  </div>
</script>


<script id="tmpl-accordion-item" type="text/x-template">
 <div>
   <div @click="select"> +--------- </div>
  <slot v-if="n==accordionScope.currentIdx"></slot>
 </div>
</script>


<!-- <hello-world user="fred" :global="global"></hello-world> -->

CSS

body {
	    font-size: 20px;
}

.text {
	font-size: 24px;
}
.box {
  border: 1px solid red;
}

JavaScript

Vue.component('hello-world', {
  template: "#tmpl-hello-world",
  props: ['user','global'],
  created: function () {
  	//console.log("article properties:",this.properties);
  }
});


//---------------------------------------------------------


//---------------------------------------------------------

var vm = new Vue({ // create a root Vue instance
  el: '#blockmenu', // this div gets replaced when View is rendered
  template: '#tmpl-blockmenu',
  data: function(){
  	return { global: { name: "FRED" } }
  },
  
  created: function () {
  this.$data.global.name = 'BERT';
  	
  },
  beforeDestroy: function () {
  this.$data.global.name = 'SID';
  }
});