5. Progetto [vuejs-03]: Gestione degli eventi

Il progetto [vuejs-03] introduce due concetti:

gestione di un evento [click] su un pulsante;
la direttiva [v-if], che consente di visualizzare un blocco HTML in modo condizionale;

La struttura delle directory del progetto è la seguente:

5.1. Lo script principale [main.js]

Lo script [main.js] rimane invariato:


// 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. Il componente principale [App.vue]

Il componente principale [App.vue] utilizza il componente [ClickOnMe] al posto del 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. Il componente [ClickOnMe]

Il componente [ClickOnMe] introduce i seguenti nuovi concetti:


<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>

Commenti

righe 4–6: un avviso verde di Bootstrap. Il numero di colonne utilizzate non è specificato. Pertanto, vengono utilizzate le 12 colonne di Bootstrap;
righe 8–10: un avviso giallo di Bootstrap:
- riga 8: la direttiva [v-if] di [Vue.js] controlla la visibilità di un blocco HTML. L'avviso è controllato qui da un valore booleano [show] (riga 29). Se [show==true], l'avviso sarà visibile; altrimenti, non lo sarà;
- riga 9: l'avviso visualizza un messaggio [msg], che è una proprietà (righe 20–22) del componente;
riga 12: un pulsante blu su cui cliccare per nascondere/mostrare l'avviso [warning];
righe 16–48: il codice JavaScript del componente. Questo codice controlla il comportamento dinamico del componente:
righe 20–22: le proprietà del componente;
righe 24–31: gli attributi del componente;

Qual è la differenza tra le [proprietà] e gli [attributi] di un componente, e tra i campi [props] e [data] dell'oggetto esportato dal componente nelle righe 17–47?

Come abbiamo già visto, i [props] di un componente sono i suoi parametri. I loro valori vengono impostati dall'esterno del componente. Un componente A che utilizza un componente B con proprietà [prop1, prop2, ..., propn] lo utilizzerà come segue: <B :prop1='val1' :prop2='val2' ...>;
L'oggetto restituito dalla funzione [data] nelle righe 24–31 rappresenta lo stato o gli attributi del componente. Questo stato viene manipolato dai metodi del componente (righe 33–46). Il <template> nelle righe 1–14 utilizza sia [properties] che [attributes]:
- i valori delle proprietà sono impostati da un componente padre;
- i valori degli attributi sono inizialmente impostati dalla funzione [data] e possono poi essere modificati dai metodi;
- In entrambi i casi, la resa visiva reagisce immediatamente alle modifiche di una proprietà (componente padre) o di un attributo (metodo del componente). Questo viene definito interfaccia reattiva;

Nel [template] di un componente, non c'è differenza tra un attributo [prop] e un attributo [data]. Per determinare se i dati dinamici nel [template] debbano essere inseriti nell'attributo [props] o nell'oggetto restituito dalla funzione [data], basta chiedersi chi imposta il valore di quei dati:

se la risposta è il componente padre, allora i dati vanno nell'attributo [props];
se la risposta è il metodo del componente che gestisce quell'evento, allora i dati vanno nell'oggetto restituito dalla funzione [data];

Il [modello] utilizza qui i seguenti dati dinamici:

[show], riga 8. Questo dato viene gestito internamente dal metodo [changer], che gestisce l'evento [click] sul pulsante alla riga 12. Si tratta quindi di un attributo costruito dalla funzione [data] (riga 29);
[msg], riga 9. Si tratta di un messaggio impostato dal componente padre. Lo inseriamo quindi nell'attributo [props] (riga 21);
[buttonTitle], riga 12. Questo dato viene gestito internamente dal metodo [changer], che gestisce l'evento [click] sul pulsante alla riga 12. Si tratta quindi di un attributo creato dalla funzione [data] (riga 27);
I nomi degli attributi [name, props, data, methods] dell'oggetto esportato dal componente sono predefiniti. Non è possibile utilizzare altri nomi;
riga 12: l'attributo [@click] del pulsante viene utilizzato per specificare il metodo che deve rispondere a un clic sul pulsante. Questo metodo deve trovarsi nella proprietà [methods] del componente;
riga 33: l'attributo [methods] del componente contiene tutti i suoi metodi. Il più delle volte si tratta di funzioni che rispondono a un evento del componente;
righe 35–46: il metodo [changer] viene chiamato quando l'utente clicca sul pulsante:
- se l'avviso [warning] è visualizzato, viene nascosto e il testo del pulsante cambia in [Show] (riga 39);
- se l'avviso [warning] è nascosto, viene visualizzato e il testo del pulsante cambia in [Hide] (riga 43);
- per mostrare/nascondere l'avviso [warning], modifichiamo il valore del booleano [show] (righe 38 e 42);
- quando un metodo deve fare riferimento all'attributo [attr] restituito dalla funzione [data], scriviamo [this.attr] (righe 38 e 42). Ciò significa che gli attributi dell'oggetto restituito dalla funzione [data] sono attributi diretti del componente [this];

5.4. Esecuzione del progetto

Il risultato è il seguente: