O caso de uso mais simples com Vue.js

Vue.js é muito bom para se trabalhar com dados. Ele provê meios para acessar, modificar e validar os dados. Indo além ele atua como cola entre os elementos HTML e os dados, removendo do desenvolvedor a irritante tarefa de pegar referências aos elementos DOM apenas para mostra-los/esconde-los ou ler seus valores.

Este exemplo super simples lhe mostrará como habilitar/desabilitar o botão submit quando todos os campos do formulário estiverem preenchidos. Trata-se de um único arquivo HTML com o Vue.js inserido usando uma tag <script>.

O documento:

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>Document</title>
</head>  
<body>  
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
    <script>
        new Vue({
            el: 'body'
        })
    </script>
</body>  
</html>  

Nada de especial está acontecendo no momento: perto da tag </body> está um include javascript e a criação do Vue Object. Como único parâmetro passado ao método construtor Vue() temos um objeto literal contendo algumas informações de configuração. No exemplo acima a propriedade el liga o Vue Objeto ao <body>. Tudo que estiver contido em body estará também disponível para o Vue.js.

Para prosseguir, precisamos do form:

...
<body>  
    <form action="#">
        <div>
            <label for="name">Name</label>
            <input type="text" id="name" name="name">
        </div>
        <div>
            <label for="email">E-mail</label>
            <input type="email" id="email" name="email">
        </div>
        <div><button type="submit">Submit</button></div>
    </form>
</body>  
...

Qual o nosso objetivo? Manter o botão submit desabilitado até que ambos os campos do formulário estejam preenchidos. Agora pare e pense: "- Como você atingiria este objetivo com JS puro ou jQuery?" Provavelmente você pegaria uma referência a ambos os campos e leria seus valores, correto? Bem, com Vue.js isso é um pouco diferente!

Primeiro voltemos ao Vue Object para criar um novo objeto com os dados que estamos interessados...

...
    new Vue({
        el: 'body',
        data: {
          name: '',
          email: ''
        }
    })
...

... e então ligar estes dados ao nosso form:

...
  <input type="text" id="name" name="name" v-model="name">
  <input type="email" id="email" name="email" v-model="email">
...

Preste atenção ao novo atributo v-model agora presente em ambos os campos. Eles contém uma referência direta às propriedades contidas no nosso objeto data que vive dentro do Vue Object.

Esta propriedade (v-model) é uma diretiva e sua finalidade é ligar ao HTML os dados carregado em memória e acessíveis via Javascript. Ao fazer isso, tudo o que for digitado nos campos mudará a informação disponível para o Javascript. O oposto também é verdadeiro e se a informação for modificado no Javascript, digamos, pelo retorno de uma chamada AJAX, o novo valor será automaticamente mostrado no campo do formulário.

Este útil comportamento é chamado de two-way data binding.

Estamos chegando lá!

Agora é chegada a hora de trabalhar no botão, afinal, ele é o nosso personagem principal neste exemplo. Para incluir o comportamento desejado vamos usar uma outra diretive: v-bind. Sua função é adicionar de forma condicional atributos aos elementos HTML, baseada no estado dos dados contidos em memória. Neste caso em particular faremos uso da propriedade nativa disabled:

...
<div>  
    <button type="submit"
        v-bind:disabled="(name != '' && email != '')">
        Submit
    </button>
</div>  
...

Ao usar a configuração acima o Vue Object é instruído a fazer o seguinte: adicionar o atributo disable ao <button> quanto name e email não forem vazios. Graças ao two-way data binding isso é feito em tempo real e de forma automatica. Este é o poder do Vue.

Mas isso é meio que sujo, não é mesmo? E se for necessário validar a estrutura do e-mail antes de considerar o form como válido para envio? Bem, há uma forma melhor de implementar esta validação: computed property.

...
    new Vue({
        el: 'body',
        data: {
          name: '',
          email: ''
        },
        computed: {
          isValid: function () {
            return this.name != '' && this.email != ''
          }
        }
    })
...
...
<div><button type="submit" v-bind:disabled="!isValid">Submit</button></div>  
...

Mais uma vez, graças à natureza reativa do Vue.js todas as vezes que uma das propriedades mencionadas no método isValid() forem modificadas, o método será executado, retornando true ou false. E uma vez que o método é um método como outro qualquer você pode fazer qualquer tipo de verificar dentro dele!

Abaixo você encontra o código completo. Se quiser ver em ação, há um Fiddle disponível aqui: https://jsfiddle.net/vedovelli/focs85v3/

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>Document</title>
</head>  
<body>  
    <form action="#">
        <div>
            <label for="name">Name</label>
            <input type="text" id="name" name="name" v-model="name">
        </div>
        <div>
            <label for="email">E-mail</label>
            <input type="email" id="email" name="email" v-model="email">
        </div>
        <div><button type="submit" v-bind:disabled="!isValid">Submit</button></div>
    </form>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.25/vue.min.js"></script>
    <script>
    new Vue({
        el: 'body',
        data: {
          name: '',
          email: ''
        },
        computed: {
          isValid: function () {
            return this.name != '' && this.email != ''
          }
        }
    })
    </script>
</body>  
</html>  

Segue exemplo: