Vue

by Maiki Nahara

HTML

<div id="app">
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

Vue

const AdaComponent = {
  render () {
  	return this.$slots.default
  },
  data () {
  	return {
  		message: ''
  		}
  },
  watch: {
  	message: {
  		handler(newVal) {
  			console.log('Message changed: ' + newVal)
  		}
  	}
  },
  beforeCreated () {
  console.log('1')
  	this.message = 'beforeCreated'
  },
  mounted () {
    console.log('2')
    this.message = 'mounted'
  },
  beforeDestroy () {
    console.log('3')

    this.message = 'beforeDestroy'
  }
}

new Vue({
  el: "#app",
  components: {
		AdaComponent
  },
  template: `
	<div>
  	<AdaComponent v-if='visible' />
  </div>
  `,
  data () {
  	return {
    	visible: false
    }
  },
  mounted () {
  this.visible = true
  setTimeout(() => {
		this.visible = false
  }, 100)
  }
})