Sistema aula, Vue.js

by Jairo Fontes

HTML

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

<div id="app">
  <p>{{ message }}</p>
  <button v-on:click="play">Atenção</button>
  <button v-on:click="make">Faça</button>
  <button v-on:click="pause">Pausar</button>
  <input v-model="temp" type='number'>
  <p>{{ temp }}</p>
</div>

JavaScript

new Vue({
  el: '#app',
  data: {
    message: '',
    temp: '',
  },
	methods: {
    play: function () {
    	this.message = 'Aula em andamento (Olhe para o professor!)';
    },
    make: function () {
    	this.message = 'Hora de fazer!';
      setTimeout(myFunction, this.temp);
      function myFunction(){
      	this.play();
      }
    },
    pause: function () {
      this.message = 'Aula pausada por: (nome)!'
    },
    tempoExpirou: function(){
    	alert("o tempo acabou!");
    }
  } 
})