5. Projekt [vuejs-03]: obsługa zdarzeń

Projekt [vuejs-03] wprowadza dwie koncepcje:

obsługę zdarzenia [clic] na przycisku;
dyrektywa [v-if], która umożliwia warunkowe wyświetlanie bloku HTML;

Struktura drzewa projektu wygląda następująco:

5.1. Główny skrypt [main.js]

Skrypt [main.js] pozostaje bez zmian:


// importy
import Vue from 'vue'
import App from './App.vue'

// wtyczki
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

// bootstrap
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

// konfiguracja
Vue.config.productionTip = false

// instancjonowanie projektu [App]
new Vue({
  render: h => h(App),
}).$mount('#aplikacja')

5.2. Główny komponent [App.vue]

Główny komponent [App.vue] wykorzystuje komponent [ClickOnMe] zamiast komponentu [HelloBootstrap]:


<template>
  <b-container>
    <b-card>
    <!-- Jumbotron Bootstrap -->
    <b-jumbotron>
      <!-- wiersz -->
      <b-row>
        <!-- kolumna o szerokości 4 -->
        <b-col cols="4">
          <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
        </b-col>
        <!-- kolumna o szerokości 8 -->
        <b-col cols="8">
          <h1>Calculez votre impôt</h1>
        </b-col>
      </b-row>
    </b-jumbotron>
    <!-- komponent -->
    <ClickOnMe msg="Information..." />
    </b-card>
  </b-container>
</template>


<script>
import ClickOnMe from "./components/ClickOnMe.vue";

export default {
  name: "app",
  components: {
    ClickOnMe
  }
};
</script>

5.3. Komponent [ClickOnMe]

Komponent [ClickOnMe] wprowadza nowe pojęcia:


<template>
  <div>
    <!-- komunikat na zielonym tle -->
    <b-alert show variant="success" align="center">
      <h4>[vuejs-03] : événement @click, directive v-if, méthodes</h4>
    </b-alert>
    <!-- komunikat na żółtym tle -->
    <b-alert show variant="warning" align="center" v-if="show">
      <h4>{{msg}}</h4>
    </b-alert>
    <!-- niebieski przycisk -->
    <b-button variant="primary" @click="changer">{{buttonTitle}}</b-button>
  </div>
</template>

<script>
  export default {
    name: "ClickOnMe",
    // parametry komponentu
    props: {
      msg: String
    },
    // atrybuty komponentu
    data() {
      return {
        // tytuł przycisku
        buttonTitle: "Cacher",
        // kontroluje wyświetlanie komunikatu
        show: true
      };
    },
    // metody
    methods: {
      // wyświetla / ukrywa komunikat
      changer() {
        if (this.show) {
          // ukrywa komunikat
          this.show = false;
          this.buttonTitle = "Montrer";
        } else {
          // wyświetla się komunikat
          this.show = true;
          this.buttonTitle = "Cacher";
        }
      }
    }
  };
</script>

Uwagi

wiersze 4–6: zielone ostrzeżenie Bootstrap. Liczba zajętych kolumn nie jest podana. W takim przypadku wykorzystywanych jest 12 kolumn Bootstrap;
wiersze 8–10: żółte ostrzeżenie Bootstrap:
- wiersz 8: dyrektywa [v-if] z pliku [Vue.js] kontroluje widoczność bloku HTML. Powiadomienie jest tutaj kontrolowane przez zmienną logiczną [show] (wiersz 29). Jeśli [show==true], to powiadomienie będzie widoczne, w przeciwnym razie nie będzie;
- wiersz 9: alert wyświetla komunikat [msg], który jest właściwością (wiersze 20–22) komponentu;
wiersz 12: niebieski przycisk, którego kliknięcie powoduje ukrycie/wyświetlenie ostrzeżenia o kodzie [warning];
wiersze 16–48: kod komponentu jS. Kod ten reguluje dynamiczne działanie komponentu:
wiersze 20–22: właściwości komponentu;
wiersze 24–31: atrybuty komponentu;

Jaka jest różnica między kodami [propriétés] i [attributs] komponentu, a także między polami [props] i [data] obiektu eksportowanego przez komponent w wierszach 17–47?

Jak już widzieliśmy, właściwości [props] komponentu są parametrami tego komponentu. Ich wartości są ustalane spoza komponentu. Komponent A wykorzystujący komponent B o właściwościach [prop1, prop2, ..., propn] będzie go używał w następujący sposób: <B :prop1=’val1’ :prop2=’val2’ ...> ;
obiekt zwracany przez funkcję [data] w wierszach 24–31 reprezentuje stan komponentu lub atrybuty komponentu. Stan ten jest modyfikowany za pomocą metod komponentu (wiersze 33–46). Element <template> w wierszach 1–14 wykorzystuje zarówno elementy [propriétés], jak i [attributs]:
- wartości właściwości są ustalane przez komponent nadrzędny;
- wartości atrybutów są początkowo ustalane przez funkcję [data], a następnie mogą być modyfikowane przez metody;
- w obu przypadkach wygląd reaguje natychmiast na zmiany właściwości (komponent nadrzędny) lub atrybutu (metoda komponentu). Mówimy wówczas o interfejsie reaktywnym;

W komponencie [template] nie ma żadnej różnicy między właściwością [prop] a atrybutem [data]. Aby ustalić, czy dane dynamiczne o wartości [template] należy umieścić w atrybucie [props], czy w obiekcie zwracanym przez funkcję [data], wystarczy zadać sobie pytanie, kto ustala wartość tych danych:

jeśli odpowiedzią jest komponent nadrzędny, wówczas dany element umieszcza się w atrybucie [props];
jeśli odpowiedzią jest metoda obsługująca dane zdarzenie w komponencie, wówczas dane umieści się w obiekcie zwracanym przez funkcję [data];

[template] wykorzystuje tutaj następujące dane dynamiczne:

[show], wiersz 8. Dane te są przetwarzane wewnętrznie przez metodę [changer], która obsługuje zdarzenie [click] związane z przyciskiem w wierszu 12. Jest to zatem atrybut utworzony przez funkcję [data] (wiersz 29);
[msg], wiersz 9. Jest to komunikat ustalony przez komponent nadrzędny. Umieszcza się go zatem w atrybucie [props] (wiersz 21);
[buttonTitle], wiersz 12. Dane te są przetwarzane wewnętrznie przez metodę [changer], która obsługuje zdarzenie [click] związane z przyciskiem w wierszu 12. Jest to zatem atrybut utworzony przez funkcję [data] (wiersz 27);
nazwy atrybutów [name, props, data, methods] obiektu eksportowanego przez komponent są z góry zdefiniowane. Nie można używać innych nazw;
wiersz 12: atrybut [@click] przycisku służy do wskazania metody, która ma zareagować na kliknięcie przycisku. Metoda ta musi znajdować się we właściwości [methods] komponentu;
wiersz 33: atrybut [methods] komponentu zawiera wszystkie jego metody. W większości przypadków są to funkcje reagujące na zdarzenie komponentu;
wiersze 35–46: metoda [changer] jest wywoływana, gdy użytkownik kliknie przycisk:
- jeśli alert [warning] jest wyświetlony, to zostaje ukryty, a tekst przycisku zmienia się na [Montrer] (wiersz 39);
- jeśli komunikat [warning] jest ukryty, to zostaje wyświetlony, a tekst przycisku zmienia się na [Cacher] (wiersz 43);
- aby wyświetlić/ukryć alert [warning], należy zmienić wartość zmiennej logicznej [show] (wiersze 38 i 42);
- gdy metoda musi odwołać się do atrybutu [attr] zwracanego przez funkcję [data], należy wpisać [this.attr] (wiersze 38 i 42). Oznacza to, że atrybuty obiektu zwracanego przez funkcję [data] są bezpośrednimi atrybutami komponentu [this];

5.4. Wykonanie projektu

Wynik jest następujący: