JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<script src="https://unpkg.com/vue"></script>
<div id="jquery-app">
  <h4>jQuery</h4>
  <button id="jq-btn">0</button>
</div>

<br><hr><br>

<div id="vue-app">
  <h4>Vue</h4>
  <button @click="increase">{{ btnText }}</button>
</div>

JavaScript

// jquery app
(function() {
	$('#jq-btn').click(function() {
  	//get btn text and convert it to Number
    var btnText = parseInt($(this).text());
    btnText++;
    //now set the btn text
    $(this).text(btnText);
  });
})();


// vue app

new Vue({
	el: '#vue-app', // tell it what element is the vue app
  data: {
  	btnText: 0 // since we set 0 here, it will reflect where we wrote {{ btnText }} in our html
  },
  methods: {
  	increase: function() {
    	// just increase the value of btnText here and it will automatically reflect in html
      this.btnText++;
    }
  }
});