JSFiddle - React, Tailwind, and code Playground

by giordanna

HTML

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

<div id="app1">
  <h1 ref="heading">{{ title }}</h1>
  <button v-on:click="show">Show Paragraph</button>
  <p v-if="showParagraph">This is not always visible</p>
</div>

<div id="app2">
  <h1 ref="heading">{{ title }}</h1>
  <button @click="onChange">Change something in Vue 1</button>
</div>

JavaScript

var vm1 = new Vue({
  el: '#app1',
  data: {
    title: 'The VueJS Instance',
    showParagraph: false
  },
  methods: {
    show: function() {
      this.showParagraph = true;
      this.updateTitle('The VueJS Instance (Updated)');
    },
    updateTitle: function(title) {
      this.title = title;
    }
  },
  computed: {
    lowercaseTitle: function() {
      return this.title.toLowerCase();
    }
  },
  watch: {
    title: function(value) {
      alert('Title changed, new value: ' + value);
    }
  }
});

setTimeout(function () {
	vm1.title = "Changed by Timer";
}, 3000);

var vm2 = new Vue({
	el: '#app2',
  data: {
  	title: 'The second instance'
  },
  methods: {
  	onChange: function() {
    	vm1.title = "Changed"
    }
  }
});