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. لم يتم تحديد عدد الأعمدة المستخدمة. لذلك، يتم استخدام الأعمدة الـ 12 في Bootstrap؛
• الأسطر 8–10: تنبيه أصفر من Bootstrap:
  • السطر 8: يتحكم التوجيه [v-if] من [Vue.js] في ظهور كتلة HTML. يتم التحكم في التنبيه هنا بواسطة قيمة منطقية [show] (السطر 29). إذا كانت [show==true]، فسيكون التنبيه مرئيًا؛ وإلا، فلن يكون مرئيًا؛
  • السطر 9: يعرض التنبيه رسالة [msg]، وهي خاصية (السطور 20-22) للمكون؛
• السطر 12: زر أزرق تنقر عليه لإخفاء/إظهار تنبيه [warning]؛
• الأسطر 16-48: كود JavaScript الخاص بالمكون. يتحكم هذا الكود في السلوك الديناميكي للمكون:
• الأسطر 20-22: خصائص المكون؛
• الأسطر 24-31: سمات المكون؛

ما الفرق بين [خصائص] المكون و[سماته]، وبين حقول [props] و[data] للكائن الذي يتم تصديره بواسطة المكون في الأسطر 17–47؟

• كما رأينا سابقًا، [props] المكون هي معلماته. يتم تعيين قيمها من خارج المكون. سيستخدم المكون A الذي يستخدم المكون B ذي الخصائص [prop1, prop2, ..., propn] هذا المكون على النحو التالي: <B :prop1='val1' :prop2='val2' ...>؛
• يمثل الكائن الذي ترجعها الدالة [data] في الأسطر 24–31 حالة المكون أو سماته. يتم التعامل مع هذه الحالة بواسطة أساليب المكون (الأسطر 33–46). يستخدم <template> في الأسطر 1–14 كلاً من [props] و[attributes]:
  • يتم تعيين قيم الخصائص بواسطة مكون أبوي؛
  • يتم تعيين قيم السمات مبدئيًا بواسطة دالة [data] ويمكن تعديلها بعد ذلك بواسطة الطرق؛
  • في كلتا الحالتين، يستجيب العرض المرئي فورًا للتغييرات في خاصية (المكون الأصلي) أو سمة (طريقة المكون). ويُشار إلى هذا باسم واجهة تفاعلية؛

في [القالب] الخاص بالمكون، لا يوجد فرق بين سمة [prop] وسمة [data]. لتحديد ما إذا كان يجب وضع البيانات الديناميكية في [القالب] في سمة [props] أو في الكائن الذي ترجعها دالة [data]، ما عليك سوى السؤال عن من يحدد قيمة تلك البيانات:

• إذا كان الجواب هو المكون الأصلي، فإن البيانات تذهب إلى سمة [props]؛
• إذا كان الجواب هو طريقة المكون التي تتعامل مع هذا الحدث، فإن البيانات تذهب إلى الكائن الذي ترجعها الدالة [data]؛

يستخدم [القالب] البيانات الديناميكية التالية هنا:

• [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]، يتم إخفاؤه ويتغير نص الزر إلى [Show] (السطر 39)؛
  • إذا كان تنبيه [warning] مخفيًا، يتم عرضه ويتغير نص الزر إلى [Hide] (السطر 43)؛
  • لعرض/إخفاء تنبيه [warning]، نقوم بتغيير قيمة المتغير المنطقي [show] (السطران 38 و42)؛
  • عندما تحتاج إحدى الطرق إلى الإشارة إلى السمة [attr] التي ترجعها الدالة [data]، نكتب [this.attr] (السطران 38 و42). وهذا يعني أن سمات الكائن الذي ترجعها الدالة [data] هي سمات مباشرة لمكون [this]؛

5.4. تشغيل المشروع

والنتيجة هي كما يلي: