5. Projeto [vuejs-03]: gestão de eventos

O projeto [vuejs-03] introduz dois conceitos:

a gestão de um evento [clic] num botão;
a diretiva [v-if], que permite apresentar um bloco HTML de forma condicional;

A estrutura do projeto é a seguinte:

5.1. O script principal [main.js]

O script [main.js] permanece inalterado:


// importações
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'

// configuração
Vue.config.productionTip = false

// instanciação do projeto [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>
      <!-- linha -->
      <b-row>
        <!-- coluna com largura 4 -->
        <b-col cols="4">
          <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
        </b-col>
        <!-- coluna com largura 8 -->
        <b-col cols="8">
          <h1>Calculez votre impôt</h1>
        </b-col>
      </b-row>
    </b-jumbotron>
    <!-- componente -->
    <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 novos conceitos:


<template>
  <div>
    <!-- mensagem sobre fundo verde -->
    <b-alert show variant="success" align="center">
      <h4>[vuejs-03] : événement @click, directive v-if, méthodes</h4>
    </b-alert>
    <!-- mensagem sobre fundo amarelo -->
    <b-alert show variant="warning" align="center" v-if="show">
      <h4>{{msg}}</h4>
    </b-alert>
    <!-- botão azul -->
    <b-button variant="primary" @click="changer">{{buttonTitle}}</b-button>
  </div>
</template>

<script>
  export default {
    name: "ClickOnMe",
    // parâmetros do componente
    props: {
      msg: String
    },
    // atributos do componente
    data() {
      return {
        // título do botão
        buttonTitle: "Cacher",
        // controla a exibição da mensagem
        show: true
      };
    },
    // métodos
    methods: {
      // mostra/oculta a mensagem
      changer() {
        if (this.show) {
          // oculta a mensagem
          this.show = false;
          this.buttonTitle = "Montrer";
        } else {
          // mostra a mensagem
          this.show = true;
          this.buttonTitle = "Cacher";
        }
      }
    }
  };
</script>

Comentários

linhas 4-6: um alerta verde do Bootstrap. O número de colunas ocupadas não é indicado. Nesse caso, são utilizadas as 12 colunas do Bootstrap;
linhas 8-10: um alerta amarelo do Bootstrap:
- linha 8: a diretiva [v-if] de [Vue.js] controla a visibilidade de um bloco HTML. O alerta é aqui controlado 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 no qual se clica para ocultar/mostrar o alerta [warning];
linhas 16-48: o código jS do componente. Este código define o funcionamento dinâmico do componente:
linhas 20-22: as propriedades do componente;
linhas 24-31: os atributos do componente;

Qual é a diferença entre [propriétés] e [attributs] de um componente, entre os campos [props] e [data] do objeto exportado pelo componente nas linhas 17-47?

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

No [template] de um componente, não há diferença entre uma propriedade [prop] e um atributo [data]. Para saber se um dado dinâmico do [template] deve ser colocado no atributo [props] ou no objeto devolvido pela função [data], basta perguntar-se quem define o valor desse dado:

se a resposta for o componente pai, então o dado será colocado no atributo [props];
se a resposta for o método que gere esse evento do componente, então o dado será colocado no objeto devolvido pela função [data];

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

[show], linha 8. Este dado é processado internamente pelo método [changer], que gere o evento [click] no botão da linha 12. Trata-se, portanto, de um atributo criado pela função [data] (linha 29);
[msg], linha 9. Trata-se de uma mensagem definida pelo componente pai. Por isso, é colocada no atributo [props] (linha 21);
[buttonTitle], linha 12. Este dado é processado internamente pelo método [changer], que gere o evento [click] no botão da 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 serve para designar o método que deve reagir ao clique no botão. Este método deve encontrar-se na propriedade [methods] do componente;
linha 33: o atributo [methods] do componente reúne 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, é ocultado e o texto do botão passa a ser [Montrer] (linha 39);
- se o alerta [warning] estiver oculto, é exibido e o texto do botão passa a ser [Cacher] (linha 43);
- para exibir/ocultar o alerta [warning], altera-se o valor do booleano [show] (linhas 38 e 42);
- quando um método precisa de referenciar o atributo [attr] devolvido pela função [data], escreve-se [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. Execução do projeto

O resultado é o seguinte: