JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app"></div>

CSS

#app {
  border: 1px dotted red;
}

JavaScript

const Child = {
  props: ['user', 'other'],

  render (h) {
    console.log('child render')
    //debugger
    return h('div', this.user + ' : ' + this.other)
  },
  
  computed: {
    blah () {
      return this.user + '==' + this.other
    }
  },
  
  watch: {
    blah: {
      flush: 'sync',
    
      handler () {
        console.log('watch blah: ' + this.blah)
      }
    }
  }
}

const app = new Vue({
/*   render () {
    //debugger
    return Vue.h('div', [Vue.h(Child, {  })])
  },
   */
   
  template: `
    <div>
      <button @click="admin += '!'">Click</button>
      <child :user="admin" :other="admin"></child>
    </div>
  `,
  
  components: {
    Child
  },
  
  data () {
    return {
      admin: 'Bob'
    }
  },
  
  beforeMount () {
    //debugger
  },
  
  beforeUpdate () {
    //debugger
  }
})

app.$mount('#app')