5. Proyecto [vuejs-03]: gestión de eventos

El proyecto [vuejs-03] introduce dos conceptos:

la gestión de un evento [clic] en un botón;
la directiva [v-if], que permite mostrar un bloque HTML de forma condicional;

La estructura del proyecto es la siguiente:

5.1. El script principal [main.js]

El script [main.js] no sufre cambios:


// importaciones
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'

// configuración
Vue.config.productionTip = false

// instanciación del proyecto [App]
new Vue({
  render: h => h(App),
}).$mount('#app')

5.2. El componente principal [App.vue]

El componente principal [App.vue] utiliza el componente [ClickOnMe] en lugar del componente [HelloBootstrap]:


<template>
  <b-container>
    <b-card>
    <!-- Bootstrap Jumbotron -->
    <b-jumbotron>
      <!-- línea -->
      <b-row>
        <!-- columna de 4 de ancho -->
        <b-col cols="4">
          <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
        </b-col>
        <!-- columna de 8 de ancho -->
        <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. El componente [ClickOnMe]

El componente [ClickOnMe] introduce los nuevos conceptos:


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

<script>
  export default {
    name: "ClickOnMe",
    // parámetros del componente
    props: {
      msg: String
    },
    // atributos del componente
    data() {
      return {
        // título del botón
        buttonTitle: "Cacher",
        // controla la visualización del mensaje
        show: true
      };
    },
    // métodos
    methods: {
      // muestra/oculta el mensaje
      changer() {
        if (this.show) {
          // oculta el mensaje
          this.show = false;
          this.buttonTitle = "Montrer";
        } else {
          // se muestra el mensaje
          this.show = true;
          this.buttonTitle = "Cacher";
        }
      }
    }
  };
</script>

Comentarios

líneas 4-6: una alerta verde de Bootstrap. No se indica el número de columnas ocupadas. En ese caso, se utilizan las 12 columnas de Bootstrap;
líneas 8-10: una alerta amarilla de Bootstrap:
- línea 8: la directiva [v-if] de [Vue.js] controla la visibilidad de un bloque HTML. La alerta se controla aquí mediante un valor booleano [show] (línea 29). Si [show==true], la alerta será visible; de lo contrario, no lo será;
- línea 9: la alerta muestra un mensaje [msg] que es una propiedad (líneas 20-22) del componente;
línea 12: un botón de color azul en el que se hace clic para ocultar/mostrar la alerta [warning];
líneas 16-48: el código jS del componente. Este código controla el funcionamiento dinámico del componente:
líneas 20-22: las propiedades del componente;
líneas 24-31: los atributos del componente;

¿Cuál es la diferencia entre [propriétés] y [attributs] de un componente, entre los campos [props] y [data] del objeto exportado por el componente en las líneas 17-47?

Como ya hemos visto, las propiedades [props] de un componente son parámetros del componente. Sus valores se establecen desde fuera del componente. Un componente A que utilice un componente B con las propiedades [prop1, prop2, ..., propn] lo utilizará de la siguiente manera: <B :prop1=’val1’ :prop2=’val2’ ...> ;
el objeto devuelto por la función [data] de las líneas 24-31 representa el estado del componente o los atributos del componente. Este estado se manipula mediante los métodos del componente (líneas 33-46). El <template> de las líneas 1-14 utiliza tanto elementos [propriétés] como [attributs]:
- los valores de las propiedades son fijados por un componente padre;
- los valores de los atributos son fijados inicialmente por la función [data] y luego pueden ser modificados por los métodos;
- en ambos casos, la representación visual reacciona inmediatamente a los cambios de una propiedad (componente padre) o de un atributo (método del componente). Se habla entonces de interfaz reactiva;

En el [template] de un componente, no hay ninguna diferencia entre una propiedad [prop] y un atributo [data]. Para saber si un dato dinámico de [template] debe colocarse en el atributo [props] o en el objeto devuelto por la función [data], basta con preguntarse quién establece el valor de ese dato:

si la respuesta es el componente padre, entonces se colocará el dato en el atributo [props];
si la respuesta es el método que gestiona dicho evento del componente, entonces se colocará el dato en el objeto devuelto por la función [data];

El [template] utiliza aquí los siguientes datos dinámicos:

[show], línea 8. Este dato es procesado internamente por el método [changer], que gestiona el evento [click] del botón de la línea 12. Por lo tanto, se trata de un atributo creado por la función [data] (línea 29);
[msg], línea 9. Se trata de un mensaje establecido por el componente padre. Por lo tanto, se coloca en el atributo [props] (línea 21);
[buttonTitle], línea 12. Este dato es manipulado internamente por el método [changer], que gestiona el evento [click] en el botón de la línea 12. Por lo tanto, se trata de un atributo creado por la función [data] (línea 27);
los nombres de los atributos [name, props, data, methods] del objeto exportado por el componente están predefinidos. No se pueden utilizar otros nombres;
línea 12: el atributo [@click] del botón sirve para designar el método que debe reaccionar al hacer clic en el botón. Este método debe encontrarse en la propiedad [methods] del componente;
línea 33: el atributo [methods] del componente agrupa todos los métodos del mismo. En la mayoría de los casos se trata de funciones que reaccionan a un evento del componente;
líneas 35-46: el método [changer] se invoca cuando el usuario hace clic en el botón:
- si se muestra la alerta [warning], entonces se oculta y el texto del botón pasa a ser [Montrer] (línea 39);
- si la alerta [warning] está oculta, se muestra y el texto del botón pasa a ser [Cacher] (línea 43);
- para mostrar/ocultar la alerta [warning], se modifica el valor del booleano [show] (líneas 38 y 42);
- cuando un método debe hacer referencia al atributo [attr] devuelto por la función [data], se escribe [this.attr] (líneas 38 y 42). Esto significa que los atributos del objeto devuelto por la función [data] son atributos directos del componente [this];

5.4. Ejecución del proyecto

El resultado es el siguiente: