JSFiddle - React, Tailwind, and code Playground

by rudylattae

HTML

<button class="mount" onclick="load()">Start</button>
<button class="append" onclick="unload()">Stop</button>

<div class="container">
    <p>I am here already</p>
</div>

JavaScript

// =================
// The Component
// =================

var template = '\
<div class="app-icon-title">\
  <button class="app-icon" v-on="click: emitHello">\
  Hello</button>\
  <span class="app-title">{{title}}</span>\
</div>\
';

var EVENTS = {
  SAY_HELLO: 'say-hello'
};

var AppIconAndTitle = Vue.extend({ 
  name: 'app-icon-title',

  template: template,

  data: function() {
    return {
      title: "I am The App"
    };
  },

  methods: {
    emitSayHello: function() {
      this.$emit( EVENTS.SAY_HELLO );
    }
  }
});

AppIconAndTitle.EVENTS = EVENTS;


// =================
// The App
// =================
var icon;

function load() {
    icon = new AppIconAndTitle();
    
    icon.$on( AppIconAndTitle.EVENTS.SAY_HELLO, _sayHello);
    
    icon.$mount();
    icon.$appendTo('.container');
}

function unload() {
    icon.$off();
    icon.$remove();
    icon.$destroy();
}

function _sayHello() {
    
}