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-decorators-legacy,transform-class-properties')
</script>

Babel + JSX

const { default: Component, createDecorator } = VueClassComponent

@Component({
  template: `
  <div>
    <span>click  --></span><h1 @click="handleClick">{{ message }}</h1>
    
    </div>
  `
})
class App extends Vue {
  message = 'Hello!'
  obj = {
     msg: 'hello'
  }
  rules = {
     validator: ()=>{
       console.log('"this" in data, "this.obj.msg" changed, but "this.message" didn\'t change ' , this)
     }
  }
     
  handleClick(){
   this.message = 'world'
   this.obj.msg = 'world'
   console.log('"this" in method work as expected: ' , this)
   
   this.rules.validator()
  }
}

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