vue-class-component playground

by will chen

HTML

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



<!-- Importing libs and setup -->
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.js"></script>
<script>
var s = document.querySelector('script[type="text/babel"]')
s.setAttribute('data-presets', 'stage-2')
s.setAttribute('data-plugins', 'transform-class-properties,transform-decorators-legacy')
window.Component = VueClassComponent.default
</script>

Babel + JSX

@Component({
  template: '<p>test</p>'
})
class Popup extends Vue {
    mounted() {
        console.info('mounted')
        window.addEventListener('keyup', this.onKeyup)
    }

    beforeDestroy() {
        console.info('beforeDestroy')
        window.removeEventListener('keyup', this.onKeyup)
  			this.$el.parentNode.removeChild(vm.$el)
    }
}

const vm = new Vue({
  el: '#app',
  render: h => h(Popup)
})

setTimeout(() => {
	vm.$destroy()
}, 10000)