Diretivas

As diretivas são uma das principais funcionalidades do framework Vue.js. Elas permitem que os desenvolvedores adicionem comportamentos dinâmicos a elementos HTML existentes, de forma que possam reagir às mudanças de estado e interagir com os usuários. As diretivas são indicadas por um prefixo v- adicionado ao nome do atributo HTML, seguido do nome da diretiva.

Algumas das diretivas mais comuns do Vue.js incluem:

v-if: adiciona ou remove o elemento do DOM com base em uma expressão booleana;

v-for: renderiza uma lista de itens com base em uma matriz ou objeto;

v-bind: vincula um valor de atributo HTML a uma expressão ou propriedade Vue.js;

v-on: adiciona um ouvinte de evento a um elemento HTML que executa uma função ou método Vue.js quando o evento é acionado;

v-model: vincula uma propriedade de dados Vue.js a um elemento de formulário, permitindo que o usuário atualize o valor da propriedade diretamente pelo elemento de formulário.

Aqui está um exemplo básico de como usar a diretiva v-if para adicionar ou remover um elemento do DOM com base em uma expressão booleana:

  
    <template>
        <div>
          <h1 v-if="showTitle">{{ title }}</h1>
          <p>{{ message }}</p>
        </div>
      </template>
      
      <script>
      export default {
        name: 'MyComponent',
        data() {
          return {
            showTitle: true,
            title: 'Welcome',
            message: 'Hello, World!'
          }
        }
      }
      </script>
   

Neste exemplo, adicionamos a diretiva v-if ao elemento h1, que controla se o elemento é renderizado no DOM ou não. Se a propriedade showTitle for verdadeira, o elemento h1 será renderizado e o título "Welcome" será exibido. Caso contrário, o elemento h1 não será renderizado e o título não será exibido.

Além disso, as diretivas do Vue.js também podem ser modificadores, que alteram o comportamento padrão da diretiva. Por exemplo, a diretiva v-on pode ser usada com o modificador prevent para impedir o comportamento padrão de um evento de formulário, como este:

  
    <template>
        <form v-on:submit.prevent="handleSubmit">
          <input type="text" v-model="inputValue">
          <button type="submit">Submit</button>
        </form>
      </template>
      
      <script>
      export default {
        name: 'MyForm',
        data() {
          return {
            inputValue: ''
          }
        },
        methods: {
          handleSubmit() {
            // enviar o formulário para o servidor
          }
        }
      }
      </script>
  

Neste exemplo, usamos a diretiva v-on com o modificador prevent para impedir que o formulário seja enviado quando o botão "Submit" é clicado. Em vez disso, a função handleSubmit é chamada, permitindo que o desenvolvedor envie o formulário para o servidor por meio de código personalizado.