vue-class-component playground

by luckylooke

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/jsx"]')
s.setAttribute('data-presets', 'es2017')
s.setAttribute('data-plugins', 'transform-decorators-legacy,transform-class-properties')
</script>

Babel + JSX

const { default: Component, createDecorator } = VueClassComponent

@Component({
  template: `
    <h1>{{ message }} - {{ myProp }}</h1>
  `
})
class App extends Vue {
  message = 'Hello!'
	myPropInternal = 0;

  get myProp() {
  	console.log('get', this.myPropInternal);
  	return this.myPropInternal;
  }
  set myProp(value) {
  	console.log('set', value);
  	this.myPropInternal = value;
  }
  
  created() {
  	this.myProp = 1;
  	this.myProp = 2;
  	this.myProp = 3;
  }
}

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