5. Проєкт [vuejs-03]: управління подіями

Проєкт [vuejs-03] запроваджує дві концепції:

обробку події [clic] на кнопці;
директива [v-if], яка дозволяє відображати блок HTML за певних умов;

Структура проекту така:

5.1. Головний скрипт [main.js]

Скрипт [main.js] залишається без змін:


// імпорт
import Vue from 'vue'
import App from './App.vue'

// плагіни
import BootstrapVue from 'bootstrap-vue'
Vue.use(BootstrapVue);

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

// конфігурація
Vue.config.productionTip = false

// інстанціювання проєкту [App]
new Vue({
  render: h => h(App),
}).$mount('#додаток')

5.2. Головний компонент [App.vue]

Головний компонент [App.vue] використовує компонент [ClickOnMe] замість компонента [HelloBootstrap]:


<template>
  <b-container>
    <b-card>
    <!-- Bootstrap Jumbotron -->
    <b-jumbotron>
      <!-- рядок -->
      <b-row>
        <!-- стовпець шириною 4 -->
        <b-col cols="4">
          <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
        </b-col>
        <!-- стовпець шириною 8 -->
        <b-col cols="8">
          <h1>Calculez votre impôt</h1>
        </b-col>
      </b-row>
    </b-jumbotron>
    <!-- компонент -->
    <ClickOnMe msg="Information..." />
    </b-card>
  </b-container>
</template>


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

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

5.3. Компонент [ClickOnMe]

Компонент [ClickOnMe] запроваджує нові поняття:


<template>
  <div>
    <!-- повідомлення на зеленому тлі -->
    <b-alert show variant="success" align="center">
      <h4>[vuejs-03] : événement @click, directive v-if, méthodes</h4>
    </b-alert>
    <!-- повідомлення на жовтому тлі -->
    <b-alert show variant="warning" align="center" v-if="show">
      <h4>{{msg}}</h4>
    </b-alert>
    <!-- синя кнопка -->
    <b-button variant="primary" @click="changer">{{buttonTitle}}</b-button>
  </div>
</template>

<script>
  export default {
    name: "ClickOnMe",
    // параметри компонента
    props: {
      msg: String
    },
    // атрибути компонента
    data() {
      return {
        // заголовок кнопки
        buttonTitle: "Cacher",
        // керує відображенням повідомлення
        show: true
      };
    },
    // методи
    methods: {
      // показує / приховує повідомлення
      changer() {
        if (this.show) {
          // повідомлення приховано
          this.show = false;
          this.buttonTitle = "Montrer";
        } else {
          // показати повідомлення
          this.show = true;
          this.buttonTitle = "Cacher";
        }
      }
    }
  };
</script>

Коментарі

рядки 4–6: зелене попередження Bootstrap. Кількість зайнятих стовпців не вказано. Отже, використовуються 12 стовпців Bootstrap;
рядки 8–10: жовте попередження Bootstrap:
- рядок 8: директива [v-if] з [Vue.js] керує видимістю блоку HTML. Повідомлення тут керується булевою змінною [show] (рядок 29). Якщо [show==true], то повідомлення буде видимим, інакше — ні;
- рядок 9: сповіщення відображає повідомлення [msg], яке є властивістю (рядки 20–22) компонента;
рядок 12: синя кнопка, натискання на яку дозволяє приховати/показати сповіщення [warning];
рядки 16–48: код jS компонента. Цей код регулює динамічну роботу компонента:
рядки 20–22: властивості компонента;
рядки 24–31: атрибути компонента;

У чому полягає різниця між [propriétés] та [attributs] компонента, а також між полями [props] та [data] об’єкта, експортованого компонентом у рядках 17–47?

Як ми вже бачили, властивості [props] компонента є його параметрами. Їхні значення задаються ззовні компонента. Компонент A, що використовує компонент B із властивостями [prop1, prop2, ..., propn], буде використовувати його таким чином: <B :prop1=’val1’ :prop2=’val2’ ...> ;
об’єкт, що повертається функцією [data] у рядках 24–31, представляє стан компонента або атрибути компонента. Цей стан обробляється методами компонента (рядки 33–46). Елемент <template> у рядках 1–14 використовує як елементи [propriétés], так і [attributs]:
- значення властивостей встановлюються батьківським компонентом;
- значення атрибутів спочатку встановлюються функцією [data], а потім можуть бути змінені методами;
- в обох випадках візуальне відображення миттєво реагує на зміни властивості (батьківський компонент) або атрибута (метод компонента). У цьому випадку мова йде про реактивний інтерфейс;

У [template] компонента нічим не відрізняється властивість [prop] від атрибута [data]. Щоб дізнатися, чи слід розмістити динамічні дані [template] в атрибуті [props] чи в об’єкті, що повертається функцією [data], потрібно просто з’ясувати, хто встановлює значення цих даних:

якщо це робить батьківський компонент, то дані слід помістити в атрибут [props];
якщо відповідь — метод, що обробляє таку подію компонента, то дані слід помістити в об’єкт, що повертається функцією [data];

[template] використовує тут такі динамічні дані:

[show], рядок 8. Цей параметр обробляється внутрішньо методом [changer], який обробляє подію [click] для кнопки в рядку 12. Отже, це атрибут, створений функцією [data] (рядок 29);
[msg], рядок 9. Це повідомлення, задане батьківським компонентом. Тому його поміщають в атрибут [props] (рядок 21);
[buttonTitle], рядок 12. Ці дані обробляються внутрішньо методом [changer], який обробляє подію [click] для кнопки в рядку 12. Отже, це атрибут, створений функцією [data] (рядок 27);
імена атрибутів [name, props, data, methods] об’єкта, що експортується компонентом, є заздалегідь визначеними. Інші імена використовувати не можна;
рядок 12: атрибут [@click] кнопки слугує для позначення методу, який має реагувати на натискання кнопки. Цей метод має міститися у властивості [methods] компонента;
рядок 33: атрибут [methods] компонента об’єднує всі його методи. Здебільшого це функції, що реагують на подію компонента;
рядки 35–46: метод [changer] викликається, коли користувач натискає на кнопку:
- якщо сповіщення [warning] відображається, то воно приховується, а текст кнопки змінюється на [Montrer] (рядок 39);
- якщо сповіщення [warning] приховане, то воно відображається, а текст кнопки змінюється на [Cacher] (рядок 43);
- щоб показати/приховати попередження [warning], змінюють значення логічного значення [show] (рядки 38 і 42);
- коли метод повинен посилатися на атрибут [attr], повернений функцією [data], записується [this.attr] (рядки 38 і 42). Це означає, що атрибути об’єкта, поверненого функцією [data], є прямими атрибутами компонента [this];

5.4. Виконання проекту

Результат такий: