JSFiddle - React, Tailwind, and code Playground

by Samuel DeVore

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <h1>{{ message }}</h1>
  <button @click="showMessage" class='btn'>Click Me!</button>
</div>

JavaScript

var vm = new Vue({
  el: '#app',
  data: {
    message: '',
    x: 1,
    y: 2
  },
  methods: {
    showMessage: function() {
      alert(this.message);
    }
  },
  computed: {
    z: function() {
      return this.x + this.y;
    }
  }
});

// This property will NOT be reactive!
setTimeout(function() {
  vm.message = 'Hello from the other side!';
}, 2000);

console.log(vm);