5. 项目 [vuejs-03]：事件处理

[vuejs-03] 项目介绍了两个概念：

处理按钮上的 [click] 事件；
[v-if] 指令，它允许你根据条件显示 HTML 代码块；

该项目的目录结构如下：

5.1. 主脚本 [main.js]

[main.js] 脚本保持不变：


// 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. 主组件 [App.vue]

主组件 [App.vue] 使用 [ClickOnMe] 组件代替 [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. [ClickOnMe] 组件

[ClickOnMe] 组件引入了以下新概念：


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

第4–6行：一个Bootstrap绿色提示框。未指定使用的列数，因此默认使用Bootstrap的12列布局；
第 8–10 行：一个 Bootstrap 黄色提示框：
- 第 8 行：来自 [Vue.js] 的 [v-if] 指令控制 HTML 块的可见性。此处的提示框由布尔值 [show]（第 29 行）控制。若 [show==true]，则提示框可见；否则不可见；
- 第 9 行：提示框显示一条消息 [msg]，该消息是组件的一个属性（第 20–22 行）；
第 12 行：一个蓝色按钮，点击它可隐藏/显示 [warning] 提示框；
第 16–48 行：组件的 JavaScript 代码。该代码控制组件的动态行为：
第 20–22 行：组件的属性；
第 24–31 行：组件的属性；

组件的 [properties] 和 [attributes] 之间有何区别？第 17–47 行中组件导出的对象的 [props] 和 [data] 字段之间又有何区别？

正如我们所见，组件的 [props] 是其参数。这些参数的值由组件外部设定。当组件 A 使用具有 [prop1, prop2, ..., propn] 属性的组件 B 时，将按如下方式使用：<B :prop1='val1' :prop2='val2' ...>;
第 24–31 行中 [data] 函数返回的对象代表组件的状态或属性。该状态由组件的方法（第 33–46 行）进行操作。第 1–14 行中的 <template> 同时使用了 [props] 和 [data]：
- 属性值由父组件设置；
- 属性值最初由 [data] 函数设置，随后可通过方法进行修改；
- 在两种情况下，视觉渲染都会立即响应属性（父组件）或属性（组件方法）的变化。这被称为响应式界面；

在组件的 [template] 中，[prop] 与 [data] 属性并无区别。要确定 [template] 中的动态数据应放置在 [props] 属性中，还是放置在 [data] 函数返回的对象中，只需问问谁设置了该数据的值：

如果答案是父组件，则该数据应放入 [props] 属性中；
如果答案是处理该事件的组件方法，则该数据应放入 [data] 函数返回的对象中；

[模板]在此处使用了以下动态数据：

[show]，第 8 行。该数据由 [changer] 方法在内部处理，该方法负责管理第 12 行按钮上的 [click] 事件。因此，它是由 [data] 函数（第 29 行）构建的属性；
[msg]，第 9 行。这是由父组件设置的消息。因此，我们将它放置在 [props] 属性中（第 21 行）；
[buttonTitle]，第 12 行。该数据由 [changer] 方法在内部处理，该方法管理第 12 行按钮上的 [click] 事件。因此，它是由 [data] 函数（第 27 行）创建的属性；
组件导出的对象的属性名称 [name, props, data, methods] 是预定义的。您不能使用其他名称；
第 12 行：按钮的 [@click] 属性用于指定响应按钮点击的方法。该方法必须位于组件的 [methods] 属性中；
第 33 行：组件的 [methods] 属性包含其所有方法。大多数情况下，这些是响应组件事件的函数；
第 35–46 行：当用户点击按钮时，会调用 [changer] 方法：
- 如果显示了 [warning] 提示框，则将其隐藏，且按钮文本变为 [Show]（第 39 行）；
- 如果 [warning] 提示框已隐藏，则将其显示，且按钮文本变为 [Hide]（第 43 行）；
- 要显示/隐藏 [warning] 提示框，需修改布尔值 [show] 的值（第 38 行和第 42 行）；
- 当方法需要引用 [data] 函数返回的 [attr] 属性时，我们写 [this.attr]（第 38 行和第 42 行）。这意味着 [data] 函数返回的对象的属性是 [this] 组件的直接属性；

5.4. 运行项目

结果如下：