5. Projeto [vuejs-03]: Tratamento de Eventos

O projeto [vuejs-03] apresenta dois conceitos:

o tratamento de um evento [click] num botão;
a diretiva [v-if], que permite exibir um bloco HTML condicionalmente;

A estrutura de diretórios do projeto é a seguinte:

5.1. O script principal [main.js]

O script [main.js] permanece inalterado:


// imports
import Vue from 'vue'
import App from './App.vue'
 
// plugins
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);
 
// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
 
// configuration
Vue.config.productionTip = false
 
// instanciation projet [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

5.2. O componente principal [App.vue]

O componente principal [App.vue] utiliza o componente [ClickOnMe] em vez do componente [HelloBootstrap]:


<template>
  <b-container>
    <b-card>
    <!-- Bootstrap Jumbotron -->
    <b-jumbotron>
      <!-- ligne -->
      <b-row>
        <!-- colonne de largeur 4 -->
        <b-col cols="4">
          <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
        </b-col>
        <!-- colonne de largeur 8 -->
        <b-col cols="8">
          <h1>Calculez votre impôt</h1>
        </b-col>
      </b-row>
    </b-jumbotron>
    <!-- composant -->
    <ClickOnMe msg="Information..." />
    </b-card>
  </b-container>
</template>
 
 
<script>
import ClickOnMe from "./components/ClickOnMe.vue";
 
export default {
  name: "app",
  components: {
    ClickOnMe
  }
};
</script>

5.3. O componente [ClickOnMe]

O componente [ClickOnMe] introduz os seguintes novos conceitos:


<template>
  <div>
    <!-- message on green background -->
    <b-alert show variant="success" align="center">
      <h4>[vuejs-03] : événement @click, directive v-if, méthodes</h4>
    </b-alert>
    <!-- message on yellow background -->
    <b-alert show variant="warning" align="center" v-if="show">
      <h4>{{msg}}</h4>
    </b-alert>
    <!-- blue button -->
    <b-button variant="primary" @click="changer">{{buttonTitle}}</b-button>
  </div>
</template>
 
<script>
  export default {
    name: "ClickOnMe",
    // paramètres du composant
    props: {
      msg: String
    },
    // attributs du composant
    data() {
      return {
        // titre du bouton
        buttonTitle: "Cacher",
        // contrôle l'affichage du message
        show: true
      };
    },
    // méthodes
    methods: {
      // montre / cache le message
      changer() {
        if (this.show) {
          // on cache le message
          this.show = false;
          this.buttonTitle = "Montrer";
        } else {
          // on montre le message
          this.show = true;
          this.buttonTitle = "Cacher";
        }
      }
    }
  };
</script>

Comentários

linhas 4–6: um alerta verde do Bootstrap. O número de colunas utilizadas não está especificado. Por conseguinte, são utilizadas as 12 colunas do Bootstrap;
linhas 8–10: um alerta amarelo do Bootstrap:
- linha 8: a diretiva [v-if] do [Vue.js] controla a visibilidade de um bloco HTML. O alerta é controlado aqui por um valor booleano [show] (linha 29). Se [show==true], então o alerta será visível; caso contrário, não será;
- linha 9: o alerta exibe uma mensagem [msg], que é uma propriedade (linhas 20–22) do componente;
linha 12: um botão azul em que se clica para ocultar/mostrar o alerta [warning];
linhas 16–48: o código JavaScript do componente. Este código controla o comportamento dinâmico do componente:
linhas 20–22: as propriedades do componente;
linhas 24–31: os atributos do componente;

Qual é a diferença entre as [propriedades] e os [atributos] de um componente, e entre os campos [props] e [data] do objeto exportado pelo componente nas linhas 17–47?

Como já vimos, os [props] de um componente são os seus parâmetros. Os seus valores são definidos a partir do exterior do componente. Um componente A que utilize um componente B com propriedades [prop1, prop2, ..., propn] irá utilizá-lo da seguinte forma: <B :prop1='val1' :prop2='val2' ...>;
O objeto devolvido pela função [data] nas linhas 24–31 representa o estado ou os atributos do componente. Este estado é manipulado pelos métodos do componente (linhas 33–46). O <template> nas linhas 1–14 utiliza tanto [properties] como [attributes]:
- os valores das propriedades são definidos por um componente pai;
- os valores dos atributos são inicialmente definidos pela função [data] e podem depois ser modificados por métodos;
- Em ambos os casos, a renderização visual reage imediatamente a alterações numa propriedade (componente pai) ou num atributo (método do componente). Isto é designado por interface reativa;

No [template] de um componente, não há diferença entre um atributo [prop] e um atributo [data]. Para determinar se os dados dinâmicos no [template] devem ser colocados no atributo [props] ou no objeto devolvido pela função [data], basta perguntar quem define o valor desses dados:

se a resposta for o componente pai, então os dados vão para o atributo [props];
se a resposta for o método do componente que lida com esse evento, então os dados vão para o objeto devolvido pela função [data];

O [modelo] utiliza aqui os seguintes dados dinâmicos:

[show], linha 8. Estes dados são tratados internamente pelo método [changer], que gere o evento [click] no botão na linha 12. Trata-se, portanto, de um atributo construído pela função [data] (linha 29);
[msg], linha 9. Esta é uma mensagem definida pelo componente pai. Por isso, colocamo-la no atributo [props] (linha 21);
[buttonTitle], linha 12. Estes dados são tratados internamente pelo método [changer], que gere o evento [click] no botão na linha 12. Trata-se, portanto, de um atributo criado pela função [data] (linha 27);
Os nomes dos atributos [name, props, data, methods] do objeto exportado pelo componente são predefinidos. Não é possível utilizar outros nomes;
linha 12: o atributo [@click] do botão é utilizado para especificar o método que deve responder a um clique no botão. Este método deve estar localizado na propriedade [methods] do componente;
linha 33: o atributo [methods] do componente contém todos os seus métodos. Na maioria das vezes, trata-se de funções que respondem a um evento do componente;
linhas 35–46: o método [changer] é chamado quando o utilizador clica no botão:
- se o alerta [warning] estiver visível, este é ocultado e o texto do botão muda para [Mostrar] (linha 39);
- se o alerta [warning] estiver oculto, ele é exibido e o texto do botão muda para [Hide] (linha 43);
- para mostrar/ocultar o alerta [warning], alteramos o valor do booleano [show] (linhas 38 e 42);
- quando um método precisa de referenciar o atributo [attr] devolvido pela função [data], escrevemos [this.attr] (linhas 38 e 42). Isto significa que os atributos do objeto devolvido pela função [data] são atributos diretos do componente [this];

5.4. Executar o projeto

O resultado é o seguinte: