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

//بوت‌استرپ
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('#app')

5.2. کامپوننت اصلی [App.vue]

کامپوننت اصلی [App.vue] به جای کامپوننت [HelloBootstrap] از کامپوننت [ClickOnMe] استفاده می‌کند:

<template>
  <b-container>
    <b-card>
    <!--بوت‌استرپ جامبوترون -->
    <b-jumbotron>
      <!-- ردیف -->
      <b-row>
        <!--عرض ستون ۴ -->
        <b-col cols="4">
          <img src="./assets/logo.jpg" alt="Cerisier en fleurs" />
        </b-col>
        <!-- عرض ستون ۸ -->
        <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>

نظرات

• خطوط ۴–۶: یک هشدار سبز Bootstrap. تعداد ستون‌های استفاده‌شده مشخص نشده است. در این مورد، از تمام ۱۲ ستون Bootstrap استفاده می‌شود؛
• خطوط ۸–۱۰: یک هشدار زرد Bootstrap:
  • خط ۸: دستور [v-if] از [Vue.js]، نمایش یک بلوک HTML را کنترل می‌کند. این هشدار در اینجا توسط یک متغیر بولی [show] (خط ۲۹) کنترل می‌شود. اگر [show==true] باشد، هشدار قابل مشاهده خواهد بود؛ در غیر این صورت، قابل مشاهده نخواهد بود؛
  • خط ۹: هشدار پیامی را نمایش می‌دهد [msg]، که یک ویژگی (خطوط ۲۰–۲۲) از کامپوننت است؛
• خط ۱۲: یک دکمه آبی که با کلیک کردن، هشدار [warning] را پنهان یا نمایش می‌دهد؛
• خطوط 16–48: کد کامپوننت jS. این کد رفتار پویا کامپوننت را کنترل می‌کند:
• خطوط ۲۰–۲۲: ویژگی‌های کامپوننت؛
• خطوط ۲۴–۳۱: ویژگی‌های کامپوننت؛

تفاوت بین [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> در خطوط ۱–۱۴ از هر دو عنصر [propriétés] و [attributs] استفاده می‌کند:
  • مقادیر ویژگی‌ها توسط یک مؤلفهٔ والد تعیین می‌شوند؛
  • مقادیر ویژگی در ابتدا توسط تابع [data] تنظیم می‌شوند و سپس می‌توانند توسط متدها تغییر یابند؛
  • در هر دو مورد، رندرینگ بصری بلافاصله به تغییرات یک ویژگی (کامپوننت والد) یا یک صفت (متد کامپوننت) واکنش نشان می‌دهد. به این واکنش، رابط واکنشی گفته می‌شود؛

در [template] یک کامپوننت، تفاوتی بین یک ویژگی [prop] و یک صفت [data] وجود ندارد. برای تعیین اینکه آیا مقدار پویا از [template] باید در ویژگی [props] قرار گیرد یا در شیء بازگردانده‌شده توسط تابع [data]، کافی است بپرسیم چه کسی مقدار آن داده را تعیین می‌کند:

• اگر پاسخ کامپوننت والد باشد، آنگاه داده‌ها باید در ویژگی [props] قرار گیرند؛
• اگر پاسخ، متدی باشد که آن رویداد را در داخل کامپوننت مدیریت می‌کند، آنگاه داده‌ها باید در ابجکتی که توسط تابع [data] بازگردانده می‌شود، قرار داده شوند؛

[template] در اینجا از داده‌های پویا زیر استفاده می‌کند:

• [show]، خط ۸. این داده‌ها به‌صورت داخلی توسط متد [changer] پردازش می‌شوند که رویداد [click] را روی دکمه در خط ۱۲ مدیریت می‌کند. بنابراین این یک ویژگی است که توسط تابع [data] (خط ۲۹) ایجاد شده است؛
• [msg]، خط 9. این یک پیام است که توسط کامپوننت والد تنظیم شده است. بنابراین در ویژگی [props] (خط 21) قرار داده می‌شود؛
• [buttonTitle]، خط ۱۲. این داده‌ها به‌صورت داخلی توسط متد [changer] پردازش می‌شوند که رویداد [click] را روی دکمه در خط ۱۲ مدیریت می‌کند. بنابراین این یک ویژگی است که توسط تابع [data] (خط ۲۷) ایجاد شده است؛
• نام‌های ویژگی‌های [name, props, data, methods] شیء صادر شده توسط کامپوننت از پیش تعریف شده‌اند. هیچ نام دیگری نباید استفاده شود؛
• خط ۱۲: ویژگی [@click] دکمه برای مشخص کردن متدی که باید به کلیک روی دکمه پاسخ دهد، استفاده می‌شود. این متد باید در خصوصیت [methods] کامپوننت قرار داشته باشد؛
• خط ۳۳: ویژگی [methods] کامپوننت حاوی تمام متدهای آن است. در اکثر موارد، این‌ها توابعی هستند که به یک رویداد کامپوننت پاسخ می‌دهند؛
• خطوط ۳۵–۴۶: متد [changer] زمانی که کاربر دکمه را کلیک می‌کند، فراخوانی می‌شود:
  • اگر هشدار [warning] نمایش داده شده باشد، پنهان می‌شود و متن دکمه به [Montrer] تغییر می‌کند (خط ۳۹);
  • اگر هشدار [warning] پنهان باشد، نمایش داده می‌شود و متن دکمه به [Cacher] تبدیل می‌شود (خط ۴۳)؛
  • برای نمایش یا پنهان کردن هشدار [warning]، مقدار بولی [show] تغییر می‌کند (خطوط ۳۸ و ۴۲);
  • هنگامی که یک متد نیاز به ارجاع به ویژگی [attr] که توسط تابع [data] بازگردانده می‌شود دارد، ما [this.attr] را می‌نویسیم (خطوط ۳۸ و ۴۲). این بدان معناست که ویژگی‌های شیء بازگردانده‌شده توسط تابع [data]، ویژگی‌های مستقیم کامپوننت [this] هستند؛

5.4. اجرای پروژه

نتیجه به شرح زیر است: