vue-class-component playground

by ktsn

HTML

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



<!-- Importing libs -->
<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>

Babel + JSX

const { default: Component, createDecorator } = VueClassComponent

const Log = createDecorator((options, key) => {
  // Keep the original method for later.
	const originalMethod = options.methods[key]
  
  // Wrap the method with the logging logic.
  options.methods[key] = function wrapperMethod(...args) {
    // Print a log
    console.log(`Invoked: ${key}(`, ...args, ')')
    originalMethod.apply(this, args)
  }
})

@Component({
  template: `
  <input ref="input">
  `
})
class App extends Vue {
  mounted() {
    this.$refs.input.focus()
  }
}

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