Primeiro, definimos uma div para nosso template HTML do Vue.js. Dentro dele usamos duplas colchetes para interpolação de dados no HTML. Dentro já do app do Vue no JavaScript, nós simplesmente definimos os dados e o conectamos com a div para que lá ele renderize e use como template. Por fim, para incrementar um pouco as coisas, adicionamos um contador no app. Observe que o incremento do contador está apenas no JavaScript e ele automaticamente já atualiza no HTML.
Naturalmente, ter os elementos do DOM atualizados com base nos dados é só metade do que a maior parte das aplicações necessita. Ainda devemos considerar o lado inverso, em que os dados são atualizados com base em modificações no DOM e ações dos usuários. O Vue.js utiliza de eventos e métodos para esse tipo de situação. Métodos são funções armazenadas que rodam dentro do contexto do seu app.
Vamos atualizar o exemplo do contador e adicionar a habilidade de iniciar e parar o tempo ao invés de apenas deixá-lo rodando.
No template HTML, adicionamos um botão para começar e um para parar o contador. Para conseguir isso precisamos que o texto do botão seja dinâmico e que exista um gestor de eventos para quando o botão é clicado.
No Vue.js, para declarar um evento em um elemento, utilizamos o prefixo “v-on:” aos evento do DOM padrões. Alguns exemplos: